Shopify · BPScott · Aug 26, 2021 · Aug 25, 2021 · Aug 24, 2021 · Aug 24, 2021
diff --git a/.eslintignore b/.eslintignore
@@ -2,5 +2,9 @@ node_modules
 /.sewing-kit
 /examples
 /build
-/dist
+/build-internal
 /src/styles/polaris-tokens
+
+index.esnext
+index.js
+index.mjs
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
@@ -95,7 +95,6 @@ After cloning Polaris React, run `yarn` to fetch its dependencies. Then you can
 
 - `yarn dev` runs a Storybook server which includes a playground editable at `playground/Playground.tsx`
 - `yarn test` runs the complete test suite
-- `yarn test:coverage` runs tests and generates a test coverage report
 - `yarn test <pattern>` runs tests with matching filenames
 - `yarn tophat` runs a local development server and mounts all of the component examples
 

diff --git a/.gitignore b/.gitignore
@@ -2,8 +2,12 @@
 node_modules
 /.sewing-kit
 /build
-/dist
+/build-internal
 .DS_Store
 *.scss.d.ts
 /src/styles/polaris-tokens
 .idea
+
+index.esnext
+index.js
+index.mjs
diff --git a/.prettierignore b/.prettierignore
@@ -1,7 +1,11 @@
 node_modules
 /.sewing-kit
 /build
-/dist
+/build-internal
 /src/styles/polaris-tokens
 
 /package.json
+
+index.esnext
+index.js
+index.mjs
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -30,7 +30,7 @@ module.exports = {
             options: {
               cacheDirectory: path.resolve(
                 __dirname,
-                '../build/cache/storybook/markdown',
+                '../build-internal/cache/storybook/markdown',
               ),
             },
           },
