Create js/native with copy_files under styled-ppx.css/bs-css (#353)

Co-authored-by: David Sancho Moreno <david.sancho@ahrefs.com>

Author: davesnx

.github/workflows/ci.yml

@@ -30,6 +30,12 @@ jobs:
     steps:
       - uses: actions/checkout@v3
 
+      # https://github.com/mmottl/pcre-ocaml/issues/18
+      # https://github.com/actions/runner-images/issues/6634
+      - name: Install pcre (only MacOS)
+        if: matrix.os == 'macos-latest'
+        run: brew install pcre
+
       - name: Use Node.js
         uses: actions/setup-node@v3
 
@@ -54,12 +60,12 @@ jobs:
           path: _opam
           key: opam-${{ matrix.os }}-${{ hashFiles('**.opam') }}
 
-      - name: Install pins
-        run: make pin
-
       - name: Install dependencies
         run: make install
 
+      - name: Install pins
+        run: make pin
+
       - name: Build
         run: make build
 
@@ -99,6 +105,20 @@ jobs:
           name: ${{ matrix.os }}
           path: _build/default/bin/bin.exe
 
+      - name: Upload runtime artifacts for @davesnx/styled-ppx/runtime/css
+        if: matrix.os == 'ubuntu-20.04'
+        uses: actions/upload-artifact@v3
+        with:
+          name: runtime-css
+          path: _build/default/packages/css/rescript
+
+      - name: Upload runtime artifacts for @davesnx/styled-ppx/runtime/emotion
+        if: matrix.os == 'ubuntu-20.04'
+        uses: actions/upload-artifact@v3
+        with:
+          name: runtime-emotion
+          path: _build/default/packages/emotion/rescript
+
       - name: Save cache when not Windows
         uses: actions/cache/save@v3
         if: steps.opam-cache.outputs.cache-hit != 'true' && runner.os != 'Windows'
@@ -113,26 +133,6 @@ jobs:
           path: _opam
           key: opam-${{ matrix.os }}-${{ hashFiles('**.opam') }}
 
-  e2e:
-    name: Browser tests
-    runs-on: ${{ matrix.os }}
-    needs: build
-    strategy:
-      matrix:
-        os: [ubuntu-20.04, macos-latest]
-
-    steps:
-      - uses: actions/checkout@v3
-
-      - name: Use Node.js
-        uses: actions/setup-node@v3
-
-      - name: Download artifacts
-        uses: actions/download-artifact@v3
-        with:
-          name: ${{ matrix.os }}
-          path: _build/default/bin
-
       - name: Grant permission to run ppx
         run: chmod +x _build/default/bin/bin.exe
 
@@ -185,20 +185,33 @@ jobs:
       #     name: windows-latest
       #     path: _release/platform-windows-x64
 
-      - name: Release nightly NPM package
+      - name: Download runtime-css artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: runtime-css
+          path: _release/css
+
+      - name: Download runtime-emotion artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: runtime-emotion
+          path: _release/emotion
+
+      - name: Release nightly (@davesnx/styled-ppx) package
         if: ${{ success() && github.event_name == 'pull_request' && github.event.pull_request.user.login == 'davesnx' }}
         id: nightly
         working-directory: ./_release
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}
         run: |
+          ls -lhsa
           npm config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN
           npm config set scope "@davesnx"
           npm version prerelease --preid ${{ steps.sha.outputs.sha_short }} -no-git-tag-version
           npm publish --access public --tag nightly
           echo "version=$(npm view @davesnx/styled-ppx@nightly version)" >> $GITHUB_OUTPUT
 
-      - name: Release NPM package
+      - name: Release (@davesnx/styled-ppx) package
         if: ${{ success() && github.event_name != 'pull_request' }}
         working-directory: ./_release
         env:

.ocamlformat

@@ -1,4 +1,4 @@
-version=0.24.1
+version=0.26.0
 quiet=true
 profile=default
 ocaml-version=4.14.0

Makefile

@@ -35,24 +35,23 @@ format-check: ## Checks if format is correct
 fmt format: ## Formats code
 	$(DUNE) build @fmt --auto-promote
 
-.PHONY: init
+.PHONY: setup-githooks
 setup-githooks: ## Setup githooks
 	@git config core.hooksPath .githooks
 
 .PHONY: pin
 pin: ## Pin dependencies
