Support CSS from CDN in esm-views by cristiano-belloni · Pull Request #1757 · jpmorganchase/modular

cristiano-belloni · 2022-05-20T15:45:35Z

Problem

Suppose we have a CSS import from an external dependency like:

import 'regular-table/dist/css/material.css';

In an esm-view, we want to load the dependency from CDN instead of bundling it from local dependencies. In the future, we will also be able to use CSS Module Scripts to add styles to the page (and possibly deduplicate them).
The problem, with Webpack, is that we can't just rewrite the import like we do with js modules. We need to use an helper function that fetches the css (or imports it with an assertion) from the CDN.

Solution

I used a Webpack pitching loader on top of our chain of style loaders. A pitching loader has a pitch method that gets evaluated left-to-right in the array of loaders. If it returns something truthy, it prevents the subsequent loaders to run; otherwise, all the other loaders for the rule run right-to-left (so the top loader is last). It works in our case because:

If we detect that a CSS import is within our rewritable dependency map in the pitch method, we can rewrite it with some code that fetches and injects the desired file from CDN and, by returning from pitch, prevent all the other style loaders to process it.
In all other cases (local CSS files or external CSS files that need to be bundled), we return undefined from the pitch function, letting the whole loader chain process it, and when our loader runs last, we just act as a bypass and return whatever output the loader chain has processed before us.

The pros of this approach is that it uses the correct mechanism to load a dependency (a loader) and the solution is quite compact. The cons are that we re-create the import submodule "manually" (by looking at the Webpack relative path of the requested file) and that the loader is mandatorily positional (it must sit before the others).

Alternative solutions

plugins: Plugins are more powerful than loaders. Theoretically we could scan the AST of every file and carefully rewrite it to fetch styles from a CDN where needed. In practice, it would be an incredibly complex solution that is much more difficult to debug.
non-pitching loader: if it existed a way to "redirect" an import to a loader, using the inline syntax and a query to specify the import statement value, we could use a much simple standalone loader. Unfortunately, it doesn't seem possible to do that when marking imports as externals. Any help would be appreciated here.

Other

This PR also includes a bit more debug logging when filtering external dependencies and a small bugfix (wildcard value in allow list is ** instead of * to include scoped packages)

changeset-bot · 2022-05-20T17:12:19Z

🦋 Changeset detected

Latest commit: 3e6d3e7

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

This PR includes changesets to release 1 package

Name	Type
modular-scripts	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

coveralls · 2022-05-20T17:29:35Z

Coverage increased (+0.4%) to 26.801% when pulling 3e6d3e7 on feature/webpack-cdn-css into 813c941 on main.

…chase/modular into feature/webpack-cdn-css

…bug info.

cangarugula · 2022-05-27T10:26:37Z

packages/modular-scripts/react-scripts/config/cdnStyleLoader.js

