postcss-custom-properties
postcss-custom-properties copied to clipboard
Variables starting with '-' cannot be recognized
const postcss = require("postcss");
const postcssCustomProperties = require("postcss-custom-properties");
const testStr = `
:root {
---first-color: 255, 255, 0;
--second-color: rgba(var(---first-color), .5);
}
h1 {
color: var(--second-color);
}
`;
postcss([
postcssCustomProperties({
}),
])
.process(testStr, { from: 'src/app.css', to: 'dest/app.css' })
.then((result) => {
console.log(result.css);
});
output css
:root {
---first-color: 255, 255, 0;
--second-color: rgba(var(---first-color), .5);
}
h1 {
color: rgba(var(---first-color), .5);
color: var(--second-color);
}
Expect the following code
:root {
---first-color: 255, 255, 0;
--second-color: rgba(var(---first-color), .5);
}
h1 {
color: rgba(255, 255, 0, .5);
color: var(--second-color);
}
Browsers can recognize variables that start with a '-', but here the plugin cannot recognize them when converting
const customPropertyRegExp = /^--[A-z][\w-]*$/; // whether the node is an html or :root rule
Is this check too strict, Is it possible to add a parameter to read the variable on the body style, since most of the element styles are under the body Like this,
const testStr = `
:root {
--color: green;
}
body {
--color: red;
}
h1 {
color: var(--color);
}
`;
ouput code
:root {
--color: green;
}
body {
--color: red;
}
h1 {
color: red;
color: var(--color);
}
`;
If you think it is unreasonable to read the body style CSS variable by default, can you set the parameter configuration