JetBrainspostcss-move-props-to-bg-image-query
PostCSS plugin to turn some style declarations into background image query params. Main purpose - pass parameters from CSS to webpack loaders (eg. svg-transform-loader).
Demo
Input
.img {
background: url(img.svg);
-svg-mixer-fill: red;
-svg-mixer-stroke: #000;
}Output
.img {
background: url(img.svg?fill=red&stroke=%23000);
}Installation
npm install postcss-move-props-to-bg-image-queryUsage
const { readFileSync } = require('fs');
const postcss = require('postcss');
const moveProps = require('postcss-move-props-to-bg-image-query');
const input = readFileSync('input.css');
postcss()
.use(moveProps())
.process(input)
.then(result => {
console.log(result.css);
});Via postcss.config.js
const moveProps = require('postcss-move-props-to-bg-image-query');
module.exports = {
plugins: [
moveProps()
]
}Configuration
match
Type:
string | RegExp | Array<string | RegExp>
Default:'-svg-mixer-*'
Filter which declarations should be transformed. Could be a string (glob pattern), RegExp or array of them.
computeCustomProps
Type:
PostCSS plugin instance
You can use CSS custom properties (eg. -svg-mixer-fill: var(--color);) in values by providing corresponding PostCSS plugin,
postcss-custom-properties for example:
const moveProps = require('postcss-move-props-to-bg-image-query');
const customProps = require('postcss-custom-properties');
module.exports = {
plugins: [
moveProps({
computeCustomProps: customProps({ preserve: false })
})
]
}transform
Type:
function(decl: {name: string, value: string}): {name: string, value: string}
Declaration-to-query param transform function. Accepts an object with name and
value fields and should return object with the same structure. By default strips
-svg-mixer- in declaration name, eg. -svg-mixer-fill: red turns into ?fill=red. Declaration
value will be URL encoded.