build!: generate cjs and type declarations

.github/workflows/test.yml

@@ -41,6 +41,14 @@ jobs:
       - name: Build Dist 🔧
         run: yarn run build
 
+      - name: Check for "tslib" in build # tslib is peer dep of rollup ts plugin, but we're not including tslib due to lack of need
+        run: |
+          if grep -r '--include=*.'{cjs,js} 'tslib' ./lib -q
+          then
+            echo "tslib found in lib"
+            exit 1
+          fi
+
   storybook:
     runs-on: ubuntu-latest
     steps:

package.json

@@ -5,7 +5,24 @@
   "author": "CZI <edu-frontend-infra@chanzuckerberg.com>",
   "homepage": "https://github.com/chanzuckerberg/edu-design-system",
   "license": "MIT",
-  "main": "lib/index.js",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    },
+    "./index.css": {
+      "import": "./lib/index.css",
+      "require": "./lib/index.css"
+    },
+    "./fonts.css": {
+      "import": "./lib/tokens/fonts.css",
+      "require": "./lib/tokens/fonts.css"
+    },
+    "./tailwind.config": {
+      "import": "./tailwind.config.ts"
+    }
+  },
+  "types": "lib/index.d.ts",
   "sideEffects": [
     "lib/tokens/css/variables.css",
     "lib/tokens/fonts.css"
@@ -22,7 +39,7 @@
   },
   "files": [
     "/lib",
-    "tailwind.config.js"
+    "tailwind.config.mjs"
   ],
   "scripts": {
     "build": "yarn build:clean && yarn build:tokens && yarn build:js && yarn copy-fonts-to-lib",
@@ -90,8 +107,6 @@
     "react-popper": "^2.3.0",
     "react-portal": "^4.2.2"
   },
-  "entry": "lib/index.js",
-  "types": "lib/index.d.ts",
   "devDependencies": {
     "@chanzuckerberg/axe-storybook-testing": "^6.3.0",
     "@chanzuckerberg/eslint-config-edu-js": "^1.0.3",

rollup.config.mjs

@@ -2,14 +2,28 @@ import { nodeResolve } from '@rollup/plugin-node-resolve';
 import typescript from '@rollup/plugin-typescript';
 import postcss from 'rollup-plugin-postcss';
 
+/**
+ * @type {import('rollup').RollupOptions}
+ */
 export default {
   input: 'src/index.ts',
-  output: {
-    dir: 'lib',
-    format: 'es',
-    preserveModules: true,
-    preserveModulesRoot: 'src',
-  },
+  output: [
+    {
+      dir: 'lib',
+      format: 'es',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+      sourcemap: true,
+    },
+    {
+      dir: 'lib',
+      format: 'cjs',
+      preserveModules: true,
+      preserveModulesRoot: 'src',
+      sourcemap: true,
+      entryFileNames: '[name].cjs',
+    },
+  ],
   /**
    * With the nodeResolve plugin, this marks all EDS node_modules as external, aka provided by the consumer.
    * Since EDS is not imported directly into a web <script>, package managers (such as npm or yarn)

src/index.ts

@@ -1,3 +1,4 @@
+// This brings the style tokens that are css custom variables into the built stylesheet so only one stylesheet for EDS has to be imported.
 import './tokens-dist/css/variables.css';
 
 export { default as Accordion } from './components/Accordion';

tsconfig.build.json

@@ -1,4 +1,4 @@
 {
   "extends": "./tsconfig",
-  "include": ["src/index.ts", "src/custom.d.ts"],
+  "include": ["src/index.ts", "src/custom.d.ts"]
 }

tsconfig.json

@@ -4,17 +4,17 @@
     "allowJs": false,
     "allowSyntheticDefaultImports": true,
     "declaration": true,
+    "declarationDir": "lib",
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
     "lib": ["es5", "es6", "dom"],
     "moduleResolution": "node",
     "noUnusedLocals": true,
-    "outDir": "lib",
     "resolveJsonModule": true,
     "skipLibCheck": true,
     "strict": true,
     "suppressImplicitAnyIndexErrors": true,
-    "target": "es6"
+    "target": "es2018"
   }
 }