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

Variables starting with '-' cannot be recognized #239

@chenyulun

Description

@chenyulun
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

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions