postcss-root-parse-var
v0.1.0
Published
PostCSS root parse variable
Downloads
4
Maintainers
Readme
postcss-root-parse-var
Simple PostCSS plugin to add support for parse-var()
, allowing a CSS variable to be parsed from :root
or a selector of your choice.
This is useful if you are using another PostCSS plugin/function that requires a static value and differs from fallback PostCSS plugins that replace all variables with static values.
Installation
yarn add postcss-root-parse-var --dev
Require postcssRootParseVar
at the top of Webpack or Mix:
const postcssRootParseVar = require('postcss-root-parse-var');
Using Webpack
postcss([postcssRootParseVar]);
Using Mix Sass (Sage 10)
mix
.sass('resources/assets/styles/editor.scss', 'styles')
.options({
postCss: [postcssRootParseVar]
});
Config
Some config can be passed into postcssRootParseVar()
in Webpack or Mix.
postcssRange({
root: ':root',
prefix: 'parse-var',
})
Usage
:root {
--screen-md: 48rem;
--screen-lg: 75rem,
}
parse-var(--screen-md)
This will parse the variable resulting in a static value of 48rem
.
font-size: range(2rem, 6rem, parse-var(--screen-md), parse-var(--screen-lg))