chore: introduce CSS Modules

.github/workflows/ci.yml

@@ -88,15 +88,25 @@ jobs:
         run: yarn workspace ${{ matrix.package }} depcheck
 
       - name: Audit dependencies
+        if: matrix.package != '@slicemachine/e2e'
         run: yarn workspace ${{ matrix.package }} audit
 
       - name: Lint
         run: yarn workspace ${{ matrix.package }} lint
 
+      - name: Stylelint
+        if: matrix.package == 'slice-machine-ui'
+        run: yarn workspace ${{ matrix.package }} stylelint
+
+      - name: Generate TypeScript definition files from CSS Modules
+        if: matrix.package == 'slice-machine-ui'
+        run: yarn workspace ${{ matrix.package }} typed-css-modules
+
       - name: Types
         run: yarn workspace ${{ matrix.package }} types
 
       - name: Unit
+        if: matrix.package != '@slicemachine/e2e'
         run: yarn workspace ${{ matrix.package }} unit
         env:
           EMAIL: ${{ secrets.EMAIL }}

.prettierignore

@@ -1,6 +1,7 @@
 # Ignore artifacts:
 .github/
 /.yarn
+/packages/*/src/**/*.module.css.d.ts
 /packages/*/storybook-static
 /.pnp.*
 packages/slice-machine/.next

package.json

@@ -5,7 +5,7 @@
   },
   "packageManager": "[email protected]",
   "scripts": {
-    "clean": "rimraf --glob '{e2e-projects/*/{.next,.svelte-kit},packages/*/{.next,.svelte-kit,build,coverage,dist,out,package.tgz,storybook-static},playwright/{playwright-report,test-results}}'",
+    "clean": "rimraf --glob '{e2e-projects/*/{.next,.svelte-kit},packages/*/{.next,.svelte-kit,build,coverage,dist,out,package.tgz,src/**/*.module.css.d.ts,storybook-static},playwright/{playwright-report,test-results}}'",
     "dev": "concurrently --prefix-colors auto \"yarn:dev:*\"",
     "dev:manager": "yarn workspace @slicemachine/manager dev",
     "dev:start-slicemachine": "yarn workspace start-slicemachine dev",
@@ -20,6 +20,7 @@
     "build-essential": "yarn workspace @slicemachine/plugin-kit build && yarn workspace @slicemachine/manager build",
     "audit": "yarn workspaces foreach --parallel --verbose run audit",
     "lint": "yarn workspaces foreach --verbose run lint",
+    "stylelint": "yarn workspaces foreach --verbose run stylelint",
     "lint-staged": "lint-staged",
     "prettier:fix": "prettier --write .",
     "prettier:check": "prettier --check .",
@@ -65,6 +66,10 @@
     "**/packages/slice-machine/**/*.@(js|jsx|ts|tsx|)": [
       "prettier --write --ignore-unknown",
       "yarn workspace slice-machine-ui lint:precommit"
+    ],
+    "**/packages/slice-machine/**/*.module.css": [
+      "prettier --write --ignore-unknown",
+      "yarn workspace slice-machine-ui stylelint:precommit"
     ]
   },
   "resolutions": {

packages/slice-machine/.depcheckrc

@@ -7,6 +7,9 @@ ignores:
     "monocle-ts",
     "newtype-ts",
     "semver",
-    "start-slicemachine"
+    "start-slicemachine",
+    "stylelint-config-css-modules",
+    "stylelint-config-prettier",
+    "stylelint-config-recommended"
   ]
 skip - missing: true

packages/slice-machine/.eslintignore

@@ -1,3 +1,4 @@
+/src/**/*.module.css.d.ts
 /storybook-static
 !/.storybook
 build

packages/slice-machine/.gitignore

@@ -27,6 +27,7 @@ yarn-error.log*
 .vercel
 
 # typescript
+/src/**/*.module.css.d.ts
 *.tsbuildinfo
 next-env.d.ts
 

packages/slice-machine/package.json

