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

emmenko · 2021-01-29T16:42:11Z

So I finally figured out a way to bundle the app-shell package using preconstruct.

Until now it was not possible because we loaded CSS modules, and thus babel does not know how to process that import.

Now 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.

changeset-bot · 2021-01-29T16:42:14Z

🦋 Changeset detected

Latest commit: 1cf5369

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@commercetools-frontend/mc-scripts	Minor
@commercetools-frontend/application-shell	Minor
merchant-center-application-template-starter	Patch
playground	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

vercel · 2021-01-29T16:42:14Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/commercetools/merchant-center-application-kit/mf6ow6bfq
✅ Preview: https://merchant-center-application-kit-git-nm-drop-rollup.commercetools.now.sh

emmenko · 2021-01-31T13:56:14Z

.gitignore

 compiled-data
 dist
 dist-tarballs
 public
-packages/application-shell/test-utils


The test-utils is now a preconstruct entrypoint.

emmenko · 2021-01-31T14:01:08Z

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

+      getJSON: function (cssFilePath, json) {
+        const compiledPaths = getCompiledPaths(cssFilePath);
+
+        if (!fs.existsSync(compiledPaths.dir)) {
+          fs.mkdirSync(compiledPaths.dir);
+        }
+
+        // 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' }
+        );
+      },


This function essentially creates the JSON file that contains the mapping between the class names and the compiled selectors:

emmenko · 2021-01-31T14:02:02Z

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

+    fs.writeFileSync(
+      path.join(compiledPaths.dir, compiledPaths.fileName),
+      compiled.css,
+      { encoding: 'utf8' }
+    );


Here compiled.css is the actual compiled CSS code.

This will still be fingerprinted etc as it's loaded through webpack, right?

No really,this script is what we execute independently.

emmenko · 2021-01-31T14:02:22Z

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

-                      if (isAuthenticated)
-                        return props.children({ isAuthenticated });
+    <>
+      <GlobalStyles />


Injected using Emotion Global

emmenko · 2021-01-31T14:02:50Z

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

@@ -1,4 +1,3 @@
-import type { SyntheticEvent } from 'react';


Preconstruct doesn't like importing React types separately.

emmenko · 2021-01-31T14:04:44Z

packages/application-shell/src/components/navbar/navbar.styles.js

+const compiledStyles = {
+  global: fs.readFileSync(path.join(__dirname, './compiled/navbar.css'), {
+    encoding: 'utf8',
+  }),
+  jsonMap: require('./compiled/navbar.css.json'),
+};


This is the macro. We're simply returning the loaded CSS and JSON map.

Note that in theory we could have run postcss here as well (instead of using a custom script). However, the process is async and it would complicate things, as we want here things to be sync.

emmenko · 2021-01-31T14:05:27Z

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

+// https://babeljs.io/blog/2017/09/11/zero-config-with-babel-macros
+import compiledStyles from /* preval */ './navbar.styles';
+
+const styles = compiledStyles.jsonMap;


In the code, we reference the class names using the JSON map.

Bonus now is that we also get autocompletion and type checks.

emmenko · 2021-01-31T14:05:55Z

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

+      <Global
+        styles={css`
+          ${compiledStyles.global}
+        `}
+      />


Since we pre-compiled the CSS styles, we need to inject them globally here.

emmenko · 2021-01-31T14:09:10Z

The styles in the bundle are now like this:

Which is actually more or less the same as we had before with Rollup compiling CSS modules.

tdeekens

Thanks. I can follow along from a setup perspective. Macros are somewhat magical to me still :)

tdeekens · 2021-01-31T14:16:25Z

packages/application-shell/package.json

-    "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"


tdeekens · 2021-01-31T14:17:17Z

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

+    fs.writeFileSync(
+      path.join(compiledPaths.dir, compiledPaths.fileName),
+      compiled.css,
+      { encoding: 'utf8' }
+    );


This will still be fingerprinted etc as it's loaded through webpack, right?

adnasa · 2021-02-01T09:09:12Z

I don't even know what a macro is (except via Sass or Less) 😄

tdeekens · 2021-02-01T09:11:42Z

I don't even know what a macro is (except via Sass or Less) 😄

This article was quite nice: https://kentcdodds.com/blog/write-your-own-code-transform

adnasa · 2021-02-01T12:35:35Z

It took a couple of more rounds of reading, and something I would have liked to see at the PR. but here is what I understood

We pre-compile the css
We expose the css via a macro as compiledStyles
the macro exposes two values, jsonMap and global

the jsonMap is a list of references to the compiled css classes (.foo)
the global are value that we inline into a global component, hence the the css classes and their rules will be applied

questions

