The styled-ppx CSS parser supports CSS Syntax Module Level 3 almost completely. Coverage is guided by what developers use day-to-day and what is available in all major browsers.Documentation Index
Fetch the complete documentation index at: https://mintlify.com/davesnx/styled-ppx/llms.txt
Use this file to discover all available pages before exploring further.
Levels of support
There are three distinct tiers of support in styled-ppx:- Parser support — the parser understands and accepts the CSS syntax defined by the specification.
- Code generation support — styled-ppx can transform the parsed CSS into the corresponding CSS bindings for your target platform.
- Interpolation support — type-safe holes allow values from your ReScript/OCaml code to be interpolated into CSS in a fully type-checked way.
Legend
| Symbol | Meaning |
|---|---|
| ✅ | Fully supported |
| 🟠 | Partially supported |
| 🔴 | Not supported |
This table was generated manually and may be outdated. For the most current data, refer to the test suite in the repository.
W3C module coverage
| CSS Feature | Link | Supported |
|---|---|---|
| Compositing and Blending Level 1 | compositing-1 | ✅ |
| CSS Backgrounds and Borders Module Level 3 | css-backgrounds-3 | 🟠 |
| CSS Box Sizing Module Level 3 | css-box-3 | 🟠 |
| CSS Cascading and Inheritance Level 3 | css-cascade-3 | ✅ |
| CSS Cascading and Inheritance Level 4 | css-cascade-4 | 🔴 |
| CSS Color Module Level 3 | css-color-3 | ✅ |
| CSS Color Module Level 4 | css-color-4 | 🟠 |
| CSS Color Adjustment Module Level 1 | css-color-adjust-1 | 🔴 |
| CSS Conditional Rules Level 3 | css-conditional-3 | 🔴 |
| CSS Containment Module Level 1 | css-contain-1 | ✅ |
| CSS Containment Module Level 2 | css-contain-2 | 🔴 |
| CSS Counter Styles Level 3 | css-counter-styles-3 | 🔴 |
| CSS Display Module Level 3 | css-display-3 | 🟠 |
| CSS Easing Functions Level 1 | css-easing-1 | ✅ |
| CSS Flexible Box Layout Module Level 1 | css-flexbox-1 | ✅ |
| CSS Fonts Module Level 3 | css-fonts-3 | 🟠 |
| CSS Fonts Module Level 4 | css-fonts-4 | 🟠 |
| CSS Grid Layout Module Level 1 | css-grid-1 | 🟠 |
| CSS Grid Layout Module Level 2 | css-grid-2 | 🔴 |
| CSS Images Module Level 3 | css-images-3 | 🔴 |
| CSS Images Module Level 4 | css-images-4 | 🔴 |
| CSS Lists and Counters Module Level 3 | css-lists-3 | 🔴 |
| CSS Logical Properties and Values Level 1 | css-logical-1 | 🟠 |
| CSS Multi-column Layout Module Level 1 | css-multicol-1 | 🟠 |
| CSS Positioned Layout Module Level 3 | css-position-3 | ✅ |
| CSS Box Sizing Module Level 3 | css-sizing-3 | ✅ |
| CSS Box Sizing Module Level 4 | css-sizing-4 | 🟠 |
| CSS Style Attributes | css-style-attr | ✅ |
| CSS Transforms Module Level 1 | css-transforms-1 | 🟠 |
| CSS Transforms Module Level 2 | css-transforms-2 | ✅ |
| CSS Basic User Interface Module Level 3 | css-ui-3 | ✅ |
| CSS Values and Units 3 | css-values-3 | 🟠 |
| CSS Custom Properties for Cascading Variables Module Level 1 | css-variables-1 | 🔴 |
| CSS Will Change Module Level 1 | css-will-change-1 | ✅ |
| CSS Writing Modes Level 3 | css-writing-modes-3 | ✅ |
| Media Queries Level 3 | css3-mediaqueries | 🟠 |
| CSS Namespaces Module Level 3 | css-namespaces-3 | 🟠 |
| Selectors Level 3 | selectors-3 | ✅ |
| Selectors Level 4 | selectors-4 | 🟠 |
| CSS Box Alignment Module Level 3 | css-align-3 | ✅ |
| CSS Animations Level 1 | css-animations-1 | ✅ |
| CSS Fragmentation Module Level 3 | css-break-3 | ✅ |
| CSS Font Loading Module Level 3 | css-font-loading-3 | 🔴 |
| CSS Masking Module Level 1 | css-masking-1 | 🟠 |
| CSS Scroll Snap Module Level 1 | css-scroll-snap-1 | 🟠 |
| CSS Scrollbars Styling Module Level 1 | css-scrollbars-1 | 🔴 |
| CSS Shapes Module Level 1 | css-shapes-1 | 🔴 |
| CSS Speech Module | css-speech-1 | 🔴 |
| CSS Text Module Level 3 | css-text-3 | 🟠 |
| CSS Text Decoration Module Level 3 | css-text-decor-3 | ✅ |
| CSS Transitions | css-transitions-1 | ✅ |
| CSS Writing Modes Level 4 | css-writing-modes-4 | ✅ |
| Filter Effects Module Level 1 | filter-effects-1 | 🟠 |
| Media Queries Level 4 | mediaqueries-4 | 🟠 |
CSS baseline versions
The following foundational CSS specifications are fully supported:- CSS 1.0 — Cascading Style Sheets Level 1 ✅
- CSS 2.1 — Cascading Style Sheets Level 2 Revision 1 Specification ✅
- CSS 2.2 — Cascading Style Sheets Level 2 Revision 2 Specification ✅
- CSS 3.0 — CSS Syntax Module Level 3 ✅