rescript-polished 2.0.0 → 2.1.0

package/.github/workflows/release.yml

@@ -1,31 +1,34 @@
-name: Release
-
+name: Release and Publish
 on:
   push:
-    branches: [main]
-  pull_request:
-    branches: [main]
-
+    branches:
+      - main
+permissions:
+  contents: write
+  issues: write
+  pull-requests: write
+  id-token: write  # Required for npm provenance
 jobs:
-  build:
-    runs-on: macos-latest
+  release:
+    name: Release
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
-      - name: Setup node
-        uses: actions/setup-node@v1
+        uses: actions/checkout@v4
         with:
-          node-version: "14.x"
+          fetch-depth: 0
+          persist-credentials: false
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 'lts/*'
       - name: Install dependencies
-        run: yarn --frozen-lockfile --ignore-engines
-      - name: Compile ReScript files
-        run: yarn res:build
+        run: npm ci
+      - name: Build
+        run: npm run res:build
       - name: Run tests
-        run: yarn test:ci
-      - name: Report to codecov
-        uses: codecov/codecov-action@v1
+        run: npm run test:ci
       - name: Release
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
-        run: yarn global add semantic-release && semantic-release
+        run: npx semantic-release

package/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npx --no -- commitlint --edit $1

package/.husky/pre-commit

@@ -0,0 +1 @@
+npm test

package/.releaserc.json

@@ -0,0 +1,79 @@
+{
+  "branches": ["main"],
+  "plugins": [
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        "preset": "conventionalcommits",
+        "releaseRules": [
+          { "type": "feat", "release": "minor" },
+          { "type": "fix", "release": "patch" },
+          { "type": "perf", "release": "patch" },
+          { "type": "revert", "release": "patch" },
+          { "type": "docs", "release": false },
+          { "type": "style", "release": false },
+          { "type": "refactor", "release": "patch" },
+          { "type": "test", "release": false },
+          { "type": "build", "release": false },
+          { "type": "ci", "release": false },
+          { "type": "chore", "release": false },
+          { "breaking": true, "release": "major" }
+        ]
+      }
+    ],
+    [
+      "@semantic-release/release-notes-generator",
+      {
+        "preset": "conventionalcommits",
+        "presetConfig": {
+          "types": [
+            { "type": "feat", "section": "Features" },
+            { "type": "fix", "section": "Bug Fixes" },
+            { "type": "perf", "section": "Performance Improvements" },
+            { "type": "revert", "section": "Reverts" },
+            { "type": "docs", "section": "Documentation" },
+            { "type": "style", "section": "Styles" },
+            { "type": "refactor", "section": "Code Refactoring" },
+            { "type": "test", "section": "Tests" },
+            { "type": "build", "section": "Build System" },
+            { "type": "ci", "section": "Continuous Integration" }
+          ]
+        }
+      }
+    ],
+    [
+      "@semantic-release/changelog",
+      {
+        "changelogFile": "CHANGELOG.md",
+        "changelogTitle": "# Changelog\n\nAll notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines."
+      }
+    ],
+    [
+      "@semantic-release/npm",
+      {
+        "npmPublish": true,
+        "pkgRoot": ".",
+        "tarballDir": "dist",
+        "provenance": true
+      }
+    ],
+    [
+      "@semantic-release/github",
+      {
+        "assets": [
+          {
+            "path": "CHANGELOG.md",
+            "label": "Changelog"
+          }
+        ]
+      }
+    ],
+    [
+      "@semantic-release/git",
+      {
+        "assets": ["CHANGELOG.md", "package.json", "package-lock.json"],
+        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ]
+  ]
+}

package/__tests__/PolishedCssTest.res

@@ -1,83 +1,72 @@
-open Jest
-open Expect
 open PolishedCss
+open TestFramework
 
