Merge branch 'main' into unsupported-values

.gitattributes

@@ -1,7 +1,15 @@
-# Tell github that .re and .rei files are Reason
+# .re and .rei files are Reason
 *.re linguist-language=Reason
 *.rei linguist-language=Reason
 
+# mli/mly files are OCaml
+*.ml*             text eol=lf linguist-language=OCaml
+
+# Ignore cram test files
+*.t               text eol=lf -linguist-detectable
+
+dune              text eol=lf
+
 # Declare shell files to have LF endings on checkout
 # On Windows, the default git setting for `core.autocrlf`
 # means that when checking out code, LF endings get converted

.github/workflows/ci.yml

@@ -9,7 +9,7 @@ on:
       - main
 
 env:
-  OPAM_VERSION: 2.2.0
+  OPAM_VERSION: 2.3.0
   DUNE_PROFILE: release
 
 permissions:
@@ -18,7 +18,7 @@ permissions:
 
 defaults:
   run:
-    shell: bash
+    shell: bash -xeuo pipefail {0}
 
 jobs:
   build:
@@ -27,38 +27,64 @@ jobs:
       matrix:
         os: [ubuntu-20.04, macos-latest] # Missing windows-latest
         ocaml-compiler:
-          - 5.1.1
+          - 5.2.0
 
     runs-on: ${{ matrix.os }}
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Use Node.js
         uses: actions/setup-node@v3
 
+
+      - name: Load opam cache
+        id: opam-cache
+        uses: actions/cache/restore@v4
+        with:
+          path: |
+            ${{ runner.tool_cache }}/opam
+            ~/.opam
+            _opam
+            .opam-path
+          key: opam-${{ matrix.os }}-${{ matrix.ocaml-compiler }}-${{ hashFiles('**.opam') }}
+
       - name: Use OCaml ${{ matrix.ocaml-compiler }}
-        uses: ocaml/setup-ocaml@v3
+        uses: ocaml/[email protected]
+        if: steps.opam-cache.outputs.cache-hit != 'true'
         with:
           ocaml-compiler: ${{ matrix.ocaml-compiler }}
-          dune-cache: true
+          dune-cache: false
           opam-disable-sandboxing: true
 
-      - name: Load opam cache when not Windows
-        if: runner.os != 'Windows'
-        id: opam-cache
-        uses: actions/cache/restore@v3
+      - name: Get OPAM executable path
+        if: steps.opam-cache.outputs.cache-hit != 'true'
+        uses: actions/github-script@v7
         with:
-          path: ~/.opam
-          key: opam-${{ matrix.os }}-${{ hashFiles('**.opam') }}
+          script: |
+            const opam_path = await io.which('opam', true);
+            console.log('opam executable found: %s', opam_path);
+            const Fs = require('fs/promises');
+            await Fs.writeFile('.opam-path', opam_path, 'utf-8');
+            console.log('stored path to .opam-path');
+
+      - name: Use cached OPAM environment
+        # if: steps.opam-cache.outputs.cache-hit == 'true'
+        shell: bash
+        run: |
+          # https://github.com/ocaml/setup-ocaml/blob/b2105f9/packages/setup-ocaml/src/installer.ts#L33
+          echo "OPAMVERBOSE=$RUNNER_DEBUG"   >> "$GITHUB_ENV"
+          echo "OPAMCOLOR=always"            >> "$GITHUB_ENV"
+          echo "OPAMCONFIRMLEVEL=unsafe-yes" >> "$GITHUB_ENV"
+          echo "OPAMERRLOGLEN=0"             >> "$GITHUB_ENV"
+          echo "OPAMPRECISETRACKING=1"       >> "$GITHUB_ENV"
+          echo "OPAMYES=1"                   >> "$GITHUB_ENV"
 
-      - name: Load opam cache when Windows
-        if: runner.os == 'Windows'
-        id: opam-cache-windows
-        uses: actions/cache/restore@v3
-        with:
-          path: _opam
-          key: opam-${{ matrix.os }}-${{ hashFiles('**.opam') }}
+          echo "OPAMROOT=$HOME/.opam"        >> "$GITHUB_ENV"
+
+          OPAM_PATH="$(cat .opam-path)"
+          chmod +x "$OPAM_PATH"
+          dirname "$OPAM_PATH" >> "$GITHUB_PATH"
 
       - name: Install dependencies
         run: make install
@@ -85,19 +111,22 @@ jobs:
           name: runtime-rescript
           path: _build/default/packages/runtime/rescript
 
-      - name: Save cache when not Windows
-        uses: actions/cache/save@v3
-        if: steps.opam-cache.outputs.cache-hit != 'true' && runner.os != 'Windows'
+      - name: Save opam cache
+        uses: actions/cache/save@v4
+        if: steps.opam-cache.outputs.cache-hit != 'true'
         with:
-          path: ~/.opam
-          key: opam-${{ matrix.os }}-${{ hashFiles('**.opam') }}
-
-      - name: Save cache when Windows
-        uses: actions/cache/save@v3
-        if: steps.opam-cache-windows.outputs.cache-hit != 'true' && runner.os == 'Windows'
+          path: |
+            ${{ runner.tool_cache }}/opam
+            ~/.opam
+            _opam
+            .opam-path
+          key: opam-${{ matrix.os }}-${{ matrix.ocaml-compiler }}-${{ hashFiles('**.opam') }}
+
+      - name: Save npm cache
+        uses: actions/cache/save@v4
         with:
