Skip to content
This repository has been archived by the owner on Feb 18, 2022. It is now read-only.

Variables starting with '-' cannot be recognized #239

Open
chenyulun opened this issue Mar 21, 2021 · 1 comment
Open

Variables starting with '-' cannot be recognized #239

chenyulun opened this issue Mar 21, 2021 · 1 comment
Labels

Comments

@chenyulun
Copy link

chenyulun commented Mar 21, 2021

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
Copy link
Author

chenyulun commented Mar 22, 2021

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

2 participants