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.

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

Support more @ rules #29

Open
5 tasks
WorldSEnder opened this issue Aug 26, 2021 · 4 comments
Open
5 tasks

Support more @ rules #29

WorldSEnder opened this issue Aug 26, 2021 · 4 comments
Labels
enhancement New feature or request

Comments

@WorldSEnder
Copy link
Collaborator

Supporting more at rules mainly divides into two (new) categories:

Global at rules that introduce a new name:

  • @keyframes: @keyframes <identifier> should work similar to the way a new class name is generated, but generate the name used to refer to the animation.
  • @counter-style: @counter-style <identifier> similar as above, but generate the name referring to the counter.

At rules that are always global and not associated to a name, offering conditional styling:

  • @font-face: Mount font styles. Pretty self explanatory.
  • @page: Not supported in all browsers, but sometimes useful - I used it once in the past for a report sheet that could be printed. Can only modify a subset of css attributes of the document.
  • @font-feature-values: Pretty fringe feature. I've never seen it used, but def belongs to this category.

The parser and the ast should be mainly reusable, but emitting the style probably needs to be changed to allow for replacing fragments in at rules. Out of the above keyframes and font-face would be my two priorities.

@futursolo futursolo added the enhancement New feature or request label Aug 26, 2021
@simbleau
Copy link
Contributor

simbleau commented Aug 5, 2022

Add @-webkit-keyframes to the mix.

@futursolo
Copy link
Owner

image

image

I am not sure why we need to support this since all browser versions that support WebAssembly support @keyframes without vendor prefixing.

@simbleau
Copy link
Contributor

simbleau commented Aug 6, 2022

You're right - I learned this yesterday and forgot to remove my comment here. +1

@phatgolo
Copy link
Contributor

phatgolo commented Oct 6, 2022

Don't forget:

  • @container should work exactly like @media works today. I've added a PR for it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants