styled-ppx icon indicating copy to clipboard operation
styled-ppx copied to clipboard

Published 20 hours ago • verified publisher icon davesnx

Umbrella issue for the CSS Support matrix

Open davesnx opened this issue 11 months ago • 3 comments

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:

  • [ ] https://github.com/davesnx/styled-ppx/issues/413
  • [ ] https://github.com/davesnx/styled-ppx/issues/417
  • [ ] https://github.com/davesnx/styled-ppx/issues/418
  • [ ] CSS Color Module Level 5
  • [ ] width: attr(data-px)
  • [ ] Environment Variables Level 1
  • [x] CSS Grid Layout Module Level 3
  • [ ] clip-path: circle()
  • [x] mask-position: bottom 10px right
  • [ ] mask-border: url(image.png) 10px
  • [x] @container https://github.com/davesnx/styled-ppx/issues/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.

  • [ ] https://github.com/davesnx/styled-ppx/issues/443

This task (https://github.com/davesnx/styled-ppx/issues/426) would automatically remove all the effort of going one by one manually

  • [ ] Parser.property_image_resolution
  • [x] Parser.property_image_orientation
  • [x] Parser.property_image_rendering
  • [x] Parser.property_border_image_source
  • [x] Parser.property_border_image_slice
  • [x] Parser.property_border_image_width
  • [x] Parser.property_border_image_outset
  • [x] Parser.property_border_image_repeat
  • [x] Parser.property_border_image
  • [x] Parser.property_overflow_clip_margin
  • [x] Parser.property_overflow_inline
  • [x] Parser.property_block_ellipsis
  • [x] Parser.property_max_lines
  • [x] Parser.property_continue
  • [x] Parser.property_tab_size
  • [x] Parser.property_line_break
  • [x] Parser.property_hyphens
  • [x] Parser.property_text_align_all
  • [x] Parser.property_text_align_last
  • [x] Parser.property_text_justify
  • [ ] Parser.property_hanging_punctuation
  • [x] Parser.property_font_stretch
  • [x] Parser.property_font_size_adjust
  • [ ] Parser.property_font
  • [x] Parser.property_font_synthesis_weight
  • [x] Parser.property_font_synthesis_style
  • [x] Parser.property_font_synthesis_small_caps
  • [x] Parser.property_font_synthesis
  • [x] 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
  • [x] 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
  • [x] Parser.property_text_decoration_skip_box
  • [x] Parser.property_text_decoration_skip_inset
  • [ ] Parser.property_text_decoration_skip_spaces
  • [x] Parser.property_text_decoration_skip_ink
  • [x] Parser.property_text_emphasis_style
  • [x] Parser.property_text_emphasis_color
  • [x] Parser.property_text_emphasis
  • [x] Parser.property_text_emphasis_position
  • [ ] Parser.property_text_emphasis_skip
  • [x] Parser.property_transform_box
  • [x] Parser.property_perspective
  • [x] 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:

  • [x] Parser.property_translate
  • [x] Parser.property_rotate
  • [x] Parser.property_scale
  • [x] Parser.property_transition
  • [x] Parser.property_grid_template_columns
  • [x] Parser.property_grid_template_rows
  • [x] Parser.property_grid_template_areas
  • [x] Parser.property_grid_auto_columns
  • [x] Parser.property_grid_auto_rows
  • [x] Parser.property_grid_auto_flow
  • [x] Parser.property_grid
  • [x] Parser.property_grid_row_start
  • [x] Parser.property_grid_column_start
  • [x] Parser.property_grid_row_end
  • [x] Parser.property_grid_column_end
  • [x] Parser.property_grid_row
  • [x] Parser.property_grid_column
  • [x] 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 (https://github.com/davesnx/styled-ppx/pull/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
  • 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/

davesnx avatar Mar 07 '24 09:03 davesnx

Will give this a go

yokurang avatar Mar 07 '24 10:03 yokurang

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 avatar Mar 07 '24 10:03 davesnx

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

davesnx avatar Mar 07 '24 11:03 davesnx