Postcss-move-props-to-bg-image-query NPM

postcss-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-query

Usage

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.