-
-
Notifications
You must be signed in to change notification settings - Fork 32
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
Umbrella issue for the CSS Support matrix #427
Labels
Comments
davesnx
added
good first issue
Good for newcomers
parser
Parsing or lexing issues
code-generation
labels
Mar 7, 2024
Will give this a go |
It's a huge task, so picking one of the unsupported properties is a great start @yokurang or if you prefer improving the parsing is always nice |
Feel free to ask me anything in Discord @yokurang: https://discordapp.com/users/122441959414431745 |
zakybilfagih
changed the title
Umbrella issue for the CSS Support matix
Umbrella issue for the CSS Support matrix
Aug 11, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Labels
This is the overview of styled-ppx CSS support (as a detailed view of https://styled-ppx.vercel.app/css-support). Currently CSS 3 is almost there, but CSS lately has been adding a bunch of features that we don't support yet, but are simple to add.
Missing properties or values under Parser.re
Our CSS parser fails at parsing this:
width: attr(data-px)
clip-path: circle()
mask-position: bottom 10px right
mask-border: url(image.png) 10px
@container
Support @container #422@layer
Unsupported properties (code-gen)
Parsing works fine, but code-gen for those properties always generates
Css.unsafe("property", "value")
. So, interpolation doesn't work in those cases and there's risks of introducing errors at runtime while using those properties.bs-css doesn't support
cases from declarations_to_emotion.re #443This task (#426) would automatically remove all the effort of going one by one manually
Unsupported values (code-gen)
Some properties don't support a few values and generate the same Css.unsafe code, making it hard for interpolation to work:
Missing interpolation
Interpolation would need to be added extensively for all properties that are missing interpolation, it can be a big deal. Currently is configured in most values, so all interpolation should work.
There are rare cases that aren’t implemented, such as recently
cursor
where the value is very unique to cursor. We should detect this list and add and add a declarations_to_emotion.re function to generate it properly.content
rule #452)The goal of this task is:
https://github.com/web-platform-tests/wpt/tree/master/css
https://github.com/janestreet/ppx_css/blob/master/css_jane/src/css_jane.ml
https://github.com/returntocorp/pfff/tree/develop/lang_css
https://github.com/parcel-bundler/parcel-css/tree/master/src
https://github.com/samouri/ocaml-css
https://github.com/reworkcss/css
https://github.com/mdn/data/tree/master/css
https://docs.rs/cssparser/0.28.1/cssparser
https://github.com/servo/rust-cssparser
https://github.com/css-modules/icss
https://github.com/SimonSapin/css-parsing-tests
https://csstree.github.io/docs/syntax
https://github.com/csstree/csstree
https://github.com/css/csso
https://github.com/postcss/benchmark#parsers
https://www.npmjs.com/package/cssom
https://www.npmjs.com/package/cssstyle
https://github.com/justjavac/postcss-rs
https://moderncss.dev/practical-uses-of-css-math-functions-calc-clamp-min-max/
The text was updated successfully, but these errors were encountered: