Open jhthorsen opened 1 year ago
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; }
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
PostCSS pseudo shorthand
PostCSS plugin that expands pseudo aliases to browser specific aliases, to avoid writing the same CSS rules multiple times.
Example input
Example output
Usage
The example usage below has the default rules documented. More rules can be added without any majort version bump.
See PostCSS docs for examples for your environment.
MIT © Jan Henning Thorsen