postcss / postcss-custom-properties

Use Custom Properties in CSS
https://postcss.github.io/postcss-custom-properties
MIT License
597 stars 77 forks source link

Variables starting with '-' cannot be recognized #239

Open chenyulun opened 3 years ago

chenyulun commented 3 years ago
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

chenyulun commented 3 years ago
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);
}
`;

image

If you think it is unreasonable to read the body style CSS variable by default, can you set the parameter configuration