Not replacing variables defined in a class #121

Fenntasy · 2018-06-27T11:25:29Z

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?

The text was updated successfully, but these errors were encountered:

jonathantneal · 2018-06-27T15:36:05Z

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 · 2018-06-28T14:13:40Z

Thanks.

yanhaijing · 2018-10-27T16:03:36Z

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

minimit · 2019-10-07T18:25:27Z

Relevant thread: #1

jonathantneal closed this as completed Jun 28, 2018

blowery mentioned this issue Mar 22, 2019

Jetpack Onboarding: add accent color, clean up styles Automattic/wp-calypso#31625

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Not replacing variables defined in a class #121

Not replacing variables defined in a class #121

Fenntasy commented Jun 27, 2018

jonathantneal commented Jun 27, 2018

Fenntasy commented Jun 28, 2018

yanhaijing commented Oct 27, 2018

minimit commented Oct 7, 2019

Not replacing variables defined in a class #121

Not replacing variables defined in a class #121

Comments

Fenntasy commented Jun 27, 2018

jonathantneal commented Jun 27, 2018

Fenntasy commented Jun 28, 2018

yanhaijing commented Oct 27, 2018

minimit commented Oct 7, 2019