[FEI-5654] EXPERIMENT - DO NOT REVIEW: CSS Modules tooling

.changeset/gentle-wombats-joke.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/silver-years-push.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/wonder-blocks-link": major
+---
+
+Switches Link to use CSS modules

.changeset/soft-queens-brake.md

@@ -0,0 +1,2 @@
+---
+---

.changeset/yellow-bats-deny.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/wonder-blocks-core": major
+"@khanacademy/wb-dev-build-settings": major
+---
+
+Use CSS modules

.github/workflows/node-ci-lint.yml

@@ -72,5 +72,8 @@ jobs:
       - name: Build .d.ts types
         run: pnpm build:types
 
+      - name: Stylelint
+        run: pnpm lint:style
+
       - name: Check package.json files
         run: ./utils/publish/pre-publish-check-ci.ts

.stylelintignore

@@ -0,0 +1 @@
+packages/**/dist/**/*.css

.vscode/extensions.json

@@ -14,6 +14,7 @@
         "eamodio.gitlens",
 
         // Jest
-        "orta.vscode-jest"
+        "orta.vscode-jest",
+        "vunguyentuan.vscode-css-variables"
     ]
 }

.vscode/settings.json

@@ -30,5 +30,10 @@
     "typescript.inlayHints.propertyDeclarationTypes.enabled": true,
     "typescript.inlayHints.variableTypes.enabled": true,
 
-    "jest.jestCommandLine": "pnpm jest"
+    "jest.jestCommandLine": "pnpm jest",
+
+    "cssVariables.lookupFiles": [
+        "./packages/wonder-blocks-tokens/dist/css/index.css"
+    ]
+
 }

__docs__/wonder-blocks-core/view.stories.module.css

@@ -0,0 +1,6 @@
+.cssModulesExample {
+    background: var(--wb-semanticColor-core-background-instructive-subtle);
+    border: 1px solid var(--wb-semanticColor-core-border-instructive-default);
+    padding: var(--wb-spacing-xxxSmall-4);
+    color: var(--wb-semanticColor-core-foreground-instructive-strong);
+}

__docs__/wonder-blocks-core/view.stories.tsx

@@ -14,6 +14,8 @@ import packageConfig from "../../packages/wonder-blocks-core/package.json";
 import ComponentInfo from "../components/component-info";
 import viewArgTypes from "./view.argtypes";
 
+import newStyles from "./view.stories.module.css";
+
 export default {
     title: "Packages / Core / View",
     component: View,
@@ -72,6 +74,29 @@ InlineStyles.parameters = {
     },
 };
 
