brandeur-plugin-responsive-value
v1.0.2
Published
Brandeur plugin to resolve responsive array values
Downloads
25
Maintainers
Readme
brandeur-plugin-responsive-value
Adds vendor prefixes to style properties and values when required.
Installation
# npm
npm i --save brandeur-plugin-responsive-value
# yarn
yarn add brandeur-plugin-responsive-value
# pnpm
pnpm add brandeur-plugin-responsive-value
Usage
import responsiveValue from 'brandeur-plugin-responsive-value'
const plugin = responsiveValue([
'@media (min-width: 320px)',
'@media (min-width: 1024px)',
])
Configuration
| Parameter | Type | Description |
| ------------ | ----------------- | -------------------------------------------------------------------- |
| mediaQueries | Array<string>
| Ordered list of media queries that reference the values in the array |
Input
Using the example configuration from above.
{
paddingLeft: [10, 15, 20]
}
Output
{
paddingLeft: 10,
"@media (min-width: 320px)": {
paddingLeft: 15
},
"@media (min-width: 1024px)": {
paddingLeft: 20
}
}
License
Brandeur is licensed under the MIT License. Documentation is licensed under Creative Commons License. Created with ♥ by @robinweser.