Generate css variables fro different css pre-processors. Mainly target for scss/sass.
npm i -D scss-variable
#or
yarn add -D scss-variable
Assume you have a varaible.js
looks like this
module.exports = {
ns: {
property: {
a: "#fff",
b: "#ccc"
}
}
};
Create another scss-variable.js
const path = require("path");
const generateVariable = require("scss-variable");
generateVariable({
src: path.resolve(__dirname, "path/to/variable.js"),
dest: path.resolve(__dirname, "path/to/variable.scss")
});
Then run node scss-variable
;
Output will look like this
// variable.scss
$ns-property-a: #fff;
$ns-property-b: #ccc;
// in your variable.js
module.exports = {
_map_: {
ns: {
case: {
"font-size": "12px"
}
}
}
};
Run node scss-variable
Output will look like this
$ns: (
case: (
font-size: 12px
)
);
To use !default
module.exports = {
_map_: {
ns: {
default: true,
case: {
"font-size": "12px"
}
}
}
};
Output will look like this
$ns: (
case: (
font-size: 12px
)
) !default;
map will be emitted after variables
You can refer to your variables in your map
override
is used to provide a new object to merge with src
const path = require("path");
const generateVariable = require("scss-variable");
generateVariable({
src: path.resolve(__dirname, "path/to/variable.js"),
dest: path.resolve(__dirname, "path/to/variable.scss"),
override: {
property: "value"
}
});
You can merge variables as well as scss map
// in variable.js
module.exports = {
a: {
p: "black"
},
_map_: {
ns: {
case: {
"font-size": "12px"
}
}
}
};
// in your external override related js
module.exports = {
a: {
p: "red"
},
_map_: {
ns: {
case: {
"font-size": "14px"
}
}
}
};
// in scss-variable.js
generateVariable({
src: path.resolve(__dirname, "path/to/variable.js"),
dest: path.resolve(__dirname, "path/to/variable.scss"),
override: require("path/to/override/related/js")
});
Output will be:
$a-p: red;
$ns: (
case: (
font-size: 12px
)
);
Viola!
In case you do not like nesting, flatten property key or even flatten map expression are supported
The case above can be rewritten as following
// in your external override related js
module.exports = {
"a-p": "red",
"ns.case": {
"font-size": "14px"
}
};
Source of your variable
Where to emit your file. File extension is needed!
In other word,
less
or other syntax are possible and actually supported
Object to override your src
Default: '$'
String to use to prefix the variable (and map) assignment
Basically works like this
`${prefix}${propertyName}`;
'@'
for less variables : )
Default: true
Whether to add semicolon at the end of variable assignment
Default: ':'
As the name suggested, used for variable assignment
Default: '-'
String used to concat nested property names
`${property}${separator}${property}`;
Default: '.'
When you write map structure as a single property in override
(ns.a.b.c
)
Only useful for override
// in your variable.js
module.exports = {
_map_: {
ns: {
a: {
b: {
"font-size": "12px"
}
}
}
}
};
In your override
, you can refer the above map structure as following
`ns${mapSeparator}a${mapSeparator}b`;
Default: '_map_'
Key to identify map object
Affected to both src
and override
Default: ''
String inserted before generated content
`${beforeBody}\n${generatedContent}`;
Default: ''
String inserted after generated content
`${generatedContent}\n${afterBody}`;
Default: false
Watch src
to recompile.
Default: lodash.merge
Dangerous area. Function used to merge src
and override
Signature should look like Object.assign
- watch mode
- cli
- webpack-loader