Skip to content

Commit

Permalink
feat: support CSS @starting-style rule
Browse files Browse the repository at this point in the history
  • Loading branch information
yisibl committed Jul 19, 2023
1 parent afd73d1 commit 929a7c7
Show file tree
Hide file tree
Showing 3 changed files with 51 additions and 0 deletions.
16 changes: 16 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,22 @@
}
```

* Add support for the new [`@starting-style`](https://drafts.csswg.org/css-transitions-2/#defining-before-change-style-the-starting-style-rule) CSS rule ([#3249](https://github.com/evanw/esbuild/pull/3249))
This at rule allow authors to start CSS transitions on first style update. That is, you can now make the transition take effect when the display property changes from none to block.

```css
/* Original code */
@starting-style {
h1 {
background-color: transparent;
}
}

/* Output */
@starting-style{h1{background-color:transparent}}
```

This was contributed by [@yisibl](https://github.com/yisibl).
## 0.18.14

* Implement local CSS names ([#20](https://github.com/evanw/esbuild/issues/20))
Expand Down
4 changes: 4 additions & 0 deletions internal/css_parser/css_parser.go
Original file line number Diff line number Diff line change
Expand Up @@ -985,6 +985,10 @@ var specialAtRules = map[string]atRuleKind{
// Container Queries
// Reference: https://drafts.csswg.org/css-contain-3/#container-rule
"container": atRuleInheritContext,

// Defining before-change style: the @starting-style rule
// Reference: https://drafts.csswg.org/css-transitions-2/#defining-before-change-style-the-starting-style-rule
"starting-style": atRuleInheritContext,
}

var atKnownRuleCanBeRemovedIfEmpty = map[string]bool{
Expand Down
31 changes: 31 additions & 0 deletions internal/css_parser/css_parser_test.go
Original file line number Diff line number Diff line change
Expand Up @@ -1199,6 +1199,37 @@ func TestAtRule(t *testing.T) {
}
}`, "@supports (container-type: size){@container (width <= 150px){#inner{background-color:#87ceeb}}}")

// https://drafts.csswg.org/css-transitions-2/#defining-before-change-style-the-starting-style-rule
expectPrinted(t, `
@starting-style {
h1 {
background-color: transparent;
}
@layer foo {
div {
height: 100px;
}
}
}
`, `@starting-style {
h1 {
background-color: transparent;
}
@layer foo {
div {
height: 100px;
}
}
}
`)

expectPrintedMinify(t, `@starting-style {
h1 {
background-color: transparent;
}
}`, "@starting-style{h1{background-color:transparent}}")

// https://drafts.csswg.org/css-counter-styles/#the-counter-style-rule
expectPrinted(t, `
@counter-style box-corner {
Expand Down

0 comments on commit 929a7c7

Please sign in to comment.