refactor(app-shell): drop Rollup, pre-compile css module and use a macro to load the styles

.changeset/orange-deers-knock.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/mc-scripts': patch
+---
+
+Include a `postcss.config.js`, which is used by the `postcss-loader` Webpack plugin.

.changeset/stupid-turtles-act.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/application-shell': minor
+---
+
+Build package using `preconstruct`. This is now possible as we don't directly load the `.css` file anymore. Instead, we use `postcss` to compile it and load the styles using a macro. This allows the code to be bundled using Babel.

.gitignore

@@ -69,11 +69,11 @@ typings/
 .public
 
 # Build
+compiled
 compiled-data
 dist
 dist-tarballs
 public
-packages/application-shell/test-utils
 
 # Editor/IDE
 .idea

jest.stylelint.config.js

@@ -6,6 +6,8 @@ module.exports = {
     'build',
     'dist',
     'public/',
+    'compiled',
+    '.cache',
     '.spec.js',
     '.visualspec.js',
     '.visualroute.js',

package.json

@@ -5,11 +5,12 @@
   "license": "MIT",
   "private": true,
   "scripts": {
-    "postinstall": "manypkg check && preconstruct dev",
+    "postinstall": "manypkg check && preconstruct dev && yarn compile-css-modules",
     "auth": "npm_config_registry=https://registry.npmjs.org npm whoami",
     "clean": "lerna exec 'rm -rf build dist test-utils/dist experimental/dist task/dist add-commands/dist'",
     "extract-intl": "formatjs extract --format=$(pwd)/packages/i18n/transifex-transformer.js --out-file=$(pwd)/packages/i18n/data/core.json 'packages/**/*messages.ts'",
     "compile-intl": "yarn --cwd packages/i18n compile-data",
+    "compile-css-modules": "lerna run compile-css-modules --no-private",
     "l10n:build": "pushd packages/l10n; yarn generate-data",
     "lint": "jest --projects jest.eslint.config.js jest.stylelint.config.js jest.text.config.js",
     "lint:js": "jest --config jest.eslint.config.js",
@@ -73,6 +74,7 @@
       "packages/actions-global",
       "packages/application-components",
       "packages/application-config",
+      "packages/application-shell",
       "packages/application-shell-connectors",
       "packages/browser-history",
       "packages/constants",
@@ -114,11 +116,7 @@
     "@manypkg/cli": "0.17.0",
     "@percy/cypress": "2.3.4",
     "@percy/puppeteer": "1.1.0",
-    "@preconstruct/cli": "2.0.2",
-    "@rollup/plugin-babel": "5.2.3",
-    "@rollup/plugin-commonjs": "17.1.0",
-    "@rollup/plugin-json": "4.1.0",
-    "@rollup/plugin-node-resolve": "11.1.1",
+    "@preconstruct/cli": "2.0.1",
     "@svgr/cli": "5.5.0",
     "@svgr/plugin-jsx": "5.5.0",
     "@svgr/plugin-svgo": "5.5.0",
@@ -137,6 +135,7 @@
     "@types/webpack": "4.41.26",
     "@types/webpack-env": "1.16.0",
     "apollo-server-errors": "2.4.2",
+    "autoprefixer": "10.2.4",
     "babel-plugin-import-graphql": "2.8.1",
     "babel-plugin-transform-rename-import": "2.3.0",
     "babel-plugin-typescript-to-proptypes": "1.4.2",
@@ -164,17 +163,12 @@
     "lint-staged": "10.5.3",
     "mri": "1.1.6",
     "postcss": "8.2.4",
-    "postcss-custom-properties": "11.0.0",
-    "postcss-import": "14.0.0",
+    "postcss-load-config": "3.0.0",
+    "postcss-modules": "4.0.0",
     "prettier": "2.2.1",
     "puppeteer": "5.5.0",
     "rcfile": "1.0.3",
-    "read-pkg-up": "7.0.1",
     "replace": "1.2.0",
-    "rollup": "2.38.3",
-    "rollup-plugin-node-builtins": "2.1.2",
-    "rollup-plugin-peer-deps-external": "2.2.4",
-    "rollup-plugin-postcss": "4.0.0",
     "rosie": "2.0.1",
     "shelljs": "0.8.4",
     "start-server-and-test": "1.12.0",

packages/application-shell/package.json

@@ -15,20 +15,15 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "./dist/application-shell-index.cjs.js",
-  "module": "./dist/application-shell-index.es.js",
-  "typings": "./dist/typings/index.d.ts",
-  "types": "./dist/typings/index.d.ts",
+  "main": "dist/commercetools-frontend-application-shell.cjs.js",
+  "module": "dist/commercetools-frontend-application-shell.esm.js",
+  "preconstruct": {
+    "entrypoints": ["./index.ts", "./test-utils/index.ts"]
+  },
   "files": ["dist", "test-utils", "package.json", "LICENSE", "README.md"],
   "scripts": {
     "prepare": "./../../scripts/version.js replace",
-    "prebuild": "rimraf dist/** test-utils/**",
-    "build": "yarn build:bundles && yarn build:test-utils && yarn build:typings",
-    "build:bundles": "cross-env NODE_ENV=production rollup -c ../../rollup.config.js -i ./src/index.ts -d dist",
-    "build:bundles:watch": "yarn build:bundles -w",
-    "build:test-utils": "cross-env NODE_ENV=development rollup -c ../../rollup.config.js -i ./src/test-utils/index.ts",
-    "build:typings": "cross-env tsc -p tsconfig.declarations.json --emitDeclarationOnly --declarationDir dist/typings",
-    "postbuild:typings": "echo \"export * from '../dist/typings/test-utils';\" > test-utils/index.d.ts"
+    "compile-css-modules": "./scripts/compile-styles.js"
   },
   "dependencies": {
     "@babel/runtime": "7.12.5",

packages/application-shell/scripts/compile-styles.js

@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+
+const fs = require('fs');
+const path = require('path');
+const postcss = require('postcss');
+const loadPostCssConfig = require('postcss-load-config');
+
+const filesToCompile = ['src/components/navbar/navbar.mod.css'];
+
+function getCompiledPaths(cssFilePath) {
+  const fileName = path.basename(cssFilePath);
+  const [folderPath] = cssFilePath.split(fileName);
+  const compiledDir = path.join(folderPath, 'compiled');
+  const compiledFileName = fileName.replace('.mod', '');
+
+  if (!fs.existsSync(compiledDir)) {
+    fs.mkdirSync(compiledDir);
+  }
+
+  return {
+    dir: compiledDir,
+    fileName: compiledFileName,
+  };
+}
+
+async function compileCss() {
+  const { plugins, options } = await loadPostCssConfig();
+
+  const processor = postcss([
+    ...plugins,
+    require('postcss-modules')({
+      generateScopedName: '[name]__[local]___[hash:base64:5]',
+      getJSON: function (cssFilePath, json) {
+        const compiledPaths = getCompiledPaths(cssFilePath);
+
+        // This file contains the mapping between the class names referenced
+        // in the components and the compiled CSS selectors.
+        fs.writeFileSync(
+          `${path.join(compiledPaths.dir, compiledPaths.fileName)}.json`,
+          JSON.stringify(json),
+          { encoding: 'utf8' }
+        );
+
+        // This file provides the type declaration for the JSON file created above.
+        fs.writeFileSync(
+          `${path.join(compiledPaths.dir, compiledPaths.fileName)}.json.d.ts`,
+          `/* eslint-disable prettier/prettier */
+    declare const styles: ${JSON.stringify(json)};
+    export default styles;`,
+          { encoding: 'utf8' }
+        );
+      },
+    }),
+  ]);
+
+  for (const cssPath of filesToCompile) {
+    const cssFilePath = path.join(__dirname, '..', cssPath);
+    const compiledPaths = getCompiledPaths(cssFilePath);
+    const css = fs.readFileSync(cssFilePath, { encoding: 'utf8' });
+    const compiled = await processor.process(css, {
+      ...options,
+      from: cssFilePath,
+    });
+    fs.writeFileSync(
+      path.join(compiledPaths.dir, compiledPaths.fileName),
+      compiled.css,
+      { encoding: 'utf8' }
+    );
+  }
+}
+
+compileCss().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

packages/application-shell/src/components/application-shell-provider/application-shell-provider.tsx

@@ -3,7 +3,6 @@ import type { TApplicationContext } from '@commercetools-frontend/application-sh
 import type { TAsyncLocaleDataProps } from '@commercetools-frontend/i18n';
 import type { TrackingList } from '../../utils/gtm';
 
-import './global-style-imports';
 import '../../track-performance';
 import React from 'react';
 import { Router } from 'react-router-dom';
@@ -21,6 +20,7 @@ import Authenticated from '../authenticated';
 import GtmBooter from '../gtm-booter';
 import ApplicationLoader from '../application-loader';
 import ErrorBoundary from '../error-boundary';
+import GlobalStyles from './global-styles';
 import { getBrowserLocale } from './utils';
 import useCoercedEnvironmentValues from './use-coerced-environment-values';
 
@@ -47,46 +47,49 @@ const ApplicationShellProvider = <AdditionalEnvironmentProperties extends {}>(
   );
   const browserLocale = getBrowserLocale(window);
   return (
-    <ErrorBoundary>
-      <ApplicationContextProvider<AdditionalEnvironmentProperties>
-        environment={coercedEnvironmentValues}
-      >
-        <ReduxProvider store={internalReduxStore}>
-          <ApolloProvider client={apolloClient}>
-            <React.Suspense fallback={<ApplicationLoader />}>
-              <Router history={ApplicationShellProvider.history}>
-                <GtmBooter trackingEventList={props.trackingEventList || {}}>
-                  <Authenticated
-                    locale={browserLocale}
-                    applicationMessages={props.applicationMessages}
-                    render={({ isAuthenticated }) => {
-                      if (isAuthenticated)
-                        return props.children({ isAuthenticated });
+    <>
+      <GlobalStyles />
+      <ErrorBoundary>
+        <ApplicationContextProvider<AdditionalEnvironmentProperties>
+          environment={coercedEnvironmentValues}
+        >
+          <ReduxProvider store={internalReduxStore}>
+            <ApolloProvider client={apolloClient}>
+              <React.Suspense fallback={<ApplicationLoader />}>
+                <Router history={ApplicationShellProvider.history}>
+                  <GtmBooter trackingEventList={props.trackingEventList || {}}>
+                    <Authenticated
+                      locale={browserLocale}
+                      applicationMessages={props.applicationMessages}
+                      render={({ isAuthenticated }) => {
+                        if (isAuthenticated)
+                          return props.children({ isAuthenticated });
 
-                      return (
-                        <AsyncLocaleData
-                          locale={browserLocale}
-                          applicationMessages={props.applicationMessages}
-                        >
-                          {({ locale, messages }) => (
-                            <ConfigureIntlProvider
-                              locale={locale}
-                              messages={messages}
-                            >
-                              {props.children({ isAuthenticated })}
-                            </ConfigureIntlProvider>
-                          )}
-                        </AsyncLocaleData>
-                      );
-                    }}
-                  />
-                </GtmBooter>
-              </Router>
-            </React.Suspense>
-          </ApolloProvider>
-        </ReduxProvider>
-      </ApplicationContextProvider>
-    </ErrorBoundary>
+                        return (
+                          <AsyncLocaleData
+                            locale={browserLocale}
+                            applicationMessages={props.applicationMessages}
+                          >
+                            {({ locale, messages }) => (
+                              <ConfigureIntlProvider
+                                locale={locale}
+                                messages={messages}
+                              >
+                                {props.children({ isAuthenticated })}
+                              </ConfigureIntlProvider>
+                            )}
+                          </AsyncLocaleData>
+                        );
+                      }}
+                    />
+                  </GtmBooter>
+                </Router>
+              </React.Suspense>
+            </ApolloProvider>
+          </ReduxProvider>
+        </ApplicationContextProvider>
+      </ErrorBoundary>
+    </>
   );
 };