Not replacing variables defined in a class

Fenntasy commented 6 years ago

Hello,

I may be wrong in my interpretation of this plugin but I don't understand what it does when we use CSS custom properties outside of a :root definition.

Here is a test file:

const postCSSCustomProperties = require('postcss-custom-properties');

const CSS = `
:root {
  --color: red;
}
body {
  background: var(--color);
}
.myClass {
  --othercolor: blue;
  background: var(--othercolor);
}
.myClass .mySubClass {
  background: var(--othercolor);
}
.myClass .mySubClass {
  border-color: var(--color);
}
`;

const result = postCSSCustomProperties.process(CSS);
console.log(result.css);

And here is the output:

:root {
  --color: red;
}
body {
  background: red;
  background: var(--color);
}
.myClass {
  --othercolor: blue;
  background: var(--othercolor);
  background: var(--othercolor);
}
.myClass .mySubClass {
  background: var(--othercolor);
  background: var(--othercolor);
}
.myClass .mySubClass {
  border-color: red;
  border-color: var(--color);
}

I like that it keeps the use of var(--color) for browsers that can deal with it but just prefix it with a safe value. But I don't understand why it does not work with --othercolor, especially when it duplicates the lines.

Is there something I'm missing or is this a bug?

jonathantneal commented 6 years ago

Hey @Fenntasy, it does not replace --othercolor because we don’t know that’s the correct variable to use:

<body class="myClass" id="myId">

#myId {
    --othercolor: green;
}

.myClass {
  --othercolor: blue;
  background: var(--othercolor);
}

The background of <body> will be green.

Fenntasy commented 6 years ago

Thanks.

yanhaijing commented 5 years ago

overwrite variables cannot be fallback, /(ㄒoㄒ)/~~

minimit commented 4 years ago

Relevant thread: postcss/postcss-custom-properties#1

postcss / postcss-custom-properties

Not replacing variables defined in a class #121