refactor: keep building app-shell as before, until we get rid of css …

…modules

package.json

@@ -45,7 +45,7 @@
     "template-starter:start": "yarn --cwd application-templates/starter start",
     "template-starter:start:prod:local": "yarn --cwd application-templates/starter start:prod:local",
     "prebuild": "lerna run prebuild --no-private",
-    "build": "preconstruct build",
+    "build": "preconstruct build && yarn workspace @commercetools-frontend/application-shell run build",
     "build:watch": "preconstruct watch",
     "build:website": "NODE_ENV=production lerna run build --no-private --scope '@commercetools-frontend/application-components' --include-dependencies && yarn --cwd website build && yarn --cwd website-components-playground build",
     "now-build": "yarn build:website && rm -rf public && mv website/public public",
@@ -71,7 +71,7 @@
   "preconstruct": {
     "packages": [
       "packages-backend/*",
-      "packages/!(assets|babel-preset-mc-app|eslint-config-mc-app|jest-preset-mc-app|jest-stylelint-runner|mc-dev-authentication)"
+      "packages/!(assets|application-shell|babel-preset-mc-app|eslint-config-mc-app|jest-preset-mc-app|jest-stylelint-runner|mc-dev-authentication)"
     ]
   },
   "dependencies": {
@@ -105,8 +105,10 @@
     "@rollup/plugin-node-resolve": "10.0.0",
     "@testing-library/cypress": "7.0.1",
     "@testing-library/react": "11.1.2",
+    "@types/jest-environment-puppeteer": "4.4.0",
     "@types/jquery": "3.5.4",
     "@types/node": "14.14.7",
+    "@types/puppeteer": "5.4.0",
     "@types/react": "16.9.56",
     "@types/react-dom": "16.9.9",
     "@types/react-redux": "7.1.11",
@@ -205,9 +207,5 @@
     "node": ">=12",
     "npm": ">=5",
     "yarn": ">=1.10"
-  },
-  "devDependencies": {
-    "@types/jest-environment-puppeteer": "4.4.0",
-    "@types/puppeteer": "5.4.0"
   }
 }

packages/application-shell/package.json

@@ -15,14 +15,20 @@
   "publishConfig": {
     "access": "public"
   },
-  "main": "dist/application-shell.cjs.js",
-  "module": "dist/application-shell.esm.js",
+  "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",
   "files": ["dist", "test-utils", "package.json", "LICENSE", "README.md"],
-  "preconstruct": {
-    "entrypoints": [".", "test-utils"]
-  },
   "scripts": {
-    "prepare": "./../../scripts/version.js replace"
+    "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"
   },
   "dependencies": {
     "@babel/runtime": "7.12.5",

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

@@ -3,8 +3,7 @@ import type { TApplicationContext } from '@commercetools-frontend/application-sh
 import type { TAsyncLocaleDataProps } from '@commercetools-frontend/i18n';
 import type { TrackingList } from '../../utils/gtm';
 
-// FIXME: support loading css files
-// import './global-style-imports';
+import './global-style-imports';
 import '../../track-performance';
 import React from 'react';
 import { Router } from 'react-router-dom';

packages/application-shell/src/components/application-shell-provider/global-style-imports.ts

@@ -1,3 +1,3 @@
 // Global MC styles
-import './grid.css';
-import './reset.css';
+import './grid.mod.css';
+import './reset.mod.css';

packages/application-shell/src/components/application-shell-provider/grid.css → packages/application-shell/src/components/application-shell-provider/grid.mod.css

@@ -3,43 +3,43 @@
   TODO: implement a proper layout system with components, or simply use css-grid.
  */
 
-.row {
+:global(.row) {
   clear: both;
   float: left;
   width: 100%;
 }
 
-.col-3 {
+:global(.col-3) {
   float: left;
   width: 25%;
 }
 
-.col-4 {
+:global(.col-4) {
   float: left;
   width: 33.333%;
 }
 
-.col-5 {
+:global(.col-5) {
   float: left;
   width: 41.666%;
 }
 
-.col-6 {
+:global(.col-6) {
   float: left;
   width: 50%;
 }
 
-.col-7 {
+:global(.col-7) {
   float: left;
   width: 58.333%;
 }
 
-.col-8 {
+:global(.col-8) {
   float: left;
   width: 66.666%;
 }
 
-.col-12 {
+:global(.col-12) {
   float: left;
   width: 100%;
 }

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

@@ -45,14 +45,12 @@ import { RestrictedByPermissions } from '@commercetools-frontend/permissions';
 import { location } from '../../utils/location';
 import { GtmContext } from '../gtm-booter';
 import LoadingPlaceholder from '../loading-placeholder';
-// import styles from './navbar.mod.css';
+import styles from './navbar.mod.css';
 import messages from './messages';
 import useLoadingMenuLayoutEffect from './use-loading-menu-layout-effect';
 import useNavbarStateManager from './use-navbar-state-manager';
 import nonNullable from './non-nullable';
 
-// FIXME: migrate css modules to emotion, to avoid having to instruct babel to parse the css file.
-const styles: { [key: string]: string } = {};
 /*
 <DataMenu data={[]}>
   <MenuGroup>

packages/application-shell/test-utils/index.d.ts

@@ -0,0 +1 @@
+export * from '../dist/typings/test-utils';