Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[css-apply-rule] Variables in @apply should resolve based on calling context, not defining context #532

Closed
LeaVerou opened this issue Sep 26, 2016 · 4 comments
Closed

[css-apply-rule] Variables in @apply should resolve based on calling context, not defining context #532

LeaVerou opened this issue Sep 26, 2016 · 4 comments
Labels
unknown/future spec

Comments

@LeaVerou
Copy link
Member

For example, in the following code (live demo - works in Chrome with flag)

:root {
    --foo: orange;
    --bg: {
        background: var(--foo);
    }
}

body {
    --foo: green;
    @apply --bg;
}

<body> should be green, not orange. That will allow parameterization of @apply mixins, which is what authors really want (and already do with preprocessors, bloating the CSS size as it spits out different code for each call). If it's just about copying a bunch of declarations, they can always preprocess that. It's also surprising, given that in every other case variables resolve based on current element.
@LeaVerou
Copy link
Member Author

CC @tabatkins

@tabatkins
Copy link
Member

This has nothing to do with @apply, it's just the normal behavior of custom properties. As far as CSS is concerned, you have:

:root {
  --foo: meaningless-stuff;
  --bg: meaningless-stuff var(--foo) meaningless-stuff;
}

It sees the var(), and substitutes it as normal. The fact that you later are subbing in --bg via an @apply rule rather than a var() is meaningless.

That said, plan for a later version of Custom Properties is to have a var() option that causes it to be substituted at time of use (when it's used in something other than an untyped custom property), which will achieve what you're looking for.

@jonjohnjohnson jonjohnjohnson mentioned this issue Jun 19, 2019
Open
@mildred
Copy link

mildred commented Dec 14, 2020

What is preventing from treating custom properties enclosed with { and } a spacial way:

:root {
  --bar: bar;
  --foo: var(--bar);
  --baz: { anything with var(--variable) inside };
}

Where --foo would equal to bar and --baz would equal to anything with var(--variable) inside (variable not interpolated).

Then, later on, @apply --baz would be able to interpolate var(--variable).

@mildred mildred mentioned this issue Dec 14, 2020
Open
@LeaVerou
Copy link
Member Author

@tabatkins should this be closed since@apply is no longer a thing? (or at least the @apply this issue is talking about)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
unknown/future spec
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@mildred @LeaVerou @tabatkins