+  return `
+  const link = document.createElement('link');
+  link.rel = 'stylesheet'; 
+  link.type = 'text/css';


What about .less files?

I don't think we're expecting to process any files coming from the CDN at runtime - the expectation is that the CDN provides files that are already processed by the build process of the dependency.

benpryke · 2022-05-27T16:13:47Z

packages/modular-scripts/react-scripts/config/cdnStyleLoader.js

+  link.rel = 'stylesheet'; 
+  link.type = 'text/css';
+  link.href = '${url}'; 
+  document.getElementsByTagName('HEAD')[0].appendChild(link); 


Edge case: the <head> tag is optional, so it may not be present. I suggest creating it if it doesn't exist. https://google.github.io/styleguide/htmlcssguide.html#Optional_Tags

TL;DR: Done.

It seems that Webpack adds <head> even when we don't specify it in the template, but I added a check and replacement for missing head anyway. Better safe than sorry.

benpryke · 2022-05-27T16:24:08Z

packages/modular-scripts/react-scripts/config/webpack.config.js

+                    : isEnvDevelopment,
+                },
+                undefined,
+                true,


Should this be isEsmView?

Done, thanks!

packages/modular-scripts/react-scripts/config/webpack.config.js

packages/modular-scripts/src/__tests__/esmView.test.ts

packages/modular-scripts/react-scripts/config/cdnStyleLoader.js

benpryke · 2022-05-30T13:11:03Z

packages/modular-scripts/src/__tests__/esmView.test.ts

+    });
+  });
+
+  describe('WHEN we specify an allow / block list', () => {


This test file is very long, and these unit tests may get lost. I think it would be better to put them in a file that makes it clear this is testing filterDependencies.ts.

Factored out in partitionDependencies.test.ts. Why didn't I call it filterDependencies? Because we're testing only one method in the file (partitionDependencies) and the other one - that deals with env variable parsing - is already tested in esmView.test.ts

That's fair enough, though I would have been happy if you'd created a to-be-completed test file as we can always flesh it out later!

benpryke · 2022-05-30T13:19:45Z

packages/modular-scripts/src/utils/filterDependencies.ts

+export function matchDependencies({
+  packageDependencies,
+  // By default, everything in allow list
+  allowList = ['**'],


Re-reading this, I think "allow", "block", and even "matchDependencies" (and "filterDependencies") are not self-descriptive. Really what you're looking for is external vs bundled. It'll be very easy to forget what this function is trying to do or what it's for.

@benpryke I changed terminology to reflect extarnal / bundled in the function that was introduced in this PR, and renamed it to partitionDependencies.
I didn't change it in the rest of the file, since EXTERNAL_BLOCK_LIST and EXTERNAL_ALLOW_LIST were approved months ago, are part of the user interface and not in scope of this PR.

Cristiano Belloni added 6 commits May 18, 2022 17:59

Test loader

b890b6b

Draft a pitching loader

c27091b

Merge remote-tracking branch 'origin/main' into feature/webpack-cdn-css

bbcacaa

Get the submodule path

cf94568

Inject CSS into the page

80d3ec4

Update snapshots

31affac

Remove logs

b94906b

cristiano-belloni marked this pull request as ready for review May 23, 2022 10:06

cristiano-belloni requested review from LukeSheard, benpryke, cangarugula and steveukx May 23, 2022 10:06

cristiano-belloni added this to the ESM View Support milestone May 23, 2022

Create purple-poets-shake.md

8928c73

cristiano-belloni removed request for LukeSheard, benpryke, cangarugula and steveukx May 24, 2022 11:11

cristiano-belloni marked this pull request as draft May 24, 2022 11:45

Cristiano Belloni added 3 commits May 24, 2022 13:33

Better way of calculating submodule

b8145ee

Add tests for css

8a6e6c4

Merge branch 'feature/webpack-cdn-css' of https://github.com/jpmorgan…

41c2b3c

…chase/modular into feature/webpack-cdn-css

cristiano-belloni marked this pull request as ready for review May 24, 2022 17:28

cristiano-belloni requested review from LukeSheard, benpryke, cangarugula and steveukx May 24, 2022 18:05

Add better default for allow list, to support scoped packages. Add de…

ca5f696

…bug info.

Merge remote-tracking branch 'origin/main' into feature/webpack-cdn-css

a2c0ac1

cangarugula reviewed May 27, 2022

View reviewed changes

cristiano-belloni requested a review from cangarugula May 27, 2022 14:16

benpryke reviewed May 27, 2022

View reviewed changes

Cristiano Belloni added 6 commits May 27, 2022 18:16

Actually use the cdn loader only when building esm-views

db22a9a

Fix snaps

7c57c04

Don't destructure logger

efdf06b

Test externalisation mechanism

54c05d7

Add semicolon

be35549

Update snaps

280ceca

cristiano-belloni requested a review from benpryke May 30, 2022 12:00

benpryke reviewed May 30, 2022

View reviewed changes

factor out test and rename variables in filterDependencies

3e6d3e7

cristiano-belloni requested a review from benpryke May 30, 2022 14:04

benpryke approved these changes May 30, 2022

View reviewed changes

cristiano-belloni merged commit 1e72dc4 into main May 30, 2022

cristiano-belloni deleted the feature/webpack-cdn-css branch May 30, 2022 22:02

github-actions bot mentioned this pull request May 30, 2022

Version Packages #1761

Merged

Conversation

cristiano-belloni commented May 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Problem

Solution

Alternative solutions

Other

Uh oh!

changeset-bot bot commented May 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

coveralls commented May 20, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

cristiano-belloni commented May 20, 2022 •

edited

Loading

changeset-bot bot commented May 20, 2022 •

edited

Loading

coveralls commented May 20, 2022 •

edited

Loading