feat(esm): wip

krisantrobus · krisantrobus · commit 6f911f6fedfc · 2025-03-19T11:27:45.000-05:00
diff --git a/.jest/globals/TestTheme.cjs b/.jest/globals/TestTheme.cjs
diff --git a/jest.config.cjs b/jest.config.cjs
@@ -1,4 +1,4 @@
-const TestTheme = require("./.jest/globals/TestTheme");
+const TestTheme = require("./.jest/globals/TestTheme.cjs");
 
 module.exports = {
   globals: {
diff --git a/packages/paste-design-tokens/package.json b/packages/paste-design-tokens/package.json
@@ -13,36 +13,42 @@
     },
     "./dist/themes/dark/tokens.es6": "./dist/themes/dark/tokens.es6.js",
     "./dist/themes/dark/tokens.common": "./dist/themes/dark/tokens.common.js",
+    "./dist/themes/dark/tokens.common.js": "./dist/themes/dark/tokens.common.js",
     "./dist/themes/dark/tokens.raw.json": "./dist/themes/dark/tokens.raw.json",
     "./dist/themes/dark/tokens.generic": "./dist/themes/dark/tokens.generic.js",
     "./dist/themes/dark/tokens.data-theme.css": "./dist/themes/dark/tokens.data-theme.css",
     "./dist/themes/dark/tokens.custom-porperties.css": "./dist/themes/dark/tokens.custom-porperties.css",
     "./dist/themes/twilio/tokens.es6": "./dist/themes/twilio/tokens.es6.js",
     "./dist/themes/twilio/tokens.common": "./dist/themes/twilio/tokens.common.js",
+    "./dist/themes/twilio/tokens.common.js": "./dist/themes/twilio/tokens.common.js",
     "./dist/themes/twilio/tokens.raw.json": "./dist/themes/twilio/tokens.raw.json",
     "./dist/themes/twilio/tokens.generic": "./dist/themes/twilio/tokens.generic.js",
     "./dist/themes/twilio/tokens.data-theme.css": "./dist/themes/twilio/tokens.data-theme.css",
     "./dist/themes/twilio/tokens.custom-porperties.css": "./dist/themes/twilio/tokens.custom-porperties.css",
     "./dist/themes/twilio-dark/tokens.es6": "./dist/themes/twilio-dark/tokens.es6.js",
     "./dist/themes/twilio-dark/tokens.common": "./dist/themes/twilio-dark/tokens.common.js",
+    "./dist/themes/twilio-dark/tokens.common.js": "./dist/themes/twilio-dark/tokens.common.js",
     "./dist/themes/twilio-dark/tokens.raw.json": "./dist/themes/twilio-dark/tokens.raw.json",
     "./dist/themes/twilio-dark/tokens.generic": "./dist/themes/twilio-dark/tokens.generic.js",
     "./dist/themes/twilio-dark/tokens.data-theme.css": "./dist/themes/twilio-dark/tokens.data-theme.css",
     "./dist/themes/twilio-dark/tokens.custom-porperties.css": "./dist/themes/twilio-dark/tokens.custom-porperties.css",
     "./dist/themes/sendgrid/tokens.common": "./dist/themes/sendgrid/tokens.common.js",
+    "./dist/themes/sendgrid/tokens.common.js": "./dist/themes/sendgrid/tokens.common.js",
     "./dist/themes/sendgrid/tokens.es6": "./dist/themes/sendgrid/tokens.es6.js",
     "./dist/themes/sendgrid/tokens.raw.json": "./dist/themes/sendgrid/tokens.raw.json",
     "./dist/themes/sendgrid/tokens.generic": "./dist/themes/sendgrid/tokens.generic.js",
     "./dist/themes/sendgrid/tokens.data-theme.css": "./dist/themes/sendgrid/tokens.data-theme.css",
     "./dist/themes/sendgrid/tokens.custom-properties.css": "./dist/themes/sendgrid/tokens.custom-properties.css",
     "./dist/themes/evergreen/tokens.es6": "./dist/themes/evergreen/tokens.es6.js",
     "./dist/themes/evergreen/tokens.common": "./dist/themes/evergreen/tokens.common.js",
+    "./dist/themes/evergreen/tokens.common.js": "./dist/themes/evergreen/tokens.common.js",
     "./dist/themes/evergreen/tokens.raw.json": "./dist/themes/evergreen/tokens.raw.json",
     "./dist/themes/evergreen/tokens.generic": "./dist/themes/evergreen/tokens.generic.js",
     "./dist/themes/evergreen/tokens.data-theme.css": "./dist/themes/evergreen/tokens.data-theme.css",
     "./dist/themes/evergreen/tokens.custom-properties.css": "./dist/themes/evergreen/tokens.custom-properties.css",
     "./dist/tokens.es6": "./dist/tokens.es6.js",
     "./dist/tokens.common": "./dist/tokens.common.js",
+    "./dist/tokens.common.js": "./dist/tokens.common.js",
     "./dist/tokens.raw.json": "./dist/tokens.raw.json",
     "./dist/tokens.generic": "./dist/tokens.generic.js"
   },