+/**
+ * Styles can also be applied using CSS modules.
+ */
+export const CssModules: StoryComponentType = {
+    render: () => (
+        <View style={styles.container}>
+            <HeadingMedium>Hello, world!</HeadingMedium>
+            <View
+                style={[styles.container, newStyles.cssModulesExample]}
+                // className={newStyles.cssModulesExample}
+            >
+                1. The style prop can accept a (nested) array of Aphrodite
+                styles and CSS modules. Note that in this case, Aphrodite styles
+                are applied after CSS modules due to the order of the styles
+                that are being injected in the document.
+            </View>
+            <View style={newStyles.cssModulesExample}>
+                2. In this case, only CSS modules are applied.
+            </View>
+        </View>
+    ),
+};
+
 export const OtherProps: StoryComponentType = {
     name: "Using other props",
     render: () => (

__docs__/wonder-blocks-typography/styles.css

@@ -1,5 +1,6 @@
 .custom-style {
     border: 1px solid #000;
+
     /* NOTE: The color style is not applied to the text because the styles
     defined via Aphrodite take more precedence */
     color: red!important;

build-settings/rollup.config.mjs

@@ -5,6 +5,7 @@ import path from "path";
 import {nodeExternals} from "rollup-plugin-node-externals";
 import swc from "@rollup/plugin-swc";
 import resolve from "@rollup/plugin-node-resolve";
+import postcss from "rollup-plugin-postcss";
 
 const createConfig = (pkgName) => {
     const packageJsonPath = path.join("packages", pkgName, "package.json");
@@ -28,6 +29,15 @@ const createConfig = (pkgName) => {
         ],
         input: `packages/${pkgName}/src/index.ts`,
         plugins: [
+            postcss({
+                modules: {
+                    generateScopedName: "[hash:base64:5]",
+                    getJSON() {},
+                },
+                extract: true,
+                minimize: true,
+                sourceMap: true,
+            }),
             swc({
                 swc: {
                     swcrc: true,

config/jest/test.config.js

@@ -27,6 +27,7 @@ module.exports = {
         // Compile .svg files using a custom transformer that returns the
         // basename of the file being transformed.
         "^.+.svg$": "<rootDir>/config/jest/svg.transform.js",
+        "\\.css$": "<rootDir>/config/jest/svg.transform.js",
     },
     // Allow transforming files imported from @phosphor-icons/core.
     // This is required by the .svg transform above.

package.json

@@ -25,6 +25,7 @@
     "lint:watch": "esw --watch --config ./eslint/eslintrc packages",
     "lint": "pnpm lint:ci .",
     "lint:ci": "eslint --ext .ts --ext .js --ext .tsx --ext .jsx",
+    "lint:style": "stylelint \"packages/**/*.css\" \"__docs__/**/*.css\"",
     "publish:check": "pnpm run lint:pkg-json && ./utils/publish/pre-publish-check-ci.ts",
     "publish:ci": "pnpm run publish:check && git diff --stat --exit-code HEAD && pnpm build && pnpm build:types && pnpm changeset publish",
     "start": "pnpm start:storybook",
@@ -36,6 +37,7 @@
     "typecheck": "tsc",
     "typewatch": "tsc --noEmit --watch --incremental",
     "add:devdepbysha": "bash -c 'pnpm add -W --dev \"git+https://git@github.com/Khan/$0.git#$1\"'"
+
   },
   "author": "",
   "license": "MIT",
@@ -46,8 +48,8 @@
     "@khanacademy/eslint-plugin": "^3.1.1",
     "@khanacademy/wonder-blocks-accordion": "workspace:*",
     "@khanacademy/wonder-blocks-announcer": "workspace:*",
-    "@khanacademy/wonder-blocks-banner": "workspace:*",
     "@khanacademy/wonder-blocks-badge": "workspace:*",
+    "@khanacademy/wonder-blocks-banner": "workspace:*",
     "@khanacademy/wonder-blocks-birthday-picker": "workspace:*",
     "@khanacademy/wonder-blocks-breadcrumbs": "workspace:*",
     "@khanacademy/wonder-blocks-button": "workspace:*",
@@ -132,13 +134,18 @@
     "jscodeshift": "catalog:",
     "npm-package-json-lint": "^8.0.0",
     "playwright": "^1.50.1",
+    "postcss": "^8.5.6",
     "prettier": "^3.4.2",
     "react-refresh": "^0.16.0",
     "remark-gfm": "^4.0.0",
     "rollup": "^2.79.2",
     "rollup-plugin-node-externals": "^8.0.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "storybook": "catalog:",
     "storybook-addon-pseudo-states": "^9.1.8",
+    "stylelint": "^16.25.0",
+    "stylelint-config-standard": "^39.0.0",
+    "stylelint-value-no-unknown-custom-properties": "^6.0.1",
     "swc_mut_cjs_exports": "^10.7.0",
     "turbo": "^2.5.3",
     "typescript": "5.7.3",

packages/wonder-blocks-cell/src/components/internal/cell-core.tsx

@@ -39,7 +39,7 @@ const LeftAccessory = ({
                 styles.accessory,
                 styles.accessoryLeft,
                 disabled && styles.accessoryDisabled,
-                {...style},
+                style,
             ]}
         >
             {leftAccessory}
@@ -75,7 +75,7 @@ const RightAccessory = ({
                 styles.accessory,
                 styles.accessoryRight,
                 disabled && styles.accessoryDisabled,
-                {...style},
+                style,
                 active && styles.accessoryActive,
             ]}
         >

packages/wonder-blocks-core/src/components/view.module.css

@@ -0,0 +1,17 @@
+/* https://github.com/facebook/css-layout#default-values */
+.default {
+    align-items: stretch;
+    border-width: 0;
+    border-style: solid;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    margin: 0;
+    padding: 0;
+    position: relative;
+    z-index: 0;
+
+    /* fix flexbox bugs */
+    min-height: 0;
+    min-width: 0;
+}

packages/wonder-blocks-core/src/components/view.tsx

@@ -1,30 +1,11 @@
 // WARNING: If you modify this file you must update view.js.flow.
 import * as React from "react";
-import {StyleSheet} from "aphrodite";
 
 import {useMemo} from "react";
 import addStyle from "../util/add-style";
 
 import type {TextViewSharedProps} from "../util/types";
-
-const styles = StyleSheet.create({
-    // https://github.com/facebook/css-layout#default-values
-    default: {
-        alignItems: "stretch",
-        borderWidth: 0,
-        borderStyle: "solid",
-        boxSizing: "border-box",
-        display: "flex",
-        flexDirection: "column",
-        margin: 0,
-        padding: 0,
-        position: "relative",
-        zIndex: 0,
-        // fix flexbox bugs
-        minHeight: 0,
-        minWidth: 0,
-    },
-});
+import styles from "./view.module.css";
 
 type Props = TextViewSharedProps & {
     /**
@@ -42,7 +23,7 @@ type Props = TextViewSharedProps & {
  * manners:
  *
  * - An inline style object
- * - An `aphrodite` StyleSheet style
+ * - CSS module classes
  * - An array combining the above
  *
  * `View` sets the following defaults:

packages/wonder-blocks-core/src/util/add-style.tsx

@@ -37,19 +37,38 @@ export default function addStyle<
         const reset =
             typeof Component === "string" ? overrides[Component] : null;
 
-        const {className: aphroditeClassName, style: inlineStyles} =
-            processStyleList([reset, defaultStyle, style]);
+        // Check if defaultStyle is a string (CSS module class) or StyleType
+        if (typeof defaultStyle === "string") {
+            // CSS module case
+            const {className: aphroditeClassName, style: inlineStyles} =
+                processStyleList([reset, style]);
 
-        return (
-            <Component
-                {...otherProps}
-                ref={ref}
-                className={[aphroditeClassName, className]
-                    .filter(Boolean)
-                    .join(" ")}
-                style={inlineStyles}
-            />
-        );
+            return (
+                <Component
+                    {...otherProps}
+                    ref={ref}
+                    className={[defaultStyle, aphroditeClassName, className]
+                        .filter(Boolean)
+                        .join(" ")}
+                    style={inlineStyles}
+                />
+            );
+        } else {
+            // Aphrodite case (legacy)
+            const {className: aphroditeClassName, style: inlineStyles} =
+                processStyleList([reset, defaultStyle, style]);
+
+            return (
+                <Component
+                    {...otherProps}
+                    ref={ref}
+                    className={[aphroditeClassName, className]
+                        .filter(Boolean)
+                        .join(" ")}
+                    style={inlineStyles}
+                />
+            );
+        }
     });
 }
 

packages/wonder-blocks-core/src/util/types.ts

@@ -8,8 +8,9 @@ type NestedArray<T> = ReadonlyArray<T | NestedArray<T>>;
 type Falsy = false | 0 | null | undefined;
 export type StyleType =
     | CSSProperties
+    | string
     | Falsy
-    | NestedArray<CSSProperties | Falsy>;
+    | NestedArray<CSSProperties | Falsy | string>;
 
 export type AriaProps = Readonly<AriaAttributes> &
     Readonly<{

packages/wonder-blocks-core/src/util/util.ts

@@ -28,6 +28,7 @@ function flatten(list?: StyleType): Array<CSSProperties> {
 
 export function processStyleList(style?: StyleType): StyledExport {
     const stylesheetStyles: Array<any> = [];
+    const classNameStyles: Array<string> = [];
     const inlineStyles: Array<any | Record<any, any>> = [];
 
     if (!style) {
@@ -65,6 +66,8 @@ export function processStyleList(style?: StyleType): StyledExport {
             } else {
                 stylesheetStyles.push(child);
             }
+        } else if (typeof child === "string") {
+            classNameStyles.push(child);
         } else {
             inlineStyles.push(child);
         }
@@ -86,6 +89,6 @@ export function processStyleList(style?: StyleType): StyledExport {
 
     return {
         style: shouldInlineStyles ? inlineStylesObject : {},
-        className: css(...stylesheetStyles),
+        className: [css(...stylesheetStyles), ...classNameStyles].join(" "),
     };
 }