New issue
Advanced search Search tips
Starred by 10 users

Issue metadata

Status: Fixed
Owner:
Closed: Mar 2016
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: All
Pri: 2
Type: Feature

Blocked on:
issue 637419



Sign in to add a comment
link

Issue 586974: Implement the CSS @apply rule

Reported by timloh@chromium.org, Feb 15 2016 Project Member

Issue description

The CSS @apply rule allows authors to define custom properties which contain declaration lists and then apply them inside style rules. This allows custom properties to be used for theming in a more extensible way than var() references.

https://tabatkins.github.io/specs/css-apply-rule/
 

Comment 1 by bugdroid1@chromium.org, Feb 27 2016

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/39709d9f02fcb5c6b746e773b6c48b8e6855819e

commit 39709d9f02fcb5c6b746e773b6c48b8e6855819e
Author: timloh <timloh@chromium.org>
Date: Sat Feb 27 03:53:05 2016

Basic implementation of @apply

This patch adds an initial implementation of @apply. Aside from setting
custom properties from an @apply block, all the other features of @apply
should be implemented.

The implementation strategy is similar to CSS custom properties, in that
we have a special CSSPropertyID value (CSSPropertyApplyAtRule) and store
the rules in StylePropertySets alongside regular declarations.

CSSVariableData is now able to cache a StylePropertySet object so we can
avoid having to re-parse the custom property sets across multiple style
recalcs. Note that this only helps for custom properties with no var()
references or @apply rules, as otherwise we'd create a new object every
style recalc.

The CSSOM interface for @apply implemented here differs from the current
spec draft. Instead of exposing @apply rules by changing CSSStyleRule to
inherit CSSGroupingRule, we instead treat them as regular declarations.
This has some weirdness in that CSSStyleDeclaration.item(i) can return a
value "@apply", which getPropertyValue won't accept. We need to at some
point work out the best behaviors for interfacing with the CSSOM.

As discussed with shans@, we allow @apply rules inside custom properties
and have them resolved when we resolve variables. They behave similarly
to var() references, and also contribute to cycle detection.

https://groups.google.com/a/chromium.org/forum/?fromgroups#!topic/blink-dev/Wc71ungGdn4
https://tabatkins.github.io/specs/css-apply-rule/

BUG= 586974 

Review URL: https://codereview.chromium.org/1645433002