@@ -12,18 +12,22 @@
     "node": ">=14"
   },
   "scripts": {
-    "build": "cross-env NODE_OPTIONS=--max_old_space_size=8192 next build && next export",
-    "dev": "next dev",
-    "dev-cypress": "concurrently \"next dev\" \"npm run dev --prefix ../../e2e-projects/cypress-next-app\"",
+    "build": "yarn typed-css-modules && cross-env NODE_OPTIONS=--max_old_space_size=8192 next build && next export",
+    "dev": "concurrently \"yarn typed-css-modules:watch\" \"next dev\"",
+    "dev-cypress": "concurrently \"yarn typed-css-modules:watch\" \"next dev\" \"npm run dev --prefix ../../e2e-projects/cypress-next-app\"",
     "lint": "eslint --max-warnings 0 --ext .ts,.tsx,.js,.jsx .",
+    "stylelint": "stylelint --max-warnings 0 \"src/**/*.module.css\"",
     "prepack": "$npm_execpath run build",
     "storybook": "storybook dev --no-open --port 6006",
     "storybook-build": "storybook build",
-    "test": "yarn lint && yarn types && yarn unit && yarn build",
+    "test": "yarn lint && yarn stylelint && yarn typed-css-modules && yarn types && yarn unit && yarn build",
     "types": "tsc --noEmit",
+    "typed-css-modules": "tcm --pattern \"src/**/*.module.css\" .",
+    "typed-css-modules:watch": "yarn typed-css-modules --watch",
     "unit": "vitest run --coverage",
     "unit:watch": "vitest watch",
     "lint:precommit": "eslint --max-warnings 0",
+    "stylelint:precommit": "stylelint --max-warnings 0",
     "depcheck": "depcheck --config=.depcheckrc",
     "audit": "yarn npm audit --environment production --severity high"
   },
@@ -38,9 +42,9 @@
   "devDependencies": {
     "@emotion/react": "11.11.1",
     "@extractus/oembed-extractor": "3.1.8",
-    "@prismicio/editor-fields": "0.4.18",
-    "@prismicio/editor-support": "0.4.18",
-    "@prismicio/editor-ui": "0.4.18",
+    "@prismicio/editor-fields": "0.4.19",
+    "@prismicio/editor-support": "0.4.19",
+    "@prismicio/editor-ui": "0.4.19",
     "@prismicio/mocks": "2.0.0-alpha.2",
     "@prismicio/simulator": "0.1.4",
     "@prismicio/types-internal": "2.2.0",
@@ -123,8 +127,13 @@
     "remark-gfm": "3.0.1",
     "semver": "7.3.8",
     "storybook": "7.0.10",
+    "stylelint": "15.11.0",
+    "stylelint-config-css-modules": "4.3.0",
+    "stylelint-config-prettier": "9.0.5",
+    "stylelint-config-recommended": "13.0.0",
     "swr": "1.3.0",
     "theme-ui": "0.15.5",
+    "typed-css-modules": "0.8.0",
     "typesafe-actions": "5.1.0",
     "typescript": "4.9.5",
     "vite": "4.3.9",

packages/slice-machine/src/components/Kbd/Kbd.module.css

@@ -0,0 +1,10 @@
+.root {
+  background-color: var(--grey2);
+  border-color: var(--grey6);
+  /* stylelint-disable-next-line declaration-property-value-allowed-list -- The component has a border radius of 3 px in Figma. */
+  border-radius: 3px;
+  border-style: solid;
+  border-width: 1px;
+  color: var(--grey11);
+  padding-inline: 4px;
+}

packages/slice-machine/src/components/Kbd/Kbd.tsx

@@ -1,6 +1,6 @@
 import { FC, PropsWithChildren } from "react";
 
-import * as styles from "./Kbd.css";
+import styles from "./Kbd.module.css";
 
 export const Kbd: FC<PropsWithChildren> = ({ children }) => (
   <kbd className={styles.root}>{children}</kbd>

packages/slice-machine/stylelint.config.js

@@ -0,0 +1,17 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { cssTheme } = require("@prismicio/editor-ui");
+
+module.exports = {
+  defaultSeverity: "warning",
+  reportNeedlessDisables: true,
+  reportInvalidScopeDisables: true,
+  reportDescriptionlessDisables: true,
+  rules: {
+    "declaration-property-value-allowed-list": cssTheme,
+  },
+  extends: [
+    "stylelint-config-recommended",
+    "stylelint-config-css-modules",
+    "stylelint-config-prettier",
+  ],
+};

playwright/package.json

@@ -4,15 +4,13 @@
   "description": "E2E tests for Slice Machine",
   "author": "Prismic <[email protected]> (https://prismic.io)",
   "scripts": {
-    "audit": "echo \"No audit for playwright\" && true",
     "depcheck": "depcheck --config=.depcheckrc",
     "lint": "eslint --max-warnings 0 --ext .js,.ts .",
     "test:e2e:install": "playwright install --with-deps chromium",
     "test:e2e:report": "playwright show-report",
     "test:e2e": "playwright test",
     "types": "tsc --noEmit",
-    "test:e2e:merge-reports": "playwright merge-reports",
-    "unit": "echo \"No unit tests for playwright\" && true"
+    "test:e2e:merge-reports": "playwright merge-reports"
   },
   "devDependencies": {
     "@msgpack/msgpack": "2.8.0",