Scrum / postcss-at-rules-variables

PostCss plugin to use CSS Custom Properties in at-rule @each, @for, @if, @else and more...
MIT License
60 stars 4 forks source link

Regression from v0.1.10 - 'nested' vars not being processed #209

Closed spacedawwwg closed 3 years ago

spacedawwwg commented 3 years ago

In v0.1.10, you could use nested vars that would be parsed before being set to a mixin, e.g:

:root {
  --original-var: 4px;
  --nested-var: calc(2 * var(--original-var));
}
.class-name {
  @mixin mixinName var(--nested-var);
}

nested var would be resolved in the mixin as calc(2 * 4px)

As of v2, this no longer works and is instead simply passed through as calc(2 * var(--original-var)) (i.e not resolving the original var)

Scrum commented 3 years ago

@spacedawwwg Thank, i'll check if it's a good catch.

Scrum commented 3 years ago

@spacedawwwg No, this is unfortunately not a catch, I created an example and it passes the tests. You can make adjustments to the test so that it fails, or create an example that clearly falls with your result.

https://github.com/Scrum/postcss-at-rules-variables/pull/210/files

spacedawwwg commented 3 years ago

Oh, Ok - I only popped the example together based on my scenario but this is very weird then as I've had to revert back to back to v0.1.10 to get this working in my project. I wonder if it's 1) a config issue or 2) some kind of clash with another plugin

I'll do some more investigating and report back

spacedawwwg commented 3 years ago

I found the issue - It requires that any CSS vars used need to be included before they used now.

I wonder if this is a change in how PostCSS 8 works now?

Scrum commented 3 years ago

I wonder if this is a change in how PostCSS 8 works now?

I don't think my plugin and test uses PostCSS 8

spacedawwwg commented 3 years ago

@Scrum Sorry, I should have been more specific "included before they used" using the postcss-import plugin

Before hand the plugin used variables defined anywhere in the CSS (as if all the CSS had been previously parsed)

Scrum commented 3 years ago

I have created an example, please supplement it to reproduce your situation.

spacedawwwg commented 3 years ago

@Scrum popped it up here https://github.com/spacedawwwg/postcss-at-rules-demo

Scrum commented 3 years ago

This is due to the fact that the ad comes after the definition. Postscss makes only one iteration from top to bottom, in your case you will have to do multiple iterations when declaring a new value.

It seems to me that it is not entirely correct to make definitions after the declaration.

Scrum commented 3 years ago

now you can use the option declarationbywalk to find all declared variable declarations