postcss-pseudo-shorthand
v0.2.1
Published
Expand pseudo shorthands
Downloads
10
Maintainers
Readme
PostCSS pseudo shorthand
PostCSS plugin that expands pseudo aliases to browser specific aliases, to avoid writing the same CSS rules multiple times.
Example input
input[range]::range-thumb {
background: green;
}
Example output
input[range]::-moz-range-thumb {
background: green;
}
input[range]::-ms-thumb {
background: green;
}
input[range]::-webkit-slider-thumb {
background: green;
}
Usage
The example usage below has the default rules documented. More rules can be added without any majort version bump.
import postcssPseudoShorthand from 'postcss-pseudo-shorthand';
const config = {
plugins: [
postcssPseudoShortHand({
rules: {
'::color-swatch': ['::-moz-color-swatch', '::-webkit-color-swatch'],
'::color-swatch-wrapper': ['::-moz-focus-inner', '::-webkit-color-swatch-wrapper'],
'::range-thumb': ['::-moz-range-thumb', '::-ms-thumb', '::-webkit-slider-thumb'],
'::range-track': ['::-moz-range-track', '::-ms-track', '::-webkit-slider-runnable-track'],
},
}),
],
};
export default config;
See PostCSS docs for examples for your environment.
MIT © Jan Henning Thorsen