postcss-custom-property-maps
Interlope external value maps with css as custom properties. Supports Javascript module, YAML file, or JSON file. Use before [postcss-custom-properties] to insert the map values directly into the css.
Installation
npm install postcss-custom-property-maps --save-dev
or
yarn add postcss-custom-property-maps --save-dev
Usage
const fs = ;const postcss = ;const map = ; let input = fs; let opts = basePath: 'css' maps: 'example.js' 'breakpoints.yml' 'fonts.json'; ;
Options
basePath
type: String
default: process.cwd
Directory to resolve map paths against.
includeUnused
type: boolean
default: false
If true generate custom properties for all map variables. Otherwise only generate custom properties for used variables.
maps
type: Array
default: []
An array representing maps files to load and parse.
Map files can be YAML, JSON, or Javascript.
You can also pass literal objects directly into the Array.
defaultMap (short syntax)
type: string
default: config
A map to resolve values against if another map is not found. This allows a shorter syntax where you can leave off the map name.
For Example
let opts = defaultMap: 'values' maps: 'colors.yml' 'values.yml';
maps:
# colors.yml main: 'red'
# values.yml foo: 'foo value'
input:
output:
If you only have a single map all values will automatically resolve against it.
Example usage
declaration values
maps:
# colors.yml red: '#FF0000'
# example.yml foo: bar: baz: 'yeah!' main-color: map(colors, red)
input:
output:
postcss-custom-properties
With const fs = ;const postcss = ;const map = ;const customProperties = ; let input = fs; ;
maps:
# example.yml foo: yeah!
input:
output:
Javascript module
maps:
// example.jsmoduleexports = foo: 'yeah!';
input:
output:
At-rule parameters
map:
# breakpoints.yml small: 320pxmedium: 321pxlarge: 800px
input:
{}
output:
{}
Declaration blocks
map:
# fonts.yml regular: font-family: "'Spinnaker Regular', sans-serif" font-weight: 'normal' font-feature-settings: "'onum', 'kern', 'liga', 'dlig', 'clig'" font-kerning: 'normal'bold: font-family: "'Spinnaker Bold', sans-serif" font-weight: 'normal' font-feature-settings: "'onum', 'kern', 'liga', 'dlig', 'clig'" font-kerning: 'normal'
input:
output:
Literal objects
const fs = ;const postcss = ;const map = ; let input = fs; let opts = basePath: 'css' maps: dummy: one: 1 two: 2 'example.yml' 'breakpoints.yml' 'fonts.yml' }; ;
input:
output:
Literal objects and short syntax
const fs = ;const postcss = ;const map = ; let input = fs; let opts = maps: one: 1 two: 2 ; ;
input:
output:
Context
Used in conjunction with postcss-plugin-context you can benefit from contextualized maps and leverage the short syntax.
@}
Credits
Thanks to Pascal Duez and Bogdan Chadkin for the inital project postcss-map.