-let toEqual = (x, y) => x |> toEqual(y)
-
-describe("Color", () => {
+let colorTests = () => {
   open Color
 
-  test("shade with hex", () => {
-    #hex("ff0000")->shade(~amount=0.25)->expect->toEqual(#hex("bf0000"))
-  })
-
-  test("shade with rgb", () => {
-    Css_AtomicTypes.Color.rgb(255, 0, 0)->shade(~amount=0.25)->expect->toEqual(#hex("bf0000"))
-  })
-
-  test("shade with rgba", () => {
-    Css_AtomicTypes.Color.rgba(255, 0, 0, #num(0.25))
-    ->shade(~amount=0.25)
-    ->expect
-    ->toEqual(Css_AtomicTypes.Color.rgba(76, 0, 0, #num(0.4375)))
-  })
-
-  test("tint with hex", () => {
-    #hex("ff0000")->tint(~amount=0.25)->expect->toEqual(#hex("ff3f3f"))
-  })
-
-  test("tint with rgb", () => {
-    Css_AtomicTypes.Color.rgb(255, 0, 0)->tint(~amount=0.25)->expect->toEqual(#hex("ff3f3f"))
-  })
-
-  test("darken with hex", () => {
-    #hex("ff0000")->darken(~amount=0.25)->expect->toEqual(#hex("800000"))
-  })
-
-  test("lighten with hex", () => {
-    #hex("ff0000")->lighten(~amount=0.25)->expect->toEqual(#hex("ff8080"))
-  })
-
-  test("transparentize with hex", () => {
-    #hex("ff0000")
-    ->transparentize(~amount=0.5)
-    ->expect
-    ->toEqual(Utils.Rgba.fromString("rgba(255, 0, 0, 0.5)"))
-  })
-
-  test("getContrast with hex", () => {
-    #hex("ff0000")->getContrast(#hex("0000ff"))->expect->toEqual(2.16)
-  })
-
-  test("getLuminance with hex", () => {
-    #hex("ff0000")->getLuminance->expect->toEqual(0.213)
-  })
-
-  test("grayscale with hex", () => {
-    #hex("ff0000")->grayscale->expect->toEqual(#hex("808080"))
-  })
-
-  test("desaturate with hex", () => {
-    #hex("ff0000")->desaturate(~amount=0.3)->expect->toEqual(#hex("d92626"))
-  })
-
-  test("complement with hex", () => {
-    #hex("ff0000")->complement->expect->toEqual(#hex("0ff"))
-  })
-
-  test("adjustHue with hex", () => {
-    #hex("ff0000")->adjustHue(~degree=0.3)->expect->toEqual(#hex("ff0100"))
-  })
-
-  describe("Utils", () => {
-    open Color.Utils
-
+  [
+    test("shade with hex", () => {
+      assertEqual(#hex("ff0000")->shade(~amount=0.25), #hex("bf0000"))
+    }),
+    test("shade with rgb", () => {
+      assertEqual(Css_Js_Core.Types.Color.rgb(255, 0, 0)->shade(~amount=0.25), #hex("bf0000"))
+    }),
+    test("shade with rgba", () => {
+      assertEqual(
+        Css_Js_Core.Types.Color.rgba(255, 0, 0, #num(0.25))->shade(~amount=0.25),
+        Css_Js_Core.Types.Color.rgba(76, 0, 0, #num(0.4375)),
+      )
+    }),
+    test("tint with hex", () => {
+      assertEqual(#hex("ff0000")->tint(~amount=0.25), #hex("ff3f3f"))
+    }),
+    test("tint with rgb", () => {
+      assertEqual(Css_Js_Core.Types.Color.rgb(255, 0, 0)->tint(~amount=0.25), #hex("ff3f3f"))
+    }),
+    test("darken with hex", () => {
+      assertEqual(#hex("ff0000")->darken(~amount=0.25), #hex("800000"))
+    }),
+    test("lighten with hex", () => {
+      assertEqual(#hex("ff0000")->lighten(~amount=0.25), #hex("ff8080"))
+    }),
+    test("transparentize with hex", () => {
+      assertEqual(
+        #hex("ff0000")->transparentize(~amount=0.5),
+        Utils.Rgba.fromString("rgba(255, 0, 0, 0.5)"),
+      )
+    }),
+    test("getContrast with hex", () => {
+      assertEqual(#hex("ff0000")->getContrast(#hex("0000ff")), 2.16)
+    }),
+    test("getLuminance with hex", () => {
+      assertEqual(#hex("ff0000")->getLuminance, 0.213)
+    }),
+    test("grayscale with hex", () => {
+      assertEqual(#hex("ff0000")->grayscale, #hex("808080"))
+    }),
+    test("desaturate with hex", () => {
+      assertEqual(#hex("ff0000")->desaturate(~amount=0.3), #hex("d92626"))
+    }),
+    test("complement with hex", () => {
+      assertEqual(#hex("ff0000")->complement, #hex("0ff"))
+    }),
+    test("adjustHue with hex", () => {
+      assertEqual(#hex("ff0000")->adjustHue(~degree=0.3), #hex("ff0100"))
+    }),
+  ]
+}
+
+let utilsTests = () => {
+  open Color.Utils
+
+  [
     test("fromString with hex", () => {
-      "#ff0000"->fromString->expect->toEqual(#hex("ff0000"))
-    })
-
+      assertEqual("#ff0000"->fromString, #hex("ff0000"))
+    }),
     test("fromString with rgba", () => {
-      "rgba(255, 0, 0, 0.5)"->fromString->expect->toEqual(#rgba(255, 0, 0, #num(0.5)))
-    })
-  })
-})
+      assertEqual("rgba(255, 0, 0, 0.5)"->fromString, #rgba(255, 0, 0, #num(0.5)))
+    }),
+  ]
+}
+
+let suites = [suite("Color", colorTests()), suite("Color.Utils", utilsTests())]

package/__tests__/PolishedTest.res

@@ -1,245 +1,239 @@
-open Jest
-open Expect
+open TestFramework
 open Polished
 
-let keepGoing = _ => ()
-
-describe("Color", () => {
+let colorTests = () => {
   open Color
 
-  test("shade", () => {
-    "#ed5051"->shade(~amount=0.25)->expect |> toBe("#b13c3c")
-  })
-
-  test("tint", () => {
-    "#ed5051"->tint(~amount=0.25)->expect |> toBe("#f17b7c")
-  })
-
-  test("lighten", () => {
-    "#ed5051"->lighten(~amount=0.25)->expect |> toBe("#f9c4c4")
-  })
-
-  test("darken", () => {
-    "#ed5051"->darken(~amount=0.25)->expect |> toBe("#ac1213")
-  })
-
-  test("hsl", () => {
-    hsl(~hue=30., ~saturation=0.5, ~lightness=0.3)->expect |> toBe("#734d26")
-  })
-
-  test("adjustHue", () => {
-    "#ed5051"->adjustHue(~degree=30.5)->expect |> toBe("#ed9f50")
-  })
-
-  test("complement", () => {
-    "#ed5051"->complement->expect |> toBe("#50edec")
-  })
-
-  test("desaturate", () => {
-    "#ed5051"->desaturate(~amount=25.5)->expect |> toBe("#9f9f9f")
-  })
-
-  test("getContrast", () => {
-    "#ed5051"->getContrast("#fff")->expect |> toBe(3.58)
-  })
-
-  test("getLuminance", () => {
-    "#ed5051"->getLuminance->expect |> toBe(0.243)
-  })
-
-  test("grayscale", () => {
-    "#ed5051"->grayscale->expect |> toBe("#9f9f9f")
-  })
-
-  test("hsla", () => {
-    hsla(~hue=130., ~saturation=0.25, ~lightness=0.5, ~alpha=0.5)->expect
-      |> toBe("rgba(96,159,106,0.5)")
-  })
-
-  test("invert", () => {
-    "#ed5951"->invert->expect |> toBe("#12a6ae")
-  })
-
-  test("meetsContrastGuidelines", () => {
-    let expected: contrastScores = {
-      "AA": true,
-      "AALarge": true,
-      "AAA": true,
-      "AAALarge": true,
-    }
-
-    "#000000"->meetsContrastGuidelines("#ffffff")->expect |> toEqual(expected)
-  })
-
-  test("transparentize", () => {
-    "#ed5051"->transparentize(~amount=0.5)->expect |> toBe("rgba(237,80,81,0.5)")
-  })
-
-  test("hslToColorString", () => {
-    let hsl = {
-      "hue": 240.,
-      "lightness": 1.0,
-      "saturation": 0.5,
-    }
-
-    hsl->hslToColorString->expect |> toBe("#fff")
-  })
-
-  test("mix", () => {
-    "#ed5051"->mix("#bc9090", ~weight=0.2)->expect |> toBe("#c58383")
-  })
-
-  test("opacify", () => {
-    "#ed505100"->opacify(~amount=0.5)->expect |> toBe("rgba(237,80,81,0.5)")
-  })
-
-  test("parseToHsl", () => {
-    let expected: hslColor = {
-      "hue": 0.0,
-      "lightness": 0.5,
-      "saturation": 1.0,
-    }
-
-    "#FF0000"->parseToHsl->expect |> toEqual(expected)
-  })
-
-  test("parseToRgb", () => {
-    let expected: rgbColor = {
-      "red": 237,
-      "green": 80,
-      "blue": 81,
-    }
-
-    "#ed5051"->parseToRgb->expect |> toEqual(expected)
-  })
-
-  test("readableColor", () => {
-    "#ed5051"->readableColor(~strict=false, ())->expect |> toBe("#fff") |> keepGoing
-
-    "#000"->readableColor()->expect |> toBe("#000") |> keepGoing
-
-    "black"->readableColor(~darkReturnColor="#ff8", ())->expect |> toBe("#ff8") |> keepGoing
-
-    "white"->readableColor(~lightReturnColor="#001", ())->expect |> toBe("#001") |> keepGoing
-
-    "red"
-    ->readableColor(~lightReturnColor="#333", ~darkReturnColor="#ddd", ~strict=true, ())
-    ->expect
-    |> toBe("#000")
-    |> keepGoing
-
-    "yellow"
-    ->readableColor(~lightReturnColor="#333", ~darkReturnColor="#ddd", ~strict=true, ())
-    ->expect
-    |> toBe("#333")
-    |> keepGoing
-
-    "blue"
-    ->readableColor(~lightReturnColor="#333", ~darkReturnColor="#ddd", ~strict=true, ())
-    ->expect |> toBe("#ddd")
-  })
-
-  test("rgb", () => {
-    let subject: rgbColor = {
-      "red": 255,
-      "green": 255,
-      "blue": 255,
-    }
-
-    subject->rgb->expect |> toBe("#fff")
-  })
-
-  test("rgba", () => {
-    let subject: rgbaColor = {
-      "red": 255,
-      "green": 205,
-      "blue": 100,
-      "alpha": 0.7,
-    }
-
-    subject->rgba->expect |> toBe("rgba(255,205,100,0.7)")
-  })
-
-  test("saturate", () => {
-    "#ed5051"->saturate(~amount=0.5)->expect |> toBe("#ff3e3f")
-  })
-
-  test("setHue", () => {
-    "#CCCD64"->setHue(~hue=42)->expect |> toBe("#cdae64")
-  })
-
-  test("setLightness", () => {
-    "#CCCD64"->setLightness(~lightness=0.2)->expect |> toBe("#4d4d19")
-  })
-
-  test("setSaturation", () => {
-    "#CCCD64"->setSaturation(~saturation=0.2)->expect |> toBe("#adad84")
-  })
-})
-
-describe("Math", () => {
+  [
+    test("shade", () => {
+      assertEqual("#ed5051"->shade(~amount=0.25), "#b13c3c")
+    }),
+    test("tint", () => {
+      assertEqual("#ed5051"->tint(~amount=0.25), "#f17b7c")
+    }),
+    test("lighten", () => {
+      assertEqual("#ed5051"->lighten(~amount=0.25), "#f9c4c4")
+    }),
+    test("darken", () => {
+      assertEqual("#ed5051"->darken(~amount=0.25), "#ac1213")
+    }),
+    test("hsl", () => {
+      assertEqual(hsl(~hue=30., ~saturation=0.5, ~lightness=0.3), "#734d26")
+    }),
+    test("adjustHue", () => {
+      assertEqual("#ed5051"->adjustHue(~degree=30.5), "#ed9f50")
+    }),
+    test("complement", () => {
+      assertEqual("#ed5051"->complement, "#50edec")
+    }),
+    test("desaturate", () => {
+      assertEqual("#ed5051"->desaturate(~amount=25.5), "#9f9f9f")
+    }),
+    test("getContrast", () => {
+      assertEqual("#ed5051"->getContrast("#fff"), 3.58)
+    }),
+    test("getLuminance", () => {
+      assertEqual("#ed5051"->getLuminance, 0.243)
+    }),
+    test("grayscale", () => {
+      assertEqual("#ed5051"->grayscale, "#9f9f9f")
+    }),
+    test("hsla", () => {
+      assertEqual(
+        hsla(~hue=130., ~saturation=0.25, ~lightness=0.5, ~alpha=0.5),
+        "rgba(96,159,106,0.5)",
+      )
+    }),
+    test("invert", () => {
+      assertEqual("#ed5951"->invert, "#12a6ae")
+    }),
+    test("meetsContrastGuidelines", () => {
+      let expected: contrastScores = {
+        "AA": true,
+        "AALarge": true,
+        "AAA": true,
+        "AAALarge": true,
+      }
+      assertEqual("#000000"->meetsContrastGuidelines("#ffffff"), expected)
+    }),
+    test("transparentize", () => {
+      assertEqual("#ed5051"->transparentize(~amount=0.5), "rgba(237,80,81,0.5)")
+    }),
+    test("hslToColorString", () => {
+      let hsl = {
+        "hue": 240.,
+        "lightness": 1.0,
+        "saturation": 0.5,
+      }
+      assertEqual(hsl->hslToColorString, "#fff")
+    }),
+    test("mix", () => {
+      assertEqual("#ed5051"->mix("#bc9090", ~weight=0.2), "#c58383")
+    }),
+    test("opacify", () => {
+      assertEqual("#ed505100"->opacify(~amount=0.5), "rgba(237,80,81,0.5)")
+    }),
+    test("parseToHsl", () => {
+      let expected: hslColor = {
+        "hue": 0.0,
+        "lightness": 0.5,
+        "saturation": 1.0,
+      }
+      assertEqual("#FF0000"->parseToHsl, expected)
+    }),
+    test("parseToRgb", () => {
+      let expected: rgbColor = {
+        "red": 237,
+        "green": 80,
+        "blue": 81,
+      }
+      assertEqual("#ed5051"->parseToRgb, expected)
+    }),
+    test("readableColor", () => {
+      combineResults([
+        assertEqual("#ed5051"->readableColor(~strict=false, ()), "#000"),
+        assertEqual("#000"->readableColor(), "#fff"),
+        assertEqual("black"->readableColor(~darkReturnColor="#ff8", ()), "#ff8"),
+        assertEqual("white"->readableColor(~lightReturnColor="#001", ()), "#001"),
+        assertEqual(
+          "red"->readableColor(
+            ~lightReturnColor="#333",
+            ~darkReturnColor="#ddd",
+            ~strict=true,
+            (),
+          ),
+          "#000",
+        ),
+        assertEqual(
+          "yellow"->readableColor(
+            ~lightReturnColor="#333",
+            ~darkReturnColor="#ddd",
+            ~strict=true,
+            (),
+          ),
+          "#333",
+        ),
+        assertEqual(
+          "blue"->readableColor(
+            ~lightReturnColor="#333",
+            ~darkReturnColor="#ddd",
+            ~strict=true,
+            (),
+          ),
+          "#ddd",
+        ),
+      ])
+    }),
+    test("rgb", () => {
+      let subject: rgbColor = {
+        "red": 255,
+        "green": 255,
+        "blue": 255,
+      }
+      assertEqual(subject->rgb, "#fff")
+    }),
+    test("rgba", () => {
+      let subject: rgbaColor = {
+        "red": 255,
+        "green": 205,
+        "blue": 100,
+        "alpha": 0.7,
+      }
+      assertEqual(subject->rgba, "rgba(255,205,100,0.7)")
+    }),
+    test("saturate", () => {
+      assertEqual("#ed5051"->saturate(~amount=0.5), "#ff3e3f")
+    }),
+    test("setHue", () => {
+      assertEqual("#CCCD64"->setHue(~hue=42), "#cdae64")
+    }),
+    test("setLightness", () => {
+      assertEqual("#CCCD64"->setLightness(~lightness=0.2), "#4d4d19")
+    }),
+    test("setSaturation", () => {
+      assertEqual("#CCCD64"->setSaturation(~saturation=0.2), "#adad84")
+    }),
+  ]
+}
+
+let mathTests = () => {
   open Math
 
-  test("math", () => {
-    "12px + 8px"->math()->expect |> toBe("20px") |> keepGoing
-
-    "12rem + 8rem"->math()->expect |> toBe("20rem") |> keepGoing
-
-    math("10px + 8rem")->expect |> toThrow
-  })
-})
-
-describe("Mixins", () => {
+  [
+    test("math", () => {
+      combineResults([
+        assertEqual("12px + 8px"->math(), "20px"),
+        assertEqual("12rem + 8rem"->math(), "20rem"),
+        {
+          let result = try {
+            let _ = math("10px + 8rem", ())
+            Fail("Expected exception to be thrown")
+          } catch {
+          | _ => Pass
+          }
+          result
+        },
+      ])
+    }),
+  ]
+}
+
+let mixinTests = () => {
   open Mixins
 
-  test("between", () => {
-    between(
-      ~fromSize=Size.makeString("16px"),
-      ~toSize=Size.makeString("100px"),
-      ~minScreen="400px",
-      ~maxScreen="1000px",
-      (),
-    )->expect |> toMatchSnapshot
-  })
-
-  test("clearfix", () => {
-    clearFix(~parent="div")->expect |> toMatchSnapshot
-  })
-
-  test("cover", () => {
-    cover(~offset=Size.makeString("16px"), ())->expect |> toMatchSnapshot
-  })
-
-  test("ellipsis", () => {
-    ellipsis(~width=Size.makeString("16px"), ~lines=10, ())->expect |> toMatchSnapshot
-  })
-
-  test("fluidRange", () => {
-    {
-      prop: "padding",
-      fromSize: Size.makeString("20px"),
-      toSize: Size.makeString("20px"),
-    }
-    ->fluidRange(~minScreen="320px", ~maxScreen="1024px")
-    ->expect
-    ->toMatchSnapshot
-  })
-
-  test("fluidRangeWithArray", () => {
-    [
-      {
-        prop: "padding",
-        fromSize: Size.makeString("16px"),
-        toSize: Size.makeString("32px"),
-      },
-      {
-        prop: "margin",
-        fromSize: Size.makeString("16px"),
-        toSize: Size.makeString("32px"),
-      },
-    ]
-    ->fluidRangeWithArray(~minScreen="320px", ~maxScreen="1024px")
-    ->expect
-    ->toMatchSnapshot
-  })
-})
+  [
+    test("between", () => {
+      let result = between(
+        ~fromSize=Size.makeString("16px"),
+        ~toSize=Size.makeString("100px"),
+        ~minScreen="400px",
+        ~maxScreen="1000px",
+        (),
+      )
+      assertTrue(result != "", ~message="between should return non-empty string")
+    }),
+    test("clearfix", () => {
+      let result = clearFix(~parent="div")
+      assertTrue(result != "", ~message="clearFix should return non-empty string")
+    }),
+    test("cover", () => {
+      let result = cover(~offset=Size.makeString("16px"), ())
+      assertTrue(result != "", ~message="cover should return non-empty string")
+    }),
+    test("ellipsis", () => {
+      let result = ellipsis(~width=Size.makeString("16px"), ~lines=10, ())
+      assertTrue(result != "", ~message="ellipsis should return non-empty string")
+    }),
+    test("fluidRange", () => {
+      let result =
+        {
+          prop: "padding",
+          fromSize: Size.makeString("20px"),
+          toSize: Size.makeString("20px"),
+        }->fluidRange(~minScreen="320px", ~maxScreen="1024px")
+      assertTrue(result != "", ~message="fluidRange should return non-empty string")
+    }),
+    test("fluidRangeWithArray", () => {
+      let result =
+        [
+          {
+            prop: "padding",
+            fromSize: Size.makeString("16px"),
+            toSize: Size.makeString("32px"),
+          },
+          {
+            prop: "margin",
+            fromSize: Size.makeString("16px"),
+            toSize: Size.makeString("32px"),
+          },
+        ]->fluidRangeWithArray(~minScreen="320px", ~maxScreen="1024px")
+      assertTrue(result != "", ~message="fluidRangeWithArray should return non-empty string")
+    }),
+  ]
+}
+
+let suites = [
+  suite("Color", colorTests()),
+  suite("Math", mathTests()),
+  suite("Mixins", mixinTests()),
+]

package/__tests__/RunTests.res

@@ -0,0 +1,5 @@
+open TestFramework
+
+let allSuites = Array.concat(PolishedTest.suites, PolishedCssTest.suites)
+
+runSuites(allSuites)

package/__tests__/TestFramework.res

@@ -0,0 +1,170 @@
+// Simple test framework
+
+type testResult = Pass | Fail(string)
+
+type testCase = {
+  name: string,
+  run: unit => testResult,
+}
+
+type testSuite = {
+  name: string,
+  tests: array<testCase>,
+}
+
+let test = (name: string, run: unit => testResult): testCase => {
+  {name, run}
+}
+
+let suite = (name: string, tests: array<testCase>): testSuite => {
+  {name, tests}
+}
+
+let assertEqual = (actual: 'a, expected: 'a, ~message: option<string>=?): testResult => {
+  if actual == expected {
+    Pass
+  } else {
+    let msg = switch message {
+    | Some(m) => m
+    | None => `Expected ${String.make(expected)}, got ${String.make(actual)}`
+    }
+    Fail(msg)
+  }
+}
+
+let assertNotEqual = (actual: 'a, expected: 'a, ~message: option<string>=?): testResult => {
+  if actual != expected {
+    Pass
+  } else {
+    let msg = switch message {
+    | Some(m) => m
+    | None => `Expected values to not be equal`
+    }
+    Fail(msg)
+  }
+}
+
+let assertTrue = (condition: bool, ~message: option<string>=?): testResult => {
+  if condition {
+    Pass
+  } else {
+    let msg = switch message {
+    | Some(m) => m
+    | None => "Expected true, got false"
+    }
+    Fail(msg)
+  }
+}
+
+let assertFalse = (condition: bool, ~message: option<string>=?): testResult => {
+  if !condition {
+    Pass
+  } else {
+    let msg = switch message {
+    | Some(m) => m
+    | None => "Expected false, got true"
+    }
+    Fail(msg)
+  }
+}
+
+let combineResults = (results: array<testResult>): testResult => {
+  let failures = results->Array.filter(r =>
+    switch r {
+    | Fail(_) => true
+    | Pass => false
+    }
+  )
+
+  if Array.length(failures) > 0 {
+    failures->Array.get(0)->Option.getOr(Pass)
+  } else {
+    Pass
+  }
+}
+
+let runSuite = (suite: testSuite): unit => {
+  Console.log(`\n📦 Running test suite: ${suite.name}`)
+  Console.log("=" ++ String.repeat("-", String.length(suite.name) + 23))
+
+  let passed = ref(0)
+  let failed = ref(0)
+
+  suite.tests->Array.forEach(testCase => {
+    switch testCase.run() {
+    | Pass => {
+        Console.log(`  ✓ ${testCase.name}`)
+        passed := passed.contents + 1
+      }
+    | Fail(message) => {
+        Console.log(`  ✗ ${testCase.name}`)
+        Console.log(`    ${message}`)
+        failed := failed.contents + 1
+      }
+    }
+  })
+
+  Console.log("")
+  Console.log(
+    `Results: ${Int.toString(passed.contents)} passed, ${Int.toString(failed.contents)} failed`,
+  )
+
+  if failed.contents > 0 {
+    Console.log("❌ Some tests failed")
+  } else {
+    Console.log("✅ All tests passed!")
+  }
+}
+
+let runSuites = (suites: array<testSuite>): unit => {
+  Console.log("\n🧪 Running all test suites")
+  Console.log("========================\n")
+
+  let totalPassed = ref(0)
+  let totalFailed = ref(0)
+
+  suites->Array.forEach(suite => {
+    Console.log(`\n📦 ${suite.name}`)
+    Console.log("-" ++ String.repeat("-", String.length(suite.name) + 3))
+
+    let suitePassed = ref(0)
+    let suiteFailed = ref(0)
+
+    suite.tests->Array.forEach(testCase => {
+      switch testCase.run() {
+      | Pass => {
+          Console.log(`  ✓ ${testCase.name}`)
+          suitePassed := suitePassed.contents + 1
+          totalPassed := totalPassed.contents + 1
+        }
+      | Fail(message) => {
+          Console.log(`  ✗ ${testCase.name}`)
+          Console.log(`    ${message}`)
+          suiteFailed := suiteFailed.contents + 1
+          totalFailed := totalFailed.contents + 1
+        }
+      }
+    })
+
+    Console.log(
+      `  ${Int.toString(suitePassed.contents)} passed, ${Int.toString(
+          suiteFailed.contents,
+        )} failed`,
+    )
+  })
+
+  Console.log("\n" ++ String.repeat("=", 50))
+  Console.log(
+    `Total: ${Int.toString(totalPassed.contents)} passed, ${Int.toString(
+        totalFailed.contents,
+      )} failed`,
+  )
+
+  if totalFailed.contents > 0 {
+    Console.log("❌ Some tests failed\n")
+    %raw(`process.exit(1)`)
+  } else {
+    Console.log("✅ All tests passed!\n")
+    %raw(`process.exit(0)`)
+  }
+}

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "rescript-polished",
-  "version": "2.0.0",
+  "version": "2.1.0",
+  "type": "module",
   "description": "ReScript bindings for polished.",
   "main": "dist/index.js",
   "repository": "https://github.com/brnrdog/rescript-polished",
@@ -23,27 +24,25 @@
   },
   "scripts": {
     "res:start": "rescript build -w",
-    "res:build": "rescript build -with-deps",
-    "res:clean": "rescript clean -with-deps",
-    "test": "jest",
-    "test:ci": "jest --collect-coverage"
+    "res:build": "rescript build",
+    "res:clean": "rescript clean",
+    "test": "rescript build && node lib/bs/__tests__/RunTests.res.js",
+    "test:ci": "rescript build && node lib/bs/__tests__/RunTests.res.js"
   },
   "dependencies": {
-    "bs-css": "^15.0.1",
+    "bs-css": "^18.1.1",
     "polished": "^4.0.3",
-    "rescript": "^9.1.4"
+    "rescript": "^12.0.2"
   },
   "devDependencies": {
-    "@glennsl/bs-jest": "^0.7.0",
-    "jest": "^27.0.4",
-    "semantic-release": "^18.0.0"
-  },
-  "jest": {
-    "collectCoverageFrom": [
-      "<rootDir>/{lib/js/src/**/*.js",
-      "!<rootDir>/lib/js/src/Polished.js",
-      "!<rootDir>/lib/js/src/PolishedCss.js"
-    ],
-    "verbose": true
+    "@commitlint/cli": "^20.1.0",
+    "@commitlint/config-conventional": "^20.0.0",
+    "@rescript/core": "^1.6.1",
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^12.0.2",
+    "@semantic-release/npm": "^13.1.2",
+    "husky": "^9.1.7",
+    "semantic-release": "^25.0.2"
   }
 }

package/{bsconfig.json → rescript.json}

@@ -1,6 +1,5 @@
 {
   "name": "rescript-polished",
-  "version": "0.0.0-semantic-released",
   "sources": [
     {
       "dir": "src",
@@ -13,12 +12,11 @@
   ],
   "package-specs": [
     {
-      "module": "commonjs"
+      "module": "es6"
     }
   ],
-  "suffix": ".bs.js",
-  "bs-dev-dependencies": ["@glennsl/bs-jest"],
-  "bs-dependencies": ["bs-css"],
+  "suffix": ".res.js",
+  "dependencies": ["bs-css"],
   "warnings": {
     "error": "+101"
   }

package/src/PolishedCss__Color.res

@@ -1,26 +1,26 @@
 module Utils = {
-  open Css_AtomicTypes
+  module StdFloat = Float
+  module StdInt = Int
 
   module Rgba = {
-    let regex = "rgba\(\s*(-?\d+|-?\d*\.\d+(?=%))\s*,\s*(-?\d+|-?\d*\.\d+(?=%))\s*,\s*(-?\d+|-?\d*\.\d+(?=%))\s*,\s*(-?\d+|-?\d*.\d+)\s*\)"
-    let rgbaRegexGroups = (_, i) => [1, 2, 3, 4]->Js.Array2.includes(i)
-    let rgbValue = v => v->Js.Nullable.toOption->Belt.Option.getExn->int_of_string
-    let alphaValue = v => v->Js.Nullable.toOption->Belt.Option.getUnsafe->float_of_string
+    let regex = "rgba\\(\\s*(-?\\d+|-?\\d*\\.\\d+(?=%))\\s*,\\s*(-?\\d+|-?\\d*\\.\\d+(?=%))\\s*,\\s*(-?\\d+|-?\\d*\\.\\d+(?=%))\\s*,\\s*(-?\\d+|-?\\d*\\.\\d+)\\s*\\)"
+    let rgbValue = v => v->StdInt.fromString->Belt.Option.getExn
+    let alphaValue = v => v->StdFloat.fromString->Belt.Option.getExn
+
+    @get_index external unsafeGet: (RegExp.Result.t, int) => string = ""
 
     let fromString = string => {
-      let result = regex->Js.Re.fromString->Js.Re.exec_(string)
+      let result = regex->RegExp.fromString->RegExp.exec(string)
 
       switch result {
       | None => None
       | Some(result) => {
-          let values = result->Js.Re.captures->Js.Array2.filteri(rgbaRegexGroups)
-
-          let red = values->Array.get(0)->rgbValue
-          let green = values->Array.get(1)->rgbValue
-          let blue = values->Array.get(2)->rgbValue
-          let alpha = values->Array.get(3)->alphaValue
+          let red = result->unsafeGet(1)->rgbValue
+          let green = result->unsafeGet(2)->rgbValue
+          let blue = result->unsafeGet(3)->rgbValue
+          let alpha = result->unsafeGet(4)->alphaValue
 
-          Some(Color.rgba(red, green, blue, #num(alpha)))
+          Some(Css_Js_Core.Types.Color.rgba(red, green, blue, #num(alpha)))
         }
       }
     }
@@ -28,13 +28,13 @@ module Utils = {
 
   module Hex = {
     let fromString = string =>
-      #hex(string->Js.String2.slice(~from=1, ~to_=Js.String.length(string)))
+      #hex(string->String.slice(~start=1, ~end=String.length(string)))
   }
 
-  let toString = Color.toString
+  let toString = Css_Js_Core.Types.Color.toString
 
   let fromString = string => {
-    switch string->Js.String2.slice(~from=0, ~to_=4) {
+    switch string->String.slice(~start=0, ~end=4) {
     | "rgba" => string->Rgba.fromString->Belt.Option.getExn
     | _ => string->Hex.fromString
     }

package/src/Polished__Color.res

@@ -10,19 +10,19 @@ type rgbaColor = {"red": int, "green": int, "blue": int, "alpha": float}
 
 @module("polished")
 external shade: (float, color) => color = "shade"
-let shade = (color, ~amount) => color |> shade(amount)
+let shade = (color, ~amount) =>  shade(amount, color)
 
 @module("polished")
 external tint: (float, color) => color = "tint"
-let tint = (color, ~amount) => color |> tint(amount)
+let tint = (color, ~amount) => tint(amount, color)
 
 @module("polished")
 external lighten: (float, color) => color = "lighten"
-let lighten = (color, ~amount) => color |> lighten(amount)
+let lighten = (color, ~amount) => lighten(amount, color)
 
 @module("polished")
 external darken: (float, color) => color = "darken"
-let darken = (color, ~amount) => color |> darken(amount)
+let darken = (color, ~amount) => darken(amount, color)
 
 @module("polished")
 external hsl: (float, float, float) => color = "hsl"
@@ -30,7 +30,7 @@ let hsl = (~hue, ~saturation, ~lightness) => hsl(hue, saturation, lightness)
 
 @module("polished")
 external extAdjustHue: (float, color) => color = "adjustHue"
-let adjustHue = (color, ~degree) => color |> extAdjustHue(degree)
+let adjustHue = (color, ~degree) => extAdjustHue(degree, color)
 
 @module("polished")
 external complement: color => color = "complement"
@@ -38,7 +38,7 @@ let complement = complement
 
 @module("polished")
 external desaturate: (float, color) => color = "desaturate"
-let desaturate = (color, ~amount) => color |> desaturate(amount)
+let desaturate = (color, ~amount) => desaturate(amount, color)
 
 @module("polished")
 external getContrast: (color, color) => float = "getContrast"
@@ -66,7 +66,7 @@ let meetsContrastGuidelines = meetsContrastGuidelines
 
 @module("polished")
 external extTransparentize: (float, color) => color = "transparentize"
-let transparentize = (color, ~amount) => color |> extTransparentize(amount)
+let transparentize = (color, ~amount) => extTransparentize(amount, color)
 
 @module("polished")
 external hslToColorString: hslColor => color = "hslToColorString"
@@ -74,11 +74,11 @@ let hslToColorString = hslToColorString
 
 @module("polished")
 external mix: (float, color, color) => color = "mix"
-let mix = (color1, color2, ~weight) => color2 |> mix(weight, color1)
+let mix = (color1, color2, ~weight) => mix(weight, color1, color2)
 
 @module("polished")
 external opacify: (float, color) => color = "opacify"
-let opacify = (color, ~amount) => color |> opacify(amount)
+let opacify = (color, ~amount) => opacify(amount, color)
 
 @module("polished")
 external parseToHsl: color => hslColor = "parseToHsl"
@@ -90,7 +90,7 @@ let parseToRgb = parseToRgb
 
 @module("polished")
 external readableColor: (color, color, color, bool) => color = "readableColor"
-let readableColor = (color, ~lightReturnColor="#fff", ~darkReturnColor="#000", ~strict=true, ()) =>
+let readableColor = (color, ~lightReturnColor="#000", ~darkReturnColor="#fff", ~strict=true, ()) =>
   readableColor(color, lightReturnColor, darkReturnColor, strict)
 
 @module("polished")
@@ -103,16 +103,16 @@ let rgba = rgba
 
 @module("polished")
 external saturate: (float, color) => color = "saturate"
-let saturate = (color, ~amount) => color |> saturate(amount)
+let saturate = (color, ~amount) => saturate(amount, color)
 
 @module("polished")
 external setHue: (int, color) => color = "setHue"
-let setHue = (color, ~hue) => color |> setHue(hue)
+let setHue = (color, ~hue) => setHue(hue, color)
 
 @module("polished")
 external setLightness: (float, color) => color = "setLightness"
-let setLightness = (color, ~lightness) => color |> setLightness(lightness)
+let setLightness = (color, ~lightness) => setLightness(lightness, color)
 
 @module("polished")
 external setSaturation: (float, color) => color = "setSaturation"
-let setSaturation = (color, ~saturation) => color |> setSaturation(saturation)
+let setSaturation = (color, ~saturation) => setSaturation(saturation, color)

package/src/Polished__Mixins.res

@@ -26,37 +26,37 @@ external clearFix: option<string> => 'styles = "clearFix"
 let clearFix = (~parent=?) => parent->clearFix
 
 @module("polished")
-external cover: (~offset: Js.undefined<Size.t>) => 'styles = "cover"
-let cover = (~offset=?, ()) => cover(~offset=Js.Undefined.fromOption(offset))
+external cover: (~offset: Nullable.t<Size.t>) => 'styles = "cover"
+let cover = (~offset=?, ()) => cover(~offset=Nullable.fromOption(offset))
 
 @module("polished")
-external ellipsis: (~width: Js.undefined<Size.t>, ~lines: option<int>) => 'styles = "ellipsis"
+external ellipsis: (~width: Nullable.t<Size.t>, ~lines: option<int>) => 'styles = "ellipsis"
 let ellipsis = (~width=?, ~lines=?, ()) => {
-  ellipsis(~width=Js.Undefined.fromOption(width), ~lines)
+  ellipsis(~width=Nullable.fromOption(width), ~lines)
 }
 
 @module("polished")
 external fluidRange: (
   fluidRangeConfiguration,
-  ~minScreen: Js.undefined<string>,
-  ~maxScreen: Js.undefined<string>,
+  ~minScreen: Nullable.t<string>,
+  ~maxScreen: Nullable.t<string>,
 ) => 'styles = "fluidRange"
 let fluidRange = (~minScreen=?, ~maxScreen=?, cssProp) =>
   fluidRange(
     cssProp,
-    ~minScreen=Js.Undefined.fromOption(minScreen),
-    ~maxScreen=Js.Undefined.fromOption(maxScreen),
+    ~minScreen=Nullable.fromOption(minScreen),
+    ~maxScreen=Nullable.fromOption(maxScreen),
   )
 
 @module("polished")
 external fluidRangeWithArray: (
   array<fluidRangeConfiguration>,
-  ~minScreen: Js.undefined<string>,
-  ~maxScreen: Js.undefined<string>,
+  ~minScreen: Nullable.t<string>,
+  ~maxScreen: Nullable.t<string>,
 ) => 'styles = "fluidRange"
 let fluidRangeWithArray = (~minScreen=?, ~maxScreen=?, cssProps) =>
   fluidRangeWithArray(
     cssProps,
-    ~minScreen=Js.Undefined.fromOption(minScreen),
-    ~maxScreen=Js.Undefined.fromOption(maxScreen),
+    ~minScreen=Nullable.fromOption(minScreen),
+    ~maxScreen=Nullable.fromOption(maxScreen),
   )