-
-
Notifications
You must be signed in to change notification settings - Fork 189
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
var declared in media query should pull in properties that use/reference that var #99
Comments
https://github.com/postcss/postcss-custom-properties/blob/master/README.md The transformation is not complete. It currently just aims to provide a future-proof way of using a limited subset (to top-level |
Put it behind a flagI think the limitation is valid for being implemented as a default. I think if this feature would be best suited behind a flag. It would cover/solve the actual use cases that I have seen throughout the issues you linked, issues on the Sass repo, etc. Unknown DOM StructureFor starters, the flag would only enable Cascade
Don't try to move around pack/group media queries. Some simple option presets could solve the functionality.
ExampleInput:
Output with preset
Output with preset
There is no better solution/alternativeThis use case could be accomplished with a robust enough mixin system. But right now, postcss-mixins doesn't support Combined with postcss-nested, we could accomplish the same as the snippet below in with PostCSS. Note: non-valid Sass. until this issue is resolved
|
I think the example in #9 is pretty clear about the huge issue with the first solution (inject after each :root definition). <div class="One Two">Text</div> Input: :root { --fontSize: 2em; }
.One { font-size: var(--fontSize); }
.Two { font-size: 6em; }
@media (min-width: 64em) {
:root { --font-size: 3em; }
} Output (notice .One { font-size: 2em; }
.Two { font-size: 6em; }
@media (min-width: 64em) {
.One { font-size: 3em; }
} But I've to admit, with my brains that is just waking up, the second solution seems to be not that bad. I've added a comment here about it postcss/postcss-custom-properties#9 (comment) |
@MoOx I think your example/use-case is outside of the scope of this feature in terms of a reason to shoot down this feature as a whole(not saying you are, but others have in previous issues) but a completely valid case for why it may be best to put it behind a flag. The cascade solution While |
I might start to work on solution |
Note: I suppose this should probably work with Please make this flag available to the Node.js API. Flag name suggestionsSince it is a bool, maybe prepend a
|
Good point for What about |
Just released the
|
As said on gitter we should keep the effort on postcss-custom-properties plugin by incorporating safe transformation. |
I just take a deeper look at your plugin and opened too many issues that you won't be able to resolve to decide (I know because i tried to in the past) to not use it sorry. |
I expect or should result in:
Is this a correct understanding?
Playing around in the
cssnext
playground, I am getting different results.I understand this could get a little tricky in a situation like described here.
The text was updated successfully, but these errors were encountered: