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.