This repository was archived by the owner on Feb 18, 2022. It is now read-only.
Repository navigation
This repository was archived by the owner on Feb 18, 2022. It is now read-only.
Variables starting with '-' cannot be recognized #239
Description
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
Activity
chenyulun commentedon Mar 22, 2021
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,
ouput code
If you think it is unreasonable to read the body style CSS variable by default, can you set the parameter configuration