Support local names in CSS for @keyframe
, @counter-style
, and @container
(#20)
This release extends support for local names in CSS files loaded with the local-css
loader to cover the @keyframe
, @counter-style
, and @container
rules (and also animation
, list-style
, and container
declarations). Here's an example:
@keyframes pulse {
from, to { opacity: 1 }
50% { opacity: 0.5 }
}
@counter-style moon {
system: cyclic;
symbols: 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔;
}
@container squish {
li { float: left }
}
ul {
animation: 2s ease-in-out infinite pulse;
list-style: inside moon;
container: squish / size;
}
With the local-css
loader enabled, that CSS will be turned into something like this (with the local name mapping exposed to JS):
@keyframes stdin_pulse {
from, to {
opacity: 1;
}
50% {
opacity: 0.5;
}
}
@counter-style stdin_moon {
system: cyclic;
symbols: 🌕 🌖 🌗 🌘 🌑 🌒 🌓 🌔;
}
@container stdin_squish {
li {
float: left;
}
}
ul {
animation: 2s ease-in-out infinite stdin_pulse;
list-style: inside stdin_moon;
container: stdin_squish / size;
}
If you want to use a global name within a file loaded with the local-css
loader, you can use a :global
selector to do that:
div {
/* All symbols are global inside this scope (i.e.
* "pulse", "moon", and "squish" are global below) */
:global {
animation: 2s ease-in-out infinite pulse;
list-style: inside moon;
container: squish / size;
}
}
If you want to use @keyframes
, @counter-style
, or @container
with a global name, make sure it's in a file that uses the css
or global-css
loader instead of the local-css
loader. For example, you can configure --loader:.module.css=local-css
so that the local-css
loader only applies to *.module.css
files.
Support strings as keyframe animation names in CSS (#2555)
With this release, esbuild will now parse animation names that are specified as strings and will convert them to identifiers. The CSS specification allows animation names to be specified using either identifiers or strings but Chrome only understands identifiers, so esbuild will now always convert string names to identifier names for Chrome compatibility:
/* Original code */
@keyframes "hide menu" {
from { opacity: 1 }
to { opacity: 0 }
}
menu.hide {
animation: 0.5s ease-in-out "hide menu";
}
/* Old output */
@keyframes "hide menu" { from { opacity: 1 } to { opacity: 0 } }
menu.hide {
animation: 0.5s ease-in-out "hide menu";
}
/* New output */
@keyframes hide\ menu {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
menu.hide {
animation: 0.5s ease-in-out hide\ menu;
}