Umbrella issue for the CSS Support matrix

[davesnx]

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:

• Support for all CSS functions #413
• Support CSS variables #417
• Support SVG properties (parsing but also interpolation) #418
• CSS Color Module Level 5
• width: attr(data-px)
• Environment Variables Level 1
• CSS Grid Layout Module Level 3
• 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.

• Remove all bs-css doesn't support cases from declarations_to_emotion.re #443

This task (#426) would automatically remove all the effort of going one by one manually

• Parser.property_image_resolution
• Parser.property_image_orientation
• Parser.property_image_rendering
• Parser.property_border_image_source
• Parser.property_border_image_slice
• Parser.property_border_image_width
• Parser.property_border_image_outset
• Parser.property_border_image_repeat
• Parser.property_border_image
• Parser.property_overflow_clip_margin
• Parser.property_overflow_inline
• Parser.property_block_ellipsis
• Parser.property_max_lines
• Parser.property_continue
• Parser.property_tab_size
• Parser.property_line_break
• Parser.property_hyphens
• Parser.property_text_align_all
• Parser.property_text_align_last
• Parser.property_text_justify
• Parser.property_hanging_punctuation
• Parser.property_font_stretch
• Parser.property_font_size_adjust
• Parser.property_font
• Parser.property_font_synthesis_weight
• Parser.property_font_synthesis_style
• Parser.property_font_synthesis_small_caps
• Parser.property_font_synthesis
• Parser.property_font_kerning
• Parser.property_font_variant_ligatures
• Parser.property_font_variant_position
• Parser.property_font_variant_caps
• Parser.property_font_variant_numeric
• Parser.property_font_variant_alternates
• Parser.property_font_variant_east_asian
• Parser.property_font_feature_settings
• Parser.property_font_optical_sizing
• Parser.property_font_variation_settings
• Parser.property_font_palette
• Parser.property_font_variant_emoji
• Parser.property_text_decoration_thickness
• Parser.property_text_underline_position
• Parser.property_text_underline_offset
• Parser.property_text_decoration_skip
• Parser.property_text_decoration_skip_self
• Parser.property_text_decoration_skip_box
• Parser.property_text_decoration_skip_inset
• Parser.property_text_decoration_skip_spaces
• Parser.property_text_decoration_skip_ink
• Parser.property_text_emphasis_style
• Parser.property_text_emphasis_color
• Parser.property_text_emphasis
• Parser.property_text_emphasis_position
• Parser.property_text_emphasis_skip
• Parser.property_transform_box
• Parser.property_perspective
• Parser.property_grid_template

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:

• Parser.property_translate
• Parser.property_rotate
• Parser.property_scale
• Parser.property_transition
• Parser.property_grid_template_columns
• Parser.property_grid_template_rows
• Parser.property_grid_template_areas
• Parser.property_grid_auto_columns
• Parser.property_grid_auto_rows
• Parser.property_grid_auto_flow
• Parser.property_grid
• Parser.property_grid_row_start
• Parser.property_grid_column_start
• Parser.property_grid_row_end
• Parser.property_grid_column_end
• Parser.property_grid_row
• Parser.property_grid_column
• Parser.property_grid_area

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.

• Parser.property_content (Support content rule #452)

---

The goal of this task is:

• Support the entire CSS spec on the parser and code-generation
  • To have no commented properties under https://github.com/davesnx/styled-ppx/blob/main/packages/ppx/test/css-support/css-support.re and have the minimum CssJs.unsafe on the output https://github.com/davesnx/styled-ppx/blob/main/packages/ppx/test/css-support/css-support.expected.re
• Make sure it parses correctly:
  • https://github.com/nathansmith/960-grid-system
  • https://github.com/animate-css/animate.css
  • https://github.com/joshuaclayton/blueprint-css
  • https://github.com/twbs/bootstrap
  • https://github.com/FortAwesome/Font-Awesome
  • https://github.com/foundation/foundation-sites/tree/develop/scss
  • https://github.com/inuitcss/inuitcss
  • https://github.com/Chalarangelo/mini.css/
• Keep track of the changes of the CSS Spec (and what browsers implement to sync)
  • Have a better code-organitzation of what we support and report to the user accordingly. Maybe parse the entire CSS Spec but warm about the unsafety?
• Create a solid test suite based on these resources:

  • 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/

[yokurang]

Will give this a go

[davesnx]

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

[davesnx]

Feel free to ask me anything in Discord @yokurang: https://discordapp.com/users/122441959414431745