Cr-Commit-Position: refs/heads/master@{#378108}

[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-basic.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-cascade-multiple-rules.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-cascade-trick-2-expected.txt
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-cascade-trick-2.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-cascade-trick.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-cascade.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-cssom-apis.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-in-inline-style.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-in-regular-property-expected.txt
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-in-regular-property.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-inherited-variable.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-invalid-cycles.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-invalid-nesting.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-invalid-syntax.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-nested.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-override-custom-property-expected.txt
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-override-custom-property.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-override-self-expected.txt
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-override-self.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-recursive.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-shorthands.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-variable-references.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-whitespace.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/custom-property-set-syntax.html
[add] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/LayoutTests/fast/css/atapply/multiple-at-apply-rules.html
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/build/scripts/css_properties.py
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/build/scripts/make_css_property_names.py
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/build/scripts/templates/CSSPropertyMetadata.cpp.tmpl
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/core/css/CSSVariableData.cpp
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/core/css/CSSVariableData.h
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/core/css/PropertySetCSSStyleDeclaration.cpp
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/core/css/StylePropertySerializer.cpp
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/core/css/parser/CSSAtRuleID.cpp
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/core/css/parser/CSSAtRuleID.h
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/core/css/parser/CSSParser.cpp
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/core/css/parser/CSSParser.h
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/core/css/parser/CSSParserImpl.cpp
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/core/css/parser/CSSParserImpl.h
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/core/css/parser/CSSVariableParser.cpp
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.cpp
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.h
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/core/css/resolver/StyleResolver.h
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/core/frame/UseCounter.cpp
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/core/frame/UseCounter.h
[modify] https://crrev.com/39709d9f02fcb5c6b746e773b6c48b8e6855819e/third_party/WebKit/Source/platform/RuntimeEnabledFeatures.in

Comment 2 Deleted

Comment 3 by yio...@gmail.com, Mar 1 2016

.test {
    --color: { green };
    --mixin: {
      color: yellow;
      font-size: 22px;
      /*Cause the browser to crash.*/
      background: @apply --color url('a.png') no-repeat;
    };
    @apply --mixin;
  }

Comment 4 by bugdroid1@chromium.org, Mar 7 2016

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/0355ba3b050df4aa4c013b6bc8681756c580cfee

commit 0355ba3b050df4aa4c013b6bc8681756c580cfee
Author: timloh <timloh@chromium.org>
Date: Mon Mar 07 02:08:18 2016

Allow setting custom properties from @apply rules

This patch adds support for setting custom properties in @apply rules.
The model implemented here is that custom properties get a first value,
which can be used in @apply rules (not including those inside custom
property values), and then may get a second (final) value after @apply
rules are applied.

BUG= 586974 

Review URL: https://codereview.chromium.org/1724183007

Cr-Commit-Position: refs/heads/master@{#379507}

[delete] https://crrev.com/0f1b99def010815efd548304136aa69441161c91/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-cascade-trick-2-expected.txt
[delete] https://crrev.com/0f1b99def010815efd548304136aa69441161c91/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-override-custom-property-expected.txt
[delete] https://crrev.com/0f1b99def010815efd548304136aa69441161c91/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-override-self-expected.txt
[modify] https://crrev.com/0355ba3b050df4aa4c013b6bc8681756c580cfee/third_party/WebKit/Source/core/css/CSSVariableData.cpp
[modify] https://crrev.com/0355ba3b050df4aa4c013b6bc8681756c580cfee/third_party/WebKit/Source/core/css/CSSVariableData.h
[modify] https://crrev.com/0355ba3b050df4aa4c013b6bc8681756c580cfee/third_party/WebKit/Source/core/css/resolver/StyleResolver.cpp
[modify] https://crrev.com/0355ba3b050df4aa4c013b6bc8681756c580cfee/third_party/WebKit/Source/core/css/resolver/StyleResolverState.cpp
[modify] https://crrev.com/0355ba3b050df4aa4c013b6bc8681756c580cfee/third_party/WebKit/Source/core/css/resolver/StyleResolverState.h

Comment 5 by bugdroid1@chromium.org, Mar 8 2016

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/fc5aafd0c036e4b939ebd6ef2e014a97b7add807

commit fc5aafd0c036e4b939ebd6ef2e014a97b7add807
Author: timloh <timloh@chromium.org>
Date: Tue Mar 08 04:55:18 2016

Check @apply syntax in custom properties declarations at parse time

This patch moves syntax checking for @apply references inside custom
property declarations from style computation to parse time. This makes
us reject any custom property declarations which has an invalid @apply
rule, such as "--foo: @apply bar".

BUG= 586974 

Review URL: https://codereview.chromium.org/1752773003

Cr-Commit-Position: refs/heads/master@{#379747}

[modify] https://crrev.com/fc5aafd0c036e4b939ebd6ef2e014a97b7add807/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-invalid-nesting.html
[modify] https://crrev.com/fc5aafd0c036e4b939ebd6ef2e014a97b7add807/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-invalid-syntax.html
[modify] https://crrev.com/fc5aafd0c036e4b939ebd6ef2e014a97b7add807/third_party/WebKit/Source/core/css/parser/CSSVariableParser.cpp
[modify] https://crrev.com/fc5aafd0c036e4b939ebd6ef2e014a97b7add807/third_party/WebKit/Source/core/css/resolver/CSSVariableResolver.cpp

Comment 6 by bugdroid1@chromium.org, Mar 9 2016

Project Member
The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/cd0ab5da4c012ac338e5dfe3aecae36e51aeabf2

commit cd0ab5da4c012ac338e5dfe3aecae36e51aeabf2
Author: timloh <timloh@chromium.org>
Date: Wed Mar 09 02:37:41 2016

Disallow @apply rules in non-custom property declarations

This patch disallows the use of @apply inside non-custom property
declarations. @apply should only be allowed where we can have a
list of property declarations.

BUG= 586974 

Review URL: https://codereview.chromium.org/1769373002

Cr-Commit-Position: refs/heads/master@{#380039}

[delete] https://crrev.com/1b31ceec0092bbe9bc14ba81d51bde1772d2e0e4/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-in-regular-property-expected.txt
[modify] https://crrev.com/cd0ab5da4c012ac338e5dfe3aecae36e51aeabf2/third_party/WebKit/LayoutTests/fast/css/atapply/at-apply-in-regular-property.html
[modify] https://crrev.com/cd0ab5da4c012ac338e5dfe3aecae36e51aeabf2/third_party/WebKit/Source/core/css/parser/CSSVariableParser.cpp

Comment 7 by timloh@chromium.org, Mar 15 2016

re comment 3: @apply isn't supposed to be used inside non-custom property declarations, which the last patch here disallows.

Comment 8 by timloh@chromium.org, Mar 15 2016

Status: Fixed (was: Started)
The implementation here is pretty much done for now. When the spec has moved forwards more and we're thinking about shipping the feature I'll update this bug.

Comment 9 by yio...@gmail.com, Mar 16 2016

re comment 7: OK, thanks!

Comment 10 by dstockwell@chromium.org, Aug 18 2016

Blockedon: 637419

Sign in to add a comment