@@ -71,7 +71,7 @@ module.exports = {
 
     config.plugins.push(
       new CreateFileWebpack({
-        path: './build/storybook/static/services/',
+        path: './build-internal/storybook/static/services/',
         fileName: 'ping.html',
         content:
           '<!DOCTYPE html><html lang="en"><head></head><body>OK</body></html>',

diff --git a/.stylelintignore b/.stylelintignore
@@ -1,5 +1,5 @@
 node_modules
 /.sewing-kit
 /build
-/dist
+/build-internal
 /src/styles/polaris-tokens
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -11,7 +11,7 @@
     "**/.git": true,
     "**/node_modules": true,
     ".{dev,shadowenv.d,sewing-kit}": true,
-    "{build,dist}/": true,
+    "{build,build-internal}/": true,
     "examples/*/build": true
   },
   "javascript.validate.enable": false,
@@ -20,7 +20,7 @@
   "search.exclude": {
     "**/node_modules": true,
     ".{dev,shadowenv.d}": true,
-    "{build,dist}/": true,
+    "{build,build-internal}/": true,
     "examples/*/build": true
   },
   "typescript.tsdk": "./node_modules/typescript/lib"

diff --git a/README.md b/README.md
@@ -31,15 +31,15 @@ yarn add @shopify/polaris
 1.  Import the CSS directly into your project if your asset packager supports it:
 
 ```js
-import '@shopify/polaris/dist/styles.css';
+import '@shopify/polaris/build/esm/styles.css';
 ```
 
 Otherwise include the CSS in your HTML. We suggest copying the styles file into your own project, but you may also use it directly:
 
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@7.0.0-rc.1/dist/styles.css"
+  href="https://unpkg.com/@shopify/polaris@7.0.0-rc.1/build/esm/styles.css"
 />
 ```
 
@@ -76,7 +76,7 @@ If React doesn’t make sense for your application, you can use a CSS-only versi
 ```html
 <link
   rel="stylesheet"
-  href="https://unpkg.com/@shopify/polaris@7.0.0-rc.1/dist/styles.css"
+  href="https://unpkg.com/@shopify/polaris@7.0.0-rc.1/build/esm/styles.css"
 />
 ```
 

diff --git a/UNRELEASED-v7.md b/UNRELEASED-v7.md
@@ -11,6 +11,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - `Autocomplete` now requires `Autocomplete.TextField` to be used ([#3910](https://github.com/Shopify/polaris-react/pull/3910))
 - Removed ComboBox as a named export on `Autocomplete` ([#3910](https://github.com/Shopify/polaris-react/pull/3910))
 - Remove the `esnext` folder from the package. If you use Polaris in an app built with sewing-kit, it must use at least sewing-kit 0.152.0 to leverage esnext builds. ([#4425](https://github.com/Shopify/polaris-react/pull/4425))
+- The component styles have moved fromm `dist/styles.css` to `build/esm/styles.css`. Consumers who import styles shall need to update their import path. ([#4424](https://github.com/Shopify/polaris-react/pull/4424))
+- The public Sass API has moved from `dist/styles/_public-api.scss` to `build/styles/_public-api.scss`. Consumers who use our Sass API shall need to update their import path. ([#4424](https://github.com/Shopify/polaris-react/pull/4424))
 
 ### Enhancements
 

diff --git a/config/rollup/plugin-styles.js b/config/rollup/plugin-styles.js
@@ -7,12 +7,12 @@ import postcss from 'postcss';
 import cssModules from 'postcss-modules';
 
 export function styles({
-  output,
+  output = '',
   plugins = [],
   modules = {},
   mode,
   include = ['**/*.css', '**/*.scss'],
-  exclude,
+  exclude = [],
 } = {}) {
   if (!['standalone', 'esnext'].includes(mode)) {
     throw new Error(
@@ -76,10 +76,10 @@ export function styles({
 
   function generateBundleStandalone(rollup, generateOptions, bundle) {
     // generateBundle gets called once per call to bundle.write(). We call
-    // that twice - once for the commonjs build (the index.js file), once for
+    // that twice - once for the commonjs build (the cjs folder), once for
     // the esm build (the esm folder). We only want to do perform this logic
-    // once in the commonjs build
-    if (!(generateOptions.file && generateOptions.format === 'cjs')) {
+    // once in the esm build
+    if (!generateOptions.dir.endsWith('/build/esm')) {
       return;
     }
 
@@ -91,9 +91,12 @@ export function styles({
     // resolved. This may change between runs so we can't rely on it.
     // The contents of the emitted css file should use the order in which the
     // files were referenced in the compiled javascript, which can be obtained
-    // by looking at bundles[].modules.
-    const bundleModuleIds = flatMap(Object.values(bundle), (fileInfo) =>
-      Object.keys(fileInfo.modules),
+    // by looking at the imports of each entrypoint's bundle information.
+    const entrypointBundles = Object.values(bundle).filter(
+      (bundleInfo) => bundleInfo.isEntry,
+    );
+    const bundleModuleIds = flatMap(entrypointBundles, (bundleInfo) =>
+      getRecursiveImportOrder(bundleInfo.facadeModuleId, rollup.getModuleInfo),
     );
 
     const missingReferences = Object.keys(cssByFile).filter(
@@ -212,3 +215,26 @@ function hoistCharsetDeclaration(css) {
 
   return `${standaloneCssFileCharset}${result}`;
 }
+
+/**
+ * Recursivly get the correct import order from rollup
+ * We only process a file once
+ *
+ * @param {string} id
+ * @param {Function} getModuleInfo
+ * @param {Set<string>} seen
+ */
+function getRecursiveImportOrder(id, getModuleInfo, seen = new Set()) {
+  if (seen.has(id)) {
+    return [];
+  }
+
+  seen.add(id);
+
+  const result = [id];
+  getModuleInfo(id).importedIds.forEach((importFile) => {
+    result.push(...getRecursiveImportOrder(importFile, getModuleInfo, seen));
+  });
+
+  return result;
+}
diff --git a/dev.yml b/dev.yml
@@ -9,7 +9,6 @@ up:
 open:
   app: http://localhost:6006/
   shipit: https://shipit.shopify.io/shopify/polaris-react/production
-  coverage: build/coverage/index.html
 
 commands:
   # People new to the project might be tempted to run some
@@ -21,5 +20,4 @@ commands:
   server: yarn run dev
   style: yarn run lint
   test: yarn run test
-  test:coverage: yarn run test:coverage
   type-check: yarn run type-check
diff --git a/package.json b/package.json
@@ -14,14 +14,16 @@
     "access": "public"
   },
   "files": [
-    "dist",
-    "locales",
-    "!*.tsbuildinfo"
+    "build/",
+    "!build/ts/**/*.tsbuildinfo",
+    "!build/ts/**/tests/",
+    "!build/ts/**/playground/",
+    "locales/"
   ],
   "sideEffects": [
     "**/*.css",
     "**/*.scss",
-    "**/configure.{js,ts,ts.esnext}"
+    "**/configure.{js,mjs,esnext,ts}"
   ],
   "keywords": [
     "shopify",
@@ -30,32 +32,29 @@
     "components",
     "component library"
   ],
-  "main": "dist/index.js",
-  "module": "dist/esm/index.js",
-  "esnext": "dist/esnext/index.ts.esnext",
-  "types": "dist/types/latest/src/index.d.ts",
+  "main": "build/cjs/index.js",
+  "module": "build/esm/index.js",
+  "esnext": "build/esnext/index.ts.esnext",
+  "types": "build/ts/latest/src/index.d.ts",
   "typesVersions": {
     "<4.0": {
-      "dist/types/latest/*": [
-        "dist/types/3.4/*"
+      "build/types/latest/*": [
+        "build/ts/3.4/*"
       ]
     }
   },
   "scripts": {
     "lint": "skn lint",
-    "format": "skn format",
+    "format": "skn lint --fix",
     "type-check": "skn type-check",
     "test": "skn test",
-    "test:coverage": "CI=true yarn test --coverage",
-    "posttest:coverage": "yarn open:coverage",
-    "open:coverage": "open build/coverage/index.html",
     "check": "npm-run-all lint type-check check:custom-properties test",
     "build:known-custom-properties": "node ./scripts/build-analyze-custom-properties",
     "precheck:custom-properties": "yarn run build:known-custom-properties",
     "preoutput-custom-properties": "yarn run build:known-custom-properties",
-    "output-custom-properties": "node ./build/custom-properties/cli.js -o build/custom-properties-data.json -i build/known-custom-properties.json --pattern 'src/**/{,!(_utilities|_interaction-state)*}.scss'",
-    "check:custom-properties": "node ./build/custom-properties/cli.js -l error -i build/known-custom-properties.json --pattern 'src/**/{,!(_utilities|_interaction-state)*}.scss'",
-    "clean": "rimraf build dist \"./src/styles/polaris-tokens\"",
+    "output-custom-properties": "node ./build-internal/custom-properties/cli.js -o build-internal/custom-properties-data.json -i build-internal/known-custom-properties.json --pattern 'src/**/{,!(_utilities|_interaction-state)*}.scss'",
+    "check:custom-properties": "node ./build-internal/custom-properties/cli.js -l error -i build-internal/known-custom-properties.json --pattern 'src/**/{,!(_utilities|_interaction-state)*}.scss'",
+    "clean": "rimraf build build-internal \"./src/styles/polaris-tokens\"",
     "build": "node ./scripts/build.js",
     "prebuild-consumer": "yarn run build",
     "build-consumer": "node ./scripts/build-consumer",
@@ -65,11 +64,11 @@
     "copy-polaris-tokens": "rimraf ./src/styles/polaris-tokens && shx cp -r ./node_modules/@shopify/polaris-tokens/dist ./src/styles/polaris-tokens",
     "prepublishOnly": "yarn run build",
     "dev": "npm-run-all copy-polaris-tokens storybook",
-    "start": "serve ./build/storybook/static -l ${PORT:=6006}",
+    "start": "serve ./build-internal/storybook/static -l ${PORT:=6006}",
     "readme-update-version": "node ./scripts/readme-update-version",
     "version": "yarn run readme-update-version",
     "storybook": "start-storybook -p 6006 --quiet",
-    "storybook:build": "yarn run copy-polaris-tokens && build-storybook -o build/storybook/static",
+    "storybook:build": "yarn run copy-polaris-tokens && build-storybook -o build-internal/storybook/static",
     "precolordocs": "yarn run build",
     "colordocs": "node ./scripts/color-system-docs",
     "postcolordocs": "yarn run format"
@@ -92,18 +91,17 @@
   "devDependencies": {
     "@babel/core": "^7.15.0",
     "@babel/node": "^7.14.9",
-    "@rollup/plugin-babel": "^5.1.0",
-    "@rollup/plugin-commonjs": "^14.0.0",
     "@rollup/plugin-image": "^2.0.5",
-    "@rollup/plugin-node-resolve": "^8.4.0",
     "@rollup/plugin-replace": "^2.3.3",
     "@rollup/pluginutils": "^3.1.0",
     "@sewing-kit/cli": "^0.6.2",
     "@sewing-kit/core": "^0.6.2",
     "@sewing-kit/plugin-babel": "^0.1.1",
     "@sewing-kit/plugin-eslint": "^0.4.2",
     "@sewing-kit/plugin-jest": "^0.5.1",
+    "@sewing-kit/plugin-package-build": "^0.5.1",
     "@sewing-kit/plugin-prettier": "^0.1.2",
+    "@sewing-kit/plugin-rollup": "^0.3.3",
     "@sewing-kit/plugin-stylelint": "^0.4.2",
     "@sewing-kit/plugin-typescript": "^0.6.1",
     "@shopify/babel-preset": "^24.1.2",
@@ -155,7 +153,6 @@
     "react-is": "^16.7.2",
     "react-test-renderer": "^16.14.0",
     "rimraf": "^3.0.0",
-    "rollup": "^2.22.2",
     "sass-loader": "^8.0.0",
     "scss-parser": "^1.0.3",
     "semver": "^6.3.0",
@@ -184,22 +181,22 @@
   "size-limit": [
     {
       "name": "cjs",
-      "path": "dist/index.js",
+      "path": "build/cjs/index.js",
       "limit": "165 kB"
     },
     {
       "name": "esm",
-      "path": "dist/esm/index.js",
+      "path": "build/esm/index.js",
       "limit": "105 kB"
     },
     {
       "name": "esnext",
-      "path": "dist/esnext/index.ts.esnext",
+      "path": "build/esnext/index.esnext",
       "limit": "160 kB"
     },
     {
       "name": "css",
-      "path": "dist/styles.css",
+      "path": "build/esm/styles.css",
       "limit": "45 kB"
     }
   ]