PostCSS plugin enabling configuration maps.
npm install postcss-map --save-dev or
yarn add postcss-map --save-dev const fs = require('fs'); const postcss = require('postcss'); const map = require('postcss-map'); let input = fs.readFileSync('input.css', 'utf8'); let opts = { basePath: 'css', maps: ['example.yml', 'breakpoints.yml', 'fonts.yml'], }; postcss() .use(map(opts)) .process(input) .then(result => { fs.writeFileSync('output.css', result.css); });map:
# example.yml foo: bar: baz: 'yeah!'input:
.baz { content: map(example, foo, bar, baz); }output:
.baz { content: 'yeah!'; }map:
# breakpoints.yml small: 320px medium: 321px large: 800pxinput:
@media (min-width: map(breakpoints, medium)) { .test { width: 100%; } }output:
@media (min-width: 321px) { .test { width: 100%; } }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:
.whatever { @map fonts regular; }output:
.whatever { font-family: 'Spinnaker Regular', sans-serif; font-weight: normal; font-feature-settings: 'onum', 'kern', 'liga', 'dlig', 'clig'; font-kerning: normal; }const fs = require('fs'); const postcss = require('postcss'); const map = require('postcss-map'); let input = fs.readFileSync('input.css', 'utf8'); let opts = { basePath: 'css', maps: [ { dummy: { one: 1, two: 2, }, }, 'example.yml', 'breakpoints.yml', 'fonts.yml' }] }; postcss() .use(map(opts)) .process(input) .then(result => { fs.writeFileSync('output.css', result.css); });input:
.whatever { content: map(dummy, one); } .baz { content: map(example, foo, bar, baz); }output:
.whatever { content: 1; } .baz { content: 'yeah!'; }const fs = require('fs'); const postcss = require('postcss'); const map = require('postcss-map'); let input = fs.readFileSync('input.css', 'utf8'); let opts = { maps: [ { one: 1, two: 2, }, ], }; postcss() .use(map(opts)) .process(input) .then(result => { fs.writeFileSync('output.css', result.css); });input:
.whatever { content: map(one); }output:
.whatever { content: 1; }type: String
default: process.cwd
Base path to retrieve maps from.
type: Array
default: []
An array representing maps files to load and parse. Map files can either be in YAML or JSON format.
You can also pass literal objects directly into the Array.
type: string
default: config
A shorter syntax is also available, so you don't have to type the map name on each call. To enable it you need to either have a map called config or only one map in your settings.
let opts = { basePath: 'css', maps: ['foo.yml'] // OR maps: ['config.yml', 'breakpoints.yml'] };map:
# config.yml foo: 'foo value'input:
.short { content: map(foo); }output:
.short { content: 'foo value'; }Used in conjunction with postcss-plugin-context you can benefit from contextualized maps and leverage the short syntax.
@context brandColors { h1 { color: map(primary); } }postcss-map is unlicensed.