PostCSS plugin enabling configuration maps.
npm install postcss-map --save-dev
var fs = require('fs');
var postcss = require('postcss');
var map = require('postcss-map');
var input = fs.readFileSync('input.css', 'utf8');
var opts = {
basePath: 'css/',
maps: [ 'example.yml', 'breakpoints.yml', 'fonts.yml' ]
};
postcss()
.use(map(opts))
.process(input)
.then(function (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 Bold', sans-serif;
font-weight: normal;
font-feature-settings: 'onum', 'kern', 'liga', 'dlig', 'clig';
font-kerning: normal;
}var fs = require('fs');
var postcss = require('postcss');
var map = require('postcss-map');
var input = fs.readFileSync('input.css', 'utf8');
var opts = {
basePath: 'css/',
maps: [
{ dummy: {
one: 1,
two: 2,
},
},
'example.yml',
'breakpoints.yml',
'fonts.yml'
}]
};
postcss()
.use(map(opts))
.process(input)
.then(function (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!';
}var fs = require('fs');
var postcss = require('postcss');
var map = require('postcss-map');
var input = fs.readFileSync('input.css', 'utf8');
var opts = {
maps: [{
one: 1,
two: 2,
}]
};
postcss()
.use(map(opts))
.process(input)
.then(function (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.
var 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.