Run rollup once, to generate both cjs and es-modules bundles

config/rollup/index.js

@@ -1,5 +1,4 @@
 const {resolve} = require('path');
-const {readJSONSync} = require('fs-extra');
 const nodeResolve = require('rollup-plugin-node-resolve');
 const babel = require('rollup-plugin-babel');
 const json = require('rollup-plugin-json');
@@ -12,7 +11,6 @@ const image = require('./plugins/image');
 const icon = require('./plugins/icon');
 
 const getNamespacedClassName = require('./namespaced-classname');
-const createExistingClassnameTokenUser = require('./use-existing-classname-tokens');
 
 const project = resolve(__dirname, '../..');
 const buildRoot = resolve(project, './build-intermediate');
@@ -27,21 +25,7 @@ const sassResources = [
   resolve(styleRoot, './shared.scss'),
 ];
 
-module.exports = function createRollupConfig({
-  entry,
-  writeCSS,
-  cssPath,
-  useExistingClassTokens = false,
-}) {
-  let generateScopedName;
-  if (useExistingClassTokens) {
-    generateScopedName = createExistingClassnameTokenUser(
-      readJSONSync(`${cssPath.slice(0, -4)}.tokens.json`),
-    );
-  } else {
-    generateScopedName = getNamespacedClassName;
-  }
-
+module.exports = function createRollupConfig({entry, cssPath}) {
   return {
     input: entry,
     external(id) {
@@ -69,10 +53,10 @@ module.exports = function createRollupConfig({
       }),
       commonjs(),
       styles({
-        output: writeCSS && cssPath,
+        output: cssPath,
         includePaths: [styleRoot],
         includeAlways: sassResources,
-        generateScopedName,
+        generateScopedName: getNamespacedClassName,
       }),
       icon({
         include: '**/icons/*.svg',

scripts/build.js

@@ -85,27 +85,9 @@ copy(['./src/**/*.{scss,svg,png,jpg,jpeg,json}', intermediateBuild], {up: 1})
     `,
     );
   })
-  // Main bundle: supports all our supported browsers, CommonJS, and
+  // Main CJS and ES modules bundles: supports all our supported browsers and
   // uses the full class names for any Sass imports
-  .then(() =>
-    runRollup({
-      entry: mainEntry,
-      output: 'polaris.js',
-      format: 'cjs',
-      css: true,
-    }),
-  )
-  // ES bundle: supports all our supported browsers, but uses ES imports
-  // (for tree shaking), uses the full class names for any Sass imports
-  .then(() =>
-    runRollup({
-      entry: mainEntry,
-      output: 'polaris.es.js',
-      format: 'es',
-      css: false,
-      useExistingClassTokens: true,
-    }),
-  )
+  .then(() => runRollup())
   .then(() =>
     Promise.all([
       cp('build/polaris.js', './index.js'),
@@ -123,28 +105,23 @@ copy(['./src/**/*.{scss,svg,png,jpg,jpeg,json}', intermediateBuild], {up: 1})
     process.exit(1);
   });
 
-function runRollup({
-  entry,
-  output,
-  format,
-  css,
-  outputDir = build,
-  minifyClassnames = false,
-  useExistingClassTokens = false,
-}) {
+function runRollup() {
   const config = createRollupConfig({
-    entry,
-    minifyClassnames,
-    useExistingClassTokens,
-    writeCSS: css,
-    cssPath: resolvePath(outputDir, 'polaris.css'),
+    entry: mainEntry,
+    cssPath: resolvePath(build, 'polaris.css'),
   });
 
   return rollup(config).then((bundle) =>
-    bundle.write({
-      format,
-      file: resolvePath(outputDir, output),
-    }),
+    Promise.all([
+      bundle.write({
+        format: 'cjs',
+        file: resolvePath(build, 'polaris.js'),
+      }),
+      bundle.write({
+        format: 'esm',
+        file: resolvePath(build, 'polaris.es.js'),
+      }),
+    ]),
   );
 }