diff --git a/packages/paste-libraries/styling/build.cjs b/packages/paste-libraries/styling/build.cjs
diff --git a/packages/paste-libraries/styling/package.json b/packages/paste-libraries/styling/package.json
@@ -7,9 +7,16 @@
   "author": "Twilio Inc.",
   "license": "MIT",
   "main:dev": "src/index.tsx",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -18,8 +25,8 @@
     "dist"
   ],
   "scripts": {
-    "build": "yarn clean && NODE_ENV=production node build.js && tsc",
-    "build:js": "NODE_ENV=development node build.js",
+    "build": "yarn clean && NODE_ENV=production node build.cjs && tsc",
+    "build:js": "NODE_ENV=development node build.cjs",
     "clean": "rm -rf ./dist",
     "tsc": "tsc && cp ./dist/index.d.ts ./dist/index.es.d.ts"
   },
diff --git a/packages/paste-theme/package.json b/packages/paste-theme/package.json
@@ -39,6 +39,14 @@
     "react": "^16.8.6 || ^17.0.2 || ^18.0.0",
     "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0"
   },
+  "bundleDependencies": [
+    "@twilio-paste/design-tokens/dist/themes/dark/tokens.es6.js",
+    "@twilio-paste/design-tokens/dist/themes/twilio/tokens.es6.js",
+    "@twilio-paste/design-tokens/dist/themes/twilio-dark/tokens.es6.js",
+    "@twilio-paste/design-tokens/dist/themes/sendgrid/tokens.es6.js",
+    "@twilio-paste/design-tokens/dist/themes/evergreen/tokens.es6.js",
+    "@twilio-paste/design-tokens/dist/tokens.es6.js"
+  ],
   "devDependencies": {
     "@twilio-paste/animation-library": "^2.0.0",
     "@twilio-paste/color-contrast-utils": "^5.0.0",
diff --git a/packages/paste-theme/src/generateThemeFromTokens.ts b/packages/paste-theme/src/generateThemeFromTokens.ts
@@ -1,4 +1,4 @@
-import { sizings as fallbackSizings } from "@twilio-paste/design-tokens/dist/themes/twilio/tokens.es6";
+import { sizings as fallbackSizings } from "@twilio-paste/design-tokens/dist/themes/twilio/tokens.es6.js";
 
 import type {
   BackgroundColorsKeys,
@@ -59,7 +59,7 @@ export const generateThemeFromTokens = ({
   zIndices,
 }: GenerateThemeFromTokensArgs): GenericThemeShape => {
   // breakpoints need rm not CSS variables so need to use a fallback for the default sizings
-  const sizingsForBreakpoints = sizings.size0.includes("var") ? fallbackSizings : sizings;
+  const sizingsForBreakpoints = sizings?.size0.includes("var") ? fallbackSizings : sizings;
   // default breakpoints
   const breakpoints = [
     remToPx(sizingsForBreakpoints.size40, "string"),
diff --git a/packages/paste-theme/src/styles/fonts.ts b/packages/paste-theme/src/styles/fonts.ts
@@ -1,6 +1,6 @@
-import { EmotionCSS } from "@twilio-paste/styling-library";
+import { css } from "@twilio-paste/styling-library";
 
-export const pasteFonts = EmotionCSS`
+export const pasteFonts = css`
 /* -------------------------------------------------------
 Variable font.
 */
diff --git a/packages/paste-theme/src/themes/css-variables/index.ts b/packages/paste-theme/src/themes/css-variables/index.ts
@@ -15,7 +15,7 @@ import {
   spacings,
   textColors,
   zIndices,
-} from "@twilio-paste/design-tokens/dist/tokens.es6";
+} from "@twilio-paste/design-tokens/dist/tokens.es6.js";
 
 import { GenerateThemeFromTokensArgs, generateThemeFromTokens } from "../../generateThemeFromTokens";
 
diff --git a/packages/paste-theme/src/themes/dark/index.ts b/packages/paste-theme/src/themes/dark/index.ts
@@ -15,7 +15,7 @@ import {
   spacings,
   textColors,
   zIndices,
-} from "@twilio-paste/design-tokens/dist/themes/dark/tokens.es6";
+} from "@twilio-paste/design-tokens/dist/themes/dark/tokens.es6.js";
 
 import { generateThemeFromTokens } from "../../generateThemeFromTokens";
 
diff --git a/packages/paste-theme/src/themes/evergreen/index.ts b/packages/paste-theme/src/themes/evergreen/index.ts
@@ -15,7 +15,7 @@ import {
   spacings,
   textColors,
   zIndices,
-} from "@twilio-paste/design-tokens/dist/themes/evergreen/tokens.es6";
+} from "@twilio-paste/design-tokens/dist/themes/evergreen/tokens.es6.js";
 
 import { generateThemeFromTokens } from "../../generateThemeFromTokens";
 
diff --git a/packages/paste-theme/src/themes/sendgrid/index.ts b/packages/paste-theme/src/themes/sendgrid/index.ts
@@ -15,7 +15,7 @@ import {
   spacings,
   textColors,
   zIndices,
-} from "@twilio-paste/design-tokens/dist/themes/sendgrid/tokens.es6";
+} from "@twilio-paste/design-tokens/dist/themes/sendgrid/tokens.es6.js";
 
 import { generateThemeFromTokens } from "../../generateThemeFromTokens";
 
