1804969 - Create a webpack plugin to re-write chrome JS URLs for Storybook

Status: RESOLVED FIXED

(Firefox :: General, enhancement, P3)

Description

[Hanna Jones [:hjones]]

Storybook can't handle chrome: urls, and as a result we've had to add code like this to our newer components:

// Use a relative URL in storybook to get faster reloads on style changes.
static stylesheetUrl = window.IS_STORYBOOK
    ? "./moz-toggle/moz-toggle.css"
    : "chrome://global/content/elements/moz-toggle.css";

...

<link rel="stylesheet" href=${this.constructor.stylesheetUrl} />

This works well, but it would be nice to handle the CSS URL logic in a single place so we can remove this Storybook specific code from our different components.

One way to do this is to write a custom Webpack loader and use it in .storybook/main.js. I got the following code that rewrites chrome URLs to a relative path working as a POC:

// rowser/components/storybook/.storybook/replace-chrome-css.js

// eslint-disable-next-line
module.exports = function(source) {
  // My regex skills are pretty much non-existent, so there's almost 
  // certainly a better way to do all of this.
  const chromeCSSRegex = /chrome.+\.css/g;
  return source.replace(chromeCSSRegex, function(match) {
    const start = match.lastIndexOf("/") + 1;
    const end = match.lastIndexOf(".");
    const fileName = match.slice(start, end);
    // Hack to avoid replacing the path for in-content/common.css for now
    if (fileName === "common") {
      return match;
    }
    return `./${fileName}/${fileName}.css`;
  });
};

// browser/components/storybook/.storybook/main.js
...
config.module.rules.push({
    test: /\.mjs$/,
    loader: path.resolve(__dirname, "./replace-chrome-css.js"),
});
...

We would want to tweak this a bit, maybe adding something like the following so that we can specify what path to use in place of the chrome URL:

const rewrites = {
  "chrome://browser/skin/migration/migration-wizard.css": "./migration/migration-wizard.css",
};

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::CSS Parsing and Computation' component, and is moving the bug to that component. Please correct in case you think the bot is wrong.

Comment 2

[Mark Striemer [:mstriemer]]

Attachment: Bug 1804969 - Rewrite chrome:// JS imports in Storybook r?mconley,hjones

This patch will rewrite all chrome:// URLs in .mjs files, but it isn't
emitting proper URLs for assets. This means that JS imports will map
correctly, but any img/css references won't have a valid path outside of
local development and CSS files that use @import will not resolve imports
correctly.

To reference images and CSS files you will still need to ensure those files
are in the Storybook static path and use a separate URL to reference them
in the window.IS_STORYBOOK case.

Comment 3

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/9fa0c0b8ac49
Rewrite chrome:// JS imports in Storybook r=mconley,hjones

Comment 4

[Cristian Tuns]

https://hg.mozilla.org/mozilla-central/rev/9fa0c0b8ac49