Include tokens.css as part of the wb-tokens exports

Khan · May 16, 2024 · 6e0558c · 6e0558c
1 parent d1df756
commit 6e0558c
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 96 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -26,9 +26,11 @@ const config: StorybookConfig = {
         const mergedConfig = mergeConfig(config, {
             resolve: {
                 // Allow us to detect changes from local wonder-blocks packages.
+                // NOTE: Only applies to ts(x) files to avoid conflicts with
+                // the tokens.css import.
                 alias: [
                     {
-                        find: /^@khanacademy\/wonder-blocks(-.*)$/,
+                        find: /^@khanacademy\/wonder-blocks(-.*).(ts|tsx)$/,
                         replacement: resolve(
                             __dirname,
                             "../packages/wonder-blocks$1/src",

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -7,6 +7,8 @@ import {ThemeSwitcherContext} from "@khanacademy/wonder-blocks-theming";
 import {RenderStateRoot} from "../packages/wonder-blocks-core/src";
 import {Preview} from "@storybook/react";
 
+import "@khanacademy/wonder-blocks-tokens/css/tokens.css";
+
 /**
  * WB Official breakpoints
  * @see https://khanacademy.atlassian.net/wiki/spaces/WB/pages/2099970518/Layout+Breakpoints

diff --git a/packages/wonder-blocks-form/src/components/text-field.tsx b/packages/wonder-blocks-form/src/components/text-field.tsx
@@ -4,10 +4,10 @@ import * as React from "react";
 // import {mix, color, spacing} from "@khanacademy/wonder-blocks-tokens";
 // import {addStyle} from "@khanacademy/wonder-blocks-core";
 // import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
-import styles from "./text-field.module.css";
-
 import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
 
+import styles from "./text-field.module.css";
+
 export type TextFieldType = "text" | "password" | "email" | "number" | "tel";
 
 type WithForwardRef = {

diff --git a/packages/wonder-blocks-tokens/src/tokens.css → packages/wonder-blocks-tokens/css/tokens.css b/packages/wonder-blocks-tokens/src/tokens.css → packages/wonder-blocks-tokens/css/tokens.css
diff --git a/packages/wonder-blocks-tokens/package.json b/packages/wonder-blocks-tokens/package.json
@@ -2,6 +2,13 @@
     "name": "@khanacademy/wonder-blocks-tokens",
     "version": "1.3.0",
     "description": "Core primitive design tokens for Web Wonder Blocks",
+    "exports": {
+        ".": {
+            "import": "./dist/es/index.js",
+            "require": "./dist/index.js"
+        },
+        "./css/*": "./css/*"
+    },
     "main": "dist/index.js",
     "module": "dist/es/index.js",
     "types": "dist/index.d.ts",

diff --git a/static/sb-styles/preview.css b/static/sb-styles/preview.css
@@ -1,5 +1,3 @@
-@import "tokens.css";
-
 /**
  * Overrides for the Storybook preview iframe.
  */

diff --git a/static/sb-styles/tokens.css b/static/sb-styles/tokens.css