diff --git a/packages/paste-theme/src/themes/twilio-dark/index.ts b/packages/paste-theme/src/themes/twilio-dark/index.ts
@@ -15,7 +15,7 @@ import {
   spacings,
   textColors,
   zIndices,
-} from "@twilio-paste/design-tokens/dist/themes/twilio-dark/tokens.es6";
+} from "@twilio-paste/design-tokens/dist/themes/twilio-dark/tokens.es6.js";
 
 import { generateThemeFromTokens } from "../../generateThemeFromTokens";
 
diff --git a/packages/paste-theme/src/themes/twilio/index.ts b/packages/paste-theme/src/themes/twilio/index.ts
@@ -15,7 +15,7 @@ import {
   spacings,
   textColors,
   zIndices,
-} from "@twilio-paste/design-tokens/dist/themes/twilio/tokens.es6";
+} from "@twilio-paste/design-tokens/dist/themes/twilio/tokens.es6.js";
 
 import { generateThemeFromTokens } from "../../generateThemeFromTokens";
 
diff --git a/tools/build/esbuild.cjs b/tools/build/esbuild.cjs
@@ -32,7 +32,10 @@ async function build(packageJson) {
   const outFileCJS = packageJson.main;
   const outFileESM = packageJson.module;
   // Things we don't want to bundle
-  const external = getWildcardExternalPeers(packageJson.peerDependencies);
+  const external = [
+    ...getWildcardExternalPeers(packageJson.peerDependencies),
+    ...(packageJson.bundleDependencies || []),
+  ];
 
   // ESbuild config
   const config = {
@@ -95,8 +98,9 @@ async function build(packageJson) {
       minifySyntax: true,
       format: "esm",
       outfile: outFileESM,
+      bundle: true,
       // Needed to fix a bug with replacing require with import statements https://github.com/evanw/esbuild/issues/566
-      plugins: [esbuildPluginVersionInjector(versionInjectorConfig)],
+      plugins: [PasteExternalCjsToEsmPlugin(external), esbuildPluginVersionInjector(versionInjectorConfig)],
     })
     .catch((error) => {
       console.error(error);
@@ -124,6 +128,7 @@ async function build(packageJson) {
       ...config,
       format: "esm",
       outfile: outFileESM.replace(".js", ".debug.js"),
+      bundle: true,
       // Needed to fix a bug with replacing require with import statements https://github.com/evanw/esbuild/issues/566
       plugins: [PasteExternalCjsToEsmPlugin(external), esbuildPluginVersionInjector(versionInjectorConfig)],
     })
diff --git a/tsconfig.json b/tsconfig.json
@@ -9,7 +9,7 @@
     "isolatedModules": true,
     "jsx": "react",
     "lib": ["ES2022", "dom", "dom.iterable"],
-    "module": "ES2022",
+    "module": "ES6",
     "moduleResolution": "node",
     "noEmitOnError": false,
     "noImplicitAny": true,

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-const TestTheme = require("./.jest/globals/TestTheme");`
	`1`	`+const TestTheme = require("./.jest/globals/TestTheme.cjs");`
`2`	`2`
`3`	`3`	`module.exports = {`
`4`	`4`	`globals: {`