-          path: _opam
-          key: opam-${{ matrix.os }}-${{ hashFiles('**.opam') }}
+          path: node_modules
+          key: npm-${{ matrix.os }}-${{ hashFiles('package.json') }}
 
       - name: Grant permission to run ppx
         run: chmod +x _build/default/packages/bin/bin.exe
@@ -112,10 +141,10 @@ jobs:
     runs-on: ubuntu-20.04
 
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
       - name: Use Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
 
       - name: Make NPM release skeleton
         run: node scripts/release-make-skeleton.js

Makefile

@@ -42,7 +42,7 @@ setup-githooks: ## Setup githooks
 
 .PHONY: create-switch
 create-switch: ## Create opam switch
-	opam switch create . 5.1.1 --deps-only --with-test --no-install
+	opam switch create . 5.2.0 --deps-only --with-test --no-install
 
 .PHONY: install
 install: ## Install project dependencies
@@ -162,3 +162,7 @@ lexer: ## Print the command to debug the lexer
 .PHONY: interpreter
 interpreter: ## Run menhir as interpret
 	$(OPAM_EXEC) menhir --interpret --interpret-show-cst packages/parser/lib/Parser.mly
+
+.PHONY: website-watch
+website-watch: ## Run the website locally
+	@cd packages/website && npm run dev

README.md

@@ -4,7 +4,7 @@
 
 ![demo](./.github/demo-dark.png#gh-dark-mode-only)![styled-ppx-demo-dark](./.github/demo-light.png#gh-light-mode-only)
 
-**styled-ppx** is a [ppx](https://tarides.com/blog/2019-05-09-an-introduction-to-ocaml-ppx-ecosystem) and a library that brings styled components to ReScript, Melange and Native. Create **React Components** or simply `class` with type-safe style definitions wiht only CSS.
+**styled-ppx** is a [ppx](https://tarides.com/blog/2019-05-09-an-introduction-to-ocaml-ppx-ecosystem) and a library that brings styled components to ReScript, Melange and Native. Create **React Components** or simply `className` with type-safe style definitions with only CSS.
 
  Built on top of [emotion](https://emotion.sh), it allows you to style apps safely, quickly, and performantly - just as you always done it.
 

dune-project

@@ -26,7 +26,7 @@
  (description
   "styled-ppx is the ppx that brings styled components to ReScript and Melange, allowing you to create React Components with type-safe style definitions using CSS.")
   (depends
-   (ocaml (>= 5.1.0))
+   (ocaml (>= 5.2.0))
    (reason (>= 3.11.0))
    (menhir (>= 20220210))
    (ppx_deriving (>= 5.0))

packages/css-property-parser/lib/Parser.re

@@ -1586,12 +1586,9 @@ and property_scroll_snap_type_x = [%value.rec
 and property_scroll_snap_type_y = [%value.rec
   "'none' | 'mandatory' | 'proximity'"
 ]
-and property_scrollbar_color = [%value.rec
-  "'auto' | 'dark' | 'light' | [ <color> ]{2}"
-]
-and property_scrollbar_width = [%value.rec
-  "'auto' | 'thin' | 'none' | <extended-length>"
-]
+and property_scrollbar_color = [%value.rec "'auto' | [ <color> <color> ]"]
+and property_scrollbar_width = [%value.rec "'auto' | 'thin' | 'none'"]
+and property_scrollbar_gutter = [%value.rec "'auto' | 'stable' && 'both-edges'?" ]
 and property_scrollbar_3dlight_color = [%value.rec "<color>"]
 and property_scrollbar_arrow_color = [%value.rec "<color>"]
 and property_scrollbar_base_color = [%value.rec "<color>"]
@@ -3266,6 +3263,7 @@ let check_map =
       ("property-scroll-snap-type-y", check(property_scroll_snap_type_y)),
       ("property-scrollbar-color", check(property_scrollbar_color)),
       ("property-scrollbar-width", check(property_scrollbar_width)),
+      ("property-scrollbar-gutter", check(property_scrollbar_gutter)),
       (
         "property-shape-image-threshold",
         check(property_shape_image_threshold),

packages/css-property-parser/ppx/Generate.re

@@ -50,20 +50,18 @@ module Make = (Builder: Ppxlib.Ast_builder.S) => {
     | "$" => "dollar"
     | _ => "unknown";
 
-  let value_name_of_css = str =>
-    String.(
-      {
-        let length = length(str);
-        let str =
-          if (is_function(str)) {
-            let str = sub(str, 0, length - 2);
-            function_value_name(str);
-          } else {
-            str;
-          };
-        kebab_case_to_snake_case(str);
-      }
-    );
+  let value_name_of_css = str => {
+    open String;
+    let length = length(str);
+    let str =
+      if (is_function(str)) {
+        let str = sub(str, 0, length - 2);
+        function_value_name(str);
+      } else {
+        str;
+      };
+    kebab_case_to_snake_case(str);
+  };
 
   // TODO: multiplier name
   let rec variant_name = value => {

packages/css-property-parser/test/snapshots/Spec.expected.re

@@ -67,9 +67,19 @@ module Types = {
     | `Rad(number)
     | `Turn(number)
   ]
-  and time = [ | `Ms(float) | `S(float)]
-  and frequency = [ | `Hz(float) | `KHz(float)]
-  and resolution = [ | `Dpi(float) | `Dpcm(float) | `Dppx(float)]
+  and time = [
+    | `Ms(float)
+    | `S(float)
+  ]
+  and frequency = [
+    | `Hz(float)
+    | `KHz(float)
+  ]
+  and resolution = [
+    | `Dpi(float)
+    | `Dpcm(float)
+    | `Dppx(float)
+  ]
   and percentage = float
   and ident = string
   and custom_ident = string