question regarding the jsonMap, since we reference the only the css classes, where are their rules injected? (can't find the code that does the injection pointing to a complied css file)
when to use what?
Fo the moment, the application-provider hosts the global styles, namely reset and grid.
- If we need to introduce more global styles further down the road, we add them into <GlobalStyles />?

side note

is the application-provider the right place to host global styles?

emmenko · 2021-02-01T12:43:58Z

question regarding the jsonMap, since we reference the only the css classes, where are their rules injected? (can't find the code that does the injection pointing to a complied css file)

See #2018 (comment)
The compiled CSS is injected using Global, which is what the global string contains. The code is here.

when to use what?

What what?

PS: note that this is a "temporary" solution, as we want to use Emotion eventually and no CSS modules. See #1884

If we need to introduce more global styles further down the road, we add them into ?

Yes

is the application-provider the right place to host global styles?

Yes, because it's the only component that is always rendered (see our internal auth app, which does not use AppShell).

adnasa · 2021-02-01T12:54:18Z

The compiled CSS is injected using Global, which is what the global string contains. The code is here.

aah... nice that is actually elegant.

PS. can't say it's genius, however 🤷🏽‍♂️ #slap

…cro to load the styles

…fig.js

…om postcss-loader

vercel bot had a problem deploying to Preview January 29, 2021 17:01 Failure

vercel bot temporarily deployed to Preview January 29, 2021 17:08 Inactive

vercel bot temporarily deployed to Preview January 29, 2021 19:12 Inactive

vercel bot temporarily deployed to Preview January 29, 2021 20:28 Inactive

vercel bot temporarily deployed to Preview January 29, 2021 21:40 Inactive

vercel bot temporarily deployed to Preview January 31, 2021 13:50 Inactive

emmenko commented Jan 31, 2021

View reviewed changes

vercel bot temporarily deployed to Preview January 31, 2021 14:00 Inactive

emmenko commented Jan 31, 2021

View reviewed changes

tdeekens approved these changes Jan 31, 2021

View reviewed changes

vercel bot temporarily deployed to Preview January 31, 2021 21:11 Inactive

emmenko mentioned this pull request Feb 1, 2021

fix(deps): update dependency postcss-custom-properties to v11 #2023

Merged

1 task

adnasa approved these changes Feb 1, 2021

View reviewed changes

vercel bot temporarily deployed to Preview February 1, 2021 11:22 Inactive

vercel bot temporarily deployed to Preview February 1, 2021 12:35 Inactive

emmenko force-pushed the nm-drop-rollup branch from af72573 to dd183a5 Compare February 1, 2021 12:46

vercel bot had a problem deploying to Preview February 1, 2021 12:46 Failure

emmenko added 13 commits February 1, 2021 16:39

refactor(app-shell): drop Rollup, pre-compile css module and use a ma…

51a5a9d

…cro to load the styles

chore: add missing dep

0048ea6

fix: ensure compiled folder is created

b0fc5d2

fix: generate type declarations for css json file

0bcf5f1

fix: postcss generation

f1d1870

fix: stylelint config setup

ec4f0f1

refactor(mc-scripts): prevent postcss-loader from loading postcss.con…

8e59d11

…fig.js

chore(app-shell): remove unnecessary tsconfig files

fb02977

refactor: use custom script to compile css modules

cb4fa76

docs: add comments

5cb00f2

refactor(mc-scripts): include postcss.config.js file and load that fr…

45d365d

…om postcss-loader

fix: resolving postcss.config and fixing stylelint runner

f19ff1d

docs: document what postcss plugins do

1cf5369

emmenko force-pushed the nm-drop-rollup branch from dd183a5 to 1cf5369 Compare February 1, 2021 15:41

emmenko merged commit 7fbe0c7 into master Feb 1, 2021

emmenko deleted the nm-drop-rollup branch February 1, 2021 15:58

ghost mentioned this pull request Feb 1, 2021

Version Packages #2028

Merged

emmenko mentioned this pull request Feb 5, 2021

refactor(mc-scripts): improve webpack config setup and provide more postcss configuration options #2042

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

emmenko commented Jan 29, 2021

changeset-bot bot commented Jan 29, 2021 •

edited

Loading

vercel bot commented Jan 29, 2021 •

edited

Loading

emmenko Jan 31, 2021

emmenko Jan 31, 2021

emmenko Jan 31, 2021

tdeekens Jan 31, 2021

emmenko Jan 31, 2021

emmenko Jan 31, 2021

emmenko Jan 31, 2021

emmenko Jan 31, 2021

emmenko Jan 31, 2021

emmenko Jan 31, 2021

emmenko commented Jan 31, 2021

tdeekens left a comment

tdeekens Jan 31, 2021

tdeekens Jan 31, 2021

adnasa commented Feb 1, 2021 •

edited

Loading

tdeekens commented Feb 1, 2021

adnasa commented Feb 1, 2021 •

edited

Loading

emmenko commented Feb 1, 2021

adnasa commented Feb 1, 2021

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

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

Conversation

emmenko commented Jan 29, 2021

changeset-bot bot commented Jan 29, 2021 • edited Loading

🦋 Changeset detected

vercel bot commented Jan 29, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

emmenko commented Jan 31, 2021

tdeekens left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adnasa commented Feb 1, 2021 • edited Loading

tdeekens commented Feb 1, 2021

adnasa commented Feb 1, 2021 • edited Loading

emmenko commented Feb 1, 2021

adnasa commented Feb 1, 2021

changeset-bot bot commented Jan 29, 2021 •

edited

Loading

vercel bot commented Jan 29, 2021 •

edited

Loading

adnasa commented Feb 1, 2021 •

edited

Loading

adnasa commented Feb 1, 2021 •

edited

Loading