-# @opam pin add dune.dev "https://github.com/ocaml/dune.git#7fdf0ca379f773deb21f97c7a66c1b9b0bbd4f98" -y
+	@opam pin add melange.dev "https://github.com/melange-re/melange.git#d4868a5300c8c6e9f1b387aedb85ded4a705bc0a" -y
 	@opam pin add reason.dev "https://github.com/reasonml/reason.git#b283f335f90e3aaa398bff8e82761038ee42a99d" -y
 	@opam pin add ppxlib.dev "https://github.com/ocaml-ppx/ppxlib.git#8b8987c5690ad839348d96bf52471b03b88f06ed" -y
-# @opam pin add melange.dev "https://github.com/melange-re/melange.git#da421be55e755096403425ed3c260486deab61f3" -y
-# @opam pin add rescript-syntax.dev "https://github.com/melange-re/melange.git#2ee0ef23bbc44933f92cd9c4b223e9ef915ff0df" -y
+	@opam pin add server-reason-react.dev "https://github.com/ml-in-barcelona/server-reason-react.git#f46fa4bd9a5490bd3a6d64e1e77dab66028a6a2f" -y
 
 .PHONY: create-switch
 create-switch: ## Create opam switch
-	@opam switch create . 4.14.0 --deps-only --with-test
+	@opam switch create . 4.14.1 --deps-only --with-test --no-install
 
 .PHONY: install
-install: ## Update the package dependencies when new deps are added to dune-project
+install: ## Install project dependencies
 	@opam install . --deps-only --with-test
 	@yarn install
 
@@ -121,8 +120,12 @@ test_e2e: ## Run End-to-end tests for JSX3
 test_string_interpolation: ## Run string_interpolation tests
 	$(DUNE) build @string_interpolation_test
 
+.PHONY: test_emotion
+test_emotion: ## Run emotion tests
+	$(DUNE) build @emotion_test
+
 .PHONY: test_all
-test_all: build test_typecheck test_css_support test_ppx_snapshot test_parser test_css_lexer test_reason_css_parser test_css_spec_parser test_css_spec_types test_string_interpolation test_e2e
+test_all: build test_typecheck test_css_support test_ppx_snapshot test_parser test_css_lexer test_reason_css_parser test_css_spec_parser test_css_spec_types test_string_interpolation test_emotion test_e2e
 
 # Debug commands
 

README.md

@@ -20,8 +20,8 @@ Add `"@davesnx/styled-ppx/ppx"` under bsconfig `"ppx-flags"`:
 {
   "bs-dependencies": [
     "@rescript/react",
-    "bs-css",
-    "bs-css-emotion"
++   "@davesnx/styled-ppx/css",
++   "@davesnx/styled-ppx/emotion"
   ],
 + "ppx-flags": ["@davesnx/styled-ppx/ppx"]
 }

bin/dune

@@ -1,4 +1,4 @@
 (executable
  (name bin)
  (public_name styled-ppx)
- (libraries styled-ppx.lib))
+ (libraries styled-ppx.lib ppxlib))

dune

@@ -1,11 +1,15 @@
-(dirs bin packages)
+(dirs bin packages e2e)
+
+(subdir
+ e2e
+ (dirs melange-v1))
 
 (subdir
  packages
  (dirs
-  bs-css
-  bs-css-emotion
   css
+  emotion
+  emotion-hash
   css-spec-parser
   parser
   ppx

dune-project

@@ -8,6 +8,8 @@
 
 (generate_opam_files true)
 
+(implicit_transitive_deps false)
+
 (source (github davesnx/styled-ppx))
 (homepage "https://styled-ppx.vercel.app")
 (documentation "https://styled-ppx.vercel.app")
@@ -25,8 +27,8 @@
  (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 (>= 4.14.1))
-   (menhir (= 20220210))
+   (ocaml (and (>= 4.14.0) (< 5.0.0)))
+   (menhir (>= 20220210))
    (ppx_deriving (>= 5.0))
    (ppx_deriving_yojson (>= 3.7.0))
    (ppxlib (>= 0.27.0))

e2e/melange-v1/dune

@@ -0,0 +1,6 @@
+(melange.emit
+ (alias e2e-melange)
+ (target e2e-melange)
+ (libraries ui)
+ (module_systems
+  (commonjs bs.js)))

e2e/melange-v1/index.re

@@ -0,0 +1,3 @@
+let _ = Ui.stackGap(`px(10));
+
+Js.log(Ui.selectors);