build!: use rollup (#1555)

* build: use rollup to build JS and styles

- To better support server-side rendering
- By producing a single .css file
- Instead of delegating css module processing to consuming apps

* refactor(rollup): remove spritemap and commonjs from config

* build: remove styles build from main build command

* refactor: import css variables into index

* build(rollup): mark dependencies as external (#1558)

* build(rollup): mark dependencies as external

* build(rollup): use node resolve plugin

* docs(build): explain rollup external option

* build!: generate cjs and type declarations (#1572)

* build: generate cjs and esm, separate types build

* build: add sourcemaps and add declaration back to tsconfig

* build: cjs and js in the same output

* build: add conditional exports

* build: remove build types script

* refactor: revert tw config to ts

* build: bump target to es2018 and grep for tslib

* chore(release): 12.0.0-alpha.0

* refactor: dry css exports

* build!: remove some tokens from build (#1581)

* refactor: remove references to unexported files

* build!: no longer include some tokens in build

* refactor: remove unused commonjs plugin (#1582)

* chore(release): 12.0.0-alpha.1

* refactor: use named import for clsx

* chore: remove rollup plugin commonjs

* Revert "refactor: use named import for clsx"

This reverts commit d58182b.

* docs: explicate tslib grep

* fix: no need for ts expect error

---------

Co-authored-by: Andrew Huth <[email protected]>

.eslintrc

@@ -22,7 +22,7 @@
         "devDependencies": [
           "src/**/*.test.{ts,tsx}",
           "src/**/*.stories.{ts,tsx}",
-          "**/*.config.{js,ts}",
+          "**/*.config.{js,ts,mjs}",
           "**/*.setup.{js,ts}",
           ".storybook/**",
           "scripts/stylelint/**",

.github/workflows/test.yml

@@ -41,6 +41,16 @@ jobs:
       - name: Build Dist 🔧
         run: yarn run build
 
+      # Rollup's TS plugin can include an implicit dependency on tslib that we don't want. It shouldn't be
+      # included in builds if our tsconfig.json configures "target" properly, which this check ensures.
+      - name: Check for "tslib" in build
+        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:

CHANGELOG.md

@@ -2,6 +2,35 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [12.0.0-alpha.1](https://github.com/chanzuckerberg/edu-design-system/compare/v12.0.0-alpha.0...v12.0.0-alpha.1) (2023-04-04)
+
+## [12.0.0-alpha.0](https://github.com/chanzuckerberg/edu-design-system/compare/v11.0.0...v12.0.0-alpha.0) (2023-04-04)
+
+
+### ⚠ BREAKING CHANGES
+
+* generate cjs and type declarations (#1572)
+
+### Features
+
+* add utility types to enforce either label or aria-label ([#1554](https://github.com/chanzuckerberg/edu-design-system/issues/1554)) ([2313063](https://github.com/chanzuckerberg/edu-design-system/commit/2313063f10944c90a38df85fd512717acd70ee7e))
+* **Button:** use LoadingIndicator for loading state ([#1552](https://github.com/chanzuckerberg/edu-design-system/issues/1552)) ([2406d01](https://github.com/chanzuckerberg/edu-design-system/commit/2406d019c5010fbdd74049f53f12fdc739abb51a))
+* **Card:** add card variant updates ([#1565](https://github.com/chanzuckerberg/edu-design-system/issues/1565)) ([87dbef7](https://github.com/chanzuckerberg/edu-design-system/commit/87dbef72d79f6aedec0d2b6a56c69429b5abafa7))
+* **Menu:** update centering with plain button ([#1566](https://github.com/chanzuckerberg/edu-design-system/issues/1566)) ([d4ddfd5](https://github.com/chanzuckerberg/edu-design-system/commit/d4ddfd5c0d9f476e799c7face94467643bd79587))
+* **Slider:** add alignment styles and recipes ([#1567](https://github.com/chanzuckerberg/edu-design-system/issues/1567)) ([900d102](https://github.com/chanzuckerberg/edu-design-system/commit/900d102a4af36ef4b466c3c0a66864a14b4c3e1e))
+* **slider:** add tooltip ([#1571](https://github.com/chanzuckerberg/edu-design-system/issues/1571)) ([fa7c5a2](https://github.com/chanzuckerberg/edu-design-system/commit/fa7c5a2f212b70a31e0812c2cab78d55a0245f54))
+
+
+### Bug Fixes
+
+* include tailwind config in package ([#1576](https://github.com/chanzuckerberg/edu-design-system/issues/1576)) ([4f66b35](https://github.com/chanzuckerberg/edu-design-system/commit/4f66b352a2225a20895f818fc4ea57642745cd7a))
+* **InputField:** apply bottom margin only with fieldNote ([#1573](https://github.com/chanzuckerberg/edu-design-system/issues/1573)) ([430522f](https://github.com/chanzuckerberg/edu-design-system/commit/430522fb0773505a1b643c0c82c02c100fe49961))
+
+
+### build
+
+* generate cjs and type declarations ([#1572](https://github.com/chanzuckerberg/edu-design-system/issues/1572)) ([5efbba3](https://github.com/chanzuckerberg/edu-design-system/commit/5efbba3a84efada0b8f043d78e037030e018987c))
+
 ### [11.1.1](https://github.com/chanzuckerberg/edu-design-system/compare/v11.1.0...v11.1.1) (2023-04-03)
 
 

README.md

@@ -16,12 +16,12 @@ npm install --save @chanzuckerberg/eds
 yarn add @chanzuckerberg/eds
 ```
 
-Import the CSS tokens somewhere in your app, e.g. an `init.ts` or `app.ts` file:
+Import the EDS stylesheet and tokens somewhere in your app, e.g. an `init.ts` or `app.ts` file:
 
 ```js
-import '@chanzuckerberg/eds/lib/tokens/css/variables.css';
+import '@chanzuckerberg/eds/index.css';
 // optionally import EDS font faces
-// import '@chanzuckerberg/eds/lib/tokens/fonts.css';
+// import '@chanzuckerberg/eds/fonts.css';
 ```
 
 EDS components are designed for the Graphik font, but you may use other fonts by re-defining the `--eds-font-family-primary` CSS property. We also surface an `--eds-font-size-base` property to set your base `rem` font size, eg:

package.json

@@ -1,13 +1,22 @@
 {
   "name": "@chanzuckerberg/eds",
-  "version": "11.1.1",
+  "version": "12.0.0-alpha.1",
   "description": "The React-powered design system library for Chan Zuckerberg Initiative education web applications",
   "author": "CZI <[email protected]>",
   "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": "./lib/index.css",
+    "./fonts.css": "./lib/tokens/fonts.css",
+    "./tailwind.config": "./tailwind.config.ts"
+  },
+  "types": "lib/index.d.ts",
   "sideEffects": [
-    "lib/tokens/css/variables.css",
+    "lib/index.css",
     "lib/tokens/fonts.css"
   ],
   "publishConfig": {
@@ -25,15 +34,14 @@
     "tailwind.config.*"
   ],
   "scripts": {
-    "build": "yarn build:clean && yarn build:tokens && yarn build:js && yarn build:styles && yarn copy-fonts-to-lib",
+    "build": "yarn build:clean && yarn build:tokens && yarn build:js && yarn copy-fonts-to-lib",
     "build:clean": "rm -rf lib/",
-    "build:tokens": "rm -rf src/tokens-dist/ && node ./style-dictionary.config.js && yarn copy-tokens-to-lib && yarn prettier-tokens-dist",
-    "build:js": "tsc --project tsconfig.build.json",
+    "build:tokens": "rm -rf src/tokens-dist/ && node ./style-dictionary.config.js && yarn prettier-tokens-dist",
+    "build:js": "rollup --config",
     "build:storybook": "build-storybook -o storybook-static -s src/design-tokens/tier-1-definitions/fonts",
     "build:styles": "postcss \"src/components/**/*.css\" --dir lib/ --base src/ --verbose",
     "chromatic": "chromatic",
     "copy-fonts-to-lib": "copyfiles -u 3 src/design-tokens/tier-1-definitions/fonts.css src/design-tokens/tier-1-definitions/fonts/**/* lib/tokens",
-    "copy-tokens-to-lib": "copyfiles -u 2 src/tokens-dist/**/* lib/tokens",
     "create-component": "plop",
     "deploy:docs": "storybook-to-ghpages --ci",
     "lint": "yarn run lint:styles && yarn run lint:scripts",
@@ -90,8 +98,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.1",
     "@chanzuckerberg/eslint-config-edu-js": "^1.1.0",
@@ -103,6 +109,8 @@
     "@commitlint/cli": "^17.6.1",
     "@commitlint/config-conventional": "^17.6.1",
     "@geometricpanda/storybook-addon-badges": "^1.1.1",
+    "@rollup/plugin-node-resolve": "^15.0.1",
+    "@rollup/plugin-typescript": "^11.0.0",
     "@size-limit/file": "^8.2.4",
     "@storybook/addon-a11y": "^6.5.16",
     "@storybook/addon-docs": "^6.5.16",
@@ -154,6 +162,8 @@
     "prettier": "^2.8.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "rollup": "^3.20.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "size-limit": "^8.2.4",
     "snake-case": "^3.0.4",
     "standard-version": "^9.5.0",

rollup.config.mjs

@@ -0,0 +1,43 @@
+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',
+      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)
+   * will install the deps listed in EDS package.json and hence won't need to be included in the bundle.
+   */
+  external: [/node_modules/],
+  plugins: [
+    nodeResolve(),
+    postcss({
+      extract: true,
+      modules: true,
+    }),
+    typescript({
+      tsconfig: 'tsconfig.build.json',
+    }),
+  ],
+};

src/components/Icon/Icon.stories.tsx

@@ -34,10 +34,8 @@ type Args = React.ComponentProps<typeof Icon>;
 export const Default: StoryObj<Args> = {
   render: ({ name, color, ...rest }) => {
     // ESlint can't tell if ColorTokens[color] is valid or not, since it's computed at runtime.
-    /* eslint-disable import/namespace */
-    // @ts-expect-error cannot check type compliance on runtime imports
+    /* eslint-disable-next-line import/namespace */
     const computedColor = color && ColorTokens[color];
-    /* eslint-enable import/namespace */
     return <Icon {...rest} color={computedColor} name={name} />;
   },
   args: {

src/components/Icon/Icon.tsx

@@ -29,8 +29,7 @@ interface IconPropsBase {
    * The SVG Color, expects a valid css color (hex, rgb, etc.).
    *
    * Recommendation: if `currentColor` isn't sufficient,
-   * use `EdsThemeColor` tokens from
-   * `@chanzuckerberg/eds/lib/tokens/colors.ts`
+   * style the fill with Tailwind: https://tailwindcss.com/docs/fill
    */
   color?: string;
   /**

src/index.ts

@@ -1,3 +1,6 @@
+// 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';
 export { default as Avatar } from './components/Avatar';
 export { default as Badge } from './components/Badge';