Switch to using rollup directly for our builds (#3894)

CONTRIBUTING.md

@@ -27,7 +27,7 @@ The repo contains below packages under `/packages`
 
 1. Add the icon to the `packages/icons/src/SVG` folder. The icon should be named using kebab casing e.g. `icon-name.svg`.
 2. Navigate to `packages/icons` e.g. `cd packages/icons`.
-3. Run `yarn build` to build the icons.
+3. Run `yarn build:icons` to build the icons.
 4. Write a changeset using `yarn changeset`, this should have the format:
 
 ```md

declarations.d.ts

@@ -3,6 +3,11 @@ declare module "*.css" {
   export default content;
 }
 
+declare module "*?inline" {
+  const src: string;
+  export default src;
+}
+
 declare module "*.scss" {
   const content: Record<string, string>;
   export default content;

package.json

@@ -11,20 +11,9 @@
     "docs",
     "site"
   ],
-  "modular": {
-    "type": "root"
-  },
   "scripts": {
     "start": "yarn storybook",
-    "build": "yarn build:core && yarn build:lab && yarn build:icons && yarn build:countries && yarn build:theme && yarn build:data-grid && yarn build:ag-grid-theme && yarn build:window && yarn build:styles && yarn bundle:css",
-    "build:core": "modular build @salt-ds/core",
-    "build:icons": "modular build @salt-ds/icons",
-    "build:countries": "modular build @salt-ds/countries",
-    "build:lab": "modular build @salt-ds/lab",
-    "build:theme": "yarn workspace @salt-ds/theme build",
-    "build:data-grid": "modular build @salt-ds/data-grid",
-    "build:window": "modular build @salt-ds/window",
-    "build:styles": "modular build @salt-ds/styles",
+    "build": "yarn workspaces foreach --exclude @salt-ds/site -Apt run build && yarn bundle:css",
     "build:ag-grid-theme": "yarn workspace @salt-ds/ag-grid-theme build",
     "bundle:css": "yarn bundle:core:css && yarn bundle:lab:css && yarn copy:icon:css && yarn copy:countries:css",
     "bundle:core:css": "yarn workspace @salt-ds/core bundle:css",
@@ -44,7 +33,7 @@
     "lint:style:icon": "yarn stylelint -f verbose \"packages/icons/src/**/*.css\"",
     "lint:style:lab": "yarn stylelint -f verbose \"packages/lab/src/**/*.css\"",
     "lint:style:ag-theme": "yarn stylelint -f verbose \"packages/ag-grid-theme/css/**/*.css\"",
-    "storybook": "storybook dev -p 6006",
+    "storybook": "yarn storybook dev -p 6006",
     "build-storybook": "yarn build:ag-grid-theme && yarn bundle:css && storybook build --stats-json",
     "typecheck": "tsc --noEmit",
     "chromatic": "chromatic"
@@ -79,7 +68,6 @@
     "@tanstack/react-query": "^5.0.0",
     "@testing-library/cypress": "^10.0.0",
     "@testing-library/dom": "^10.0.0",
-    "@testing-library/react": "^16.0.0",
     "@types/no-scroll": "^2.1.0",
     "@types/node": "^20.0.0",
     "@types/react": "^18.3.3",
@@ -92,52 +80,46 @@
     "ag-grid-react": "^31.3.4",
     "axe-core": "^4.9.0",
     "chromatic": "^11.10.1",
-    "ci-info": "^3.3.1",
+    "ci-info": "^4.0.0",
     "clsx": "^2.0.0",
     "cypress": "^13.8.0",
     "cypress-axe": "^1.5.0",
     "cypress-real-events": "^1.12.0",
     "deepmerge": "^4.2.2",
     "dom-accessibility-api": "^0.7.0",
     "mockdate": "^3.0.5",
-    "modular-scripts": "patch:modular-scripts@npm:3.6.0#.yarn/patches/modular-scripts-npm-3.6.0-d967962075.patch",
     "msw": "^2.3.5",
     "msw-storybook-addon": "^2.0.3",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-docgen-typescript": "2.2.2",
     "react-dom": "^18.3.1",
     "rifm": "^0.12.0",
-    "sass": "^1.52.3",
     "storybook": "^8.3.0",
     "stylelint": "^16.0.0",
     "typescript": "4.6.4",
-    "vite": "^4.5.5",
+    "vite": "^5.0.0",
     "vite-plugin-istanbul": "^6.0.0",
     "vite-tsconfig-paths": "^4.2.0",
     "vitest": "^2.0.0",
-    "webpack": "5.94.0",
     "yup": "^1.0.2"
   },
   "resolutions": {
     "@changesets/assemble-release-plan@npm:^6.0.3": "patch:@changesets/assemble-release-plan@npm%3A6.0.3#~/.yarn/patches/@changesets-assemble-release-plan-npm-6.0.3-29726de363.patch",
     "@salt-ds/lab": "workspace:*",
-    "modular-scripts/rollup": "2.79.1",
     "next": "^14.0.0",
-    "webpack-dev-server": "4.9.3",
-    "webpack": "5.94.0",
-    "recursive-readdir": "2.2.3",
+    "whatwg-url": "^14.0.0",
     "@joshwooding/vite-plugin-react-docgen-typescript": "0.4.0"
   },
   "browserslist": {
     "production": [
-      "chrome 79",
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+      "chrome >= 86",
+      "firefox >= 86",
+      "edge >= 85",
+      "iOS >= 15.4",
+      "safari >= 15.4"
     ],
     "development": [
-      "chrome 79",
       "last 1 chrome version",
       "last 1 firefox version",
       "last 1 safari version"
@@ -146,5 +128,16 @@
   "packageManager": "[email protected]",
   "msw": {
     "workerDirectory": "docs/public"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "browserslist-to-esbuild": "^2.1.1",
+    "execa": "^9.0.0",
+    "get-tsconfig": "^4.7.5",
+    "rollup": "^4.24.2",
+    "rollup-plugin-esbuild": "^6.1.1",
+    "rollup-plugin-postcss": "^4.0.2"
   }
 }

packages/ag-grid-theme/scripts/build.mjs

@@ -1,45 +1,60 @@
-import fs from "node:fs";
 import path from "node:path";
 import { argv } from "node:process";
-import { fileURLToPath } from "node:url";
 import { deleteSync } from "del";
 import esbuild from "esbuild";
+import fs from "fs-extra";
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const buildFolder = path.join(__dirname, "../../../dist/salt-ds-ag-grid-theme");
+const FILES_TO_COPY = ["README.md", "LICENSE", "CHANGELOG.md", "package.json"];
+
+const cwd = process.cwd();
+const packageJson = (
+  await import(path.join("file://", cwd, "package.json"), {
+    with: { type: "json" },
+  })
+).default;
+const buildFolder = packageJson.publishConfig.directory;
+const packageName = packageJson.name;
+
+console.log(`Building ${packageName}`);
 
 deleteSync([buildFolder], { force: true });
 
-esbuild
-  .build({
-    absWorkingDir: path.resolve(__dirname, ".."),
-    entryPoints: ["salt-ag-theme.css"],
-    assetNames: "[dir]/[name]",
-    outdir: buildFolder,
-    loader: {
-      ".woff": "file",
-    },
-    write: true,
-    bundle: true,
-    logLevel: "info",
-    watch: argv.includes("--watch"),
-  })
-  .then(() => {
-    // File destination.txt will be created or overwritten by default.
-    fs.copyFile(
-      path.resolve(__dirname, "../package.json"),
-      path.join(buildFolder, "package.json"),
-      (err) => {
-        if (err) throw err;
-        console.log(
-          `${path.relative(
-            process.cwd(),
-            path.resolve(__dirname, "../package.json"),
-          )} copied to ${path.relative(
-            process.cwd(),
-            path.join(buildFolder, "package.json"),
-          )}`,
-        );
-      },
+const context = await esbuild.context({
+  absWorkingDir: cwd,
+  entryPoints: ["salt-ag-theme.css"],
+  assetNames: "[dir]/[name]",
+  outdir: buildFolder,
+  loader: {
+    ".woff": "file",
+  },
+  write: true,
+  bundle: true,
+  logLevel: "info",
+});
+
+if (argv.includes("--watch")) {
+  await context.watch();
+} else {
+  await context.rebuild();
+  await context.dispose();
+}
+
+for (const file of FILES_TO_COPY) {
+  const from = path.join(cwd, file);
+  const to = path.join(buildFolder, file);
+  try {
+    await fs.copyFile(from, to);
+    console.log(
+      `${path.relative(process.cwd(), from)} copied to ${path.relative(
+        process.cwd(),
+        to,
+      )}`,
     );
-  });
+  } catch (error) {
+    if (error.code !== "ENOENT") {
+      throw error;
+    }
+  }
+}
+
+console.log(`Built ${packageName} into ${buildFolder}`);

packages/core/package.json

@@ -12,6 +12,9 @@
   "sideEffects": false,
   "dependencies": {
     "@floating-ui/react": "^0.26.5",
+    "@salt-ds/icons": "workspace:^",
+    "@salt-ds/styles": "workspace:*",
+    "@salt-ds/window": "workspace:*",
     "clsx": "^2.0.0"
   },
   "peerDependencies": {
@@ -29,7 +32,8 @@
     "provenance": true
   },
   "scripts": {
-    "bundle:css": "yarn node ./scripts/build.mjs"
+    "build": "yarn node ../../scripts/build.mjs",
+    "bundle:css": "yarn node ./scripts/bundleCSS.mjs"
   },
   "files": [
     "css"

packages/core/stories/floating-platform/custom-floating-ui-platform.stories.tsx

@@ -29,7 +29,7 @@ import {
 import { useComponentCssInjection } from "@salt-ds/styles";
 import { useWindow } from "@salt-ds/window";
 
-import floatingCss from "./floating-platform.css";
+import floatingCss from "./floating-platform.css?inline";
 
 import { FloatingComponentWindow, NewWindow } from "./NewWindow";
 

packages/countries/package.json

@@ -8,22 +8,23 @@
     "directory": "packages/countries"
   },
   "bugs": "https://github.com/jpmorganchase/salt-ds/issues",
-  "main": "./src/index.ts",
-  "modular": {
-    "type": "package"
-  },
+  "main": "src/index.ts",
   "sideEffects": false,
   "files": [
     "saltCountries.css",
     "saltSharpCountries.css",
     "css"
   ],
   "scripts": {
-    "build": "yarn clean && node ./scripts/generateCountrySymbol.mjs '*.svg'",
+    "build": "yarn clean && yarn build:countries && yarn node ../../scripts/build.mjs",
+    "build:countries": "node ./scripts/generateCountrySymbol.mjs '*.svg'",
     "clean": "rimraf ./src/components",
     "copy:css": "yarn node ./scripts/copyCss.mjs"
   },
   "dependencies": {
+    "@salt-ds/core": "workspace:^",
+    "@salt-ds/styles": "workspace:*",
+    "@salt-ds/window": "workspace:*",
     "clsx": "^2.0.0"
   },
   "peerDependencies": {