CSS Support

The styled-ppx CSS parser supports CSS Syntax Module Level 3 (opens in a new tab) almost completely. We ensure that most CSS supported is used day to day and available in most major browsers.

There are a few levels of support in styled-ppx:

  • Parser support: The parser understands CSS3.
  • Code generation support: Can transform the CSS into CSS bindings.
  • Interpolation support: We can interpolate values from outside of CSS creating type-safe holes.

Detailed view of the parsing support

✅: Fully supported 🟠: Partially supported 🔴: Not supported

If you want to know which properties are supported, you can check our test here: https://github.com/davesnx/styled-ppx/blob/main/packages/ppx/test/css-support (opens in a new tab).

CSS FeatureLinkSupported
Compositing and Blending Level 1https://www.w3.org/TR/compositing-1 (opens in a new tab)✅
CSS Backgrounds and Borders Module Level 3https://www.w3.org/TR/css-backgrounds-3 (opens in a new tab)🟠
CSS Box Sizing Module Level 3https://www.w3.org/TR/css-box-3 (opens in a new tab)🟠
CSS Cascading and Inheritance Level 3https://www.w3.org/TR/css-cascade-3 (opens in a new tab)✅
CSS Cascading and Inheritance Level 4https://www.w3.org/TR/css-cascade-4 (opens in a new tab)🔴
CSS Color Module Level 3https://www.w3.org/TR/css-color-3 (opens in a new tab)✅
CSS Color Module Level 4https://www.w3.org/TR/css-color-4 (opens in a new tab)🟠
CSS Color Adjustment Module Level 1https://www.w3.org/TR/css-color-adjust-1 (opens in a new tab)🔴
CSS Conditional Rules Level 3https://www.w3.org/TR/css-conditional-3 (opens in a new tab)🔴
CSS Containment Module Level 1https://www.w3.org/TR/css-contain-1 (opens in a new tab)✅
CSS Containment Module Level 2https://www.w3.org/TR/css-contain-2 (opens in a new tab)🔴
CSS Counter Styles Level 3https://www.w3.org/TR/css-counter-styles-3 (opens in a new tab)🔴
CSS Display Module Level 3https://www.w3.org/TR/css-display-3 (opens in a new tab)🟠
CSS Easing Functions Level 1https://www.w3.org/TR/css-easing-1 (opens in a new tab)✅
CSS Flexible Box Layout Module Level 1https://www.w3.org/TR/css-flexbox-1 (opens in a new tab)✅
CSS Fonts Module Level 3https://www.w3.org/TR/css-fonts-3 (opens in a new tab)🟠
CSS Fonts Module Level 4https://www.w3.org/TR/css-fonts-4 (opens in a new tab)🟠
CSS Grid Layout Module Level 1https://www.w3.org/TR/css-grid-1 (opens in a new tab)🟠
CSS Grid Layout Module Level 2https://www.w3.org/TR/css-grid-2 (opens in a new tab)🔴
CSS Images Module Level 3https://www.w3.org/TR/css-images-3 (opens in a new tab)🔴
CSS Images Module Level 4https://www.w3.org/TR/css-images-4 (opens in a new tab)🔴
CSS Lists and Counters Module Level 3https://www.w3.org/TR/css-lists-3 (opens in a new tab)🔴
CSS Logical Properties and Values Level 1https://www.w3.org/TR/css-logical-1 (opens in a new tab)🟠
CSS Multi-column Layout Module Level 1https://www.w3.org/TR/css-multicol-1 (opens in a new tab)🟠
CSS Positioned Layout Module Level 3https://www.w3.org/TR/css-position-3 (opens in a new tab)✅
CSS Box Sizing Module Level 3https://www.w3.org/TR/css-sizing-3 (opens in a new tab)✅
CSS Box Sizing Module Level 4https://www.w3.org/TR/css-sizing-4 (opens in a new tab)🟠
CSS Style Attributeshttps://www.w3.org/TR/css-style-attr (opens in a new tab)✅
CSS Transforms Module Level 1https://www.w3.org/TR/css-transforms-1 (opens in a new tab)🟠
CSS Transforms Module Level 2https://www.w3.org/TR/css-transforms-2 (opens in a new tab)✅
CSS Basic User Interface Module Level 3https://www.w3.org/TR/css-ui-3 (opens in a new tab)✅
CSS Values and Units 3https://www.w3.org/TR/css-values-3 (opens in a new tab)🟠
CSS Custom Properties for Cascading Variables Module Level 1https://www.w3.org/TR/css-variables-1 (opens in a new tab)🔴
CSS Will Change Module Level 1https://www.w3.org/TR/css-will-change-1 (opens in a new tab)✅
CSS Writing Modes Level 3https://www.w3.org/TR/css-writing-modes-3 (opens in a new tab)✅
Media Queries Level 3https://www.w3.org/TR/css3-mediaqueries (opens in a new tab)🟠
CSS Namespaces Module Level 3https://www.w3.org/TR/css-namespaces-3 (opens in a new tab)🟠
Selectors Level 3https://www.w3.org/TR/selectors-3 (opens in a new tab)✅
Selectors Level 4https://www.w3.org/TR/selectors-4 (opens in a new tab)🟠
CSS Box Alignment Module Level 3https://www.w3.org/TR/css-align-3 (opens in a new tab)✅
CSS Animations Level 1https://www.w3.org/TR/css-animations-1 (opens in a new tab)✅
CSS Fragmentation Module Level 3https://www.w3.org/TR/css-break-3 (opens in a new tab)✅
CSS Font Loading Module Level 3https://www.w3.org/TR/css-font-loading-3 (opens in a new tab)🔴
CSS Masking Module Level 1https://www.w3.org/TR/css-masking-1 (opens in a new tab)🟠
CSS Scroll Snap Module Level 1https://www.w3.org/TR/css-scroll-snap-1 (opens in a new tab)🟠
CSS Scrollbars Styling Module Level 1https://www.w3.org/TR/css-scrollbars-1 (opens in a new tab)🔴
CSS Shapes Module Level 1https://www.w3.org/TR/css-shapes-1 (opens in a new tab)🔴
CSS Speech Modulehttps://www.w3.org/TR/css-speech-1 (opens in a new tab)🔴
CSS Text Module Level 3https://www.w3.org/TR/css-text-3 (opens in a new tab)🟠
CSS Text Decoration Module Level 3https://www.w3.org/TR/css-text-decor-3 (opens in a new tab)✅
CSS Transitionshttps://www.w3.org/TR/css-transitions-1 (opens in a new tab)✅
CSS Writing Modes Level 4https://www.w3.org/TR/css-writing-modes-4 (opens in a new tab)✅
Filter Effects Module Level 1https://www.w3.org/TR/filter-effects-1 (opens in a new tab)🟠
Media Queries Level 4https://www.w3.org/TR/mediaqueries-4 (opens in a new tab)🟠
This table has been generated manually and it might be outdated.

All references are found in w3.org (opens in a new tab)

AboutFAQ