CSS Bundling (and dropping PostCSS as core dependency)

[thescientist13]

Overview

So as part of working on https://github.com/AnalogStudiosRI/www.analogstudios.net I ran into an issue that while solved easily enough in the end, was not immediately obvious to me at the time and felt somewhat unsatisfactory after getting to understand the naunce of the issue .

As part of migrating a SPA from Angular 2+ -> Web Components (w/Lit) I ran into an issue with bundling CSS in the context of Shadow DOM and trying to recreate a design system, that I was worth tracking here. Basically, start with a component that uses a form of CSS in JS (effectively using the CSS Modules approach) that references another CSS file using @import.

header.css

@import "../../theme.css"; /* this is the important part */

h1 {
  color: red;
}

header.js

import { css, html, LitElement, unsafeCSS } from 'lit';
import headerCss from './header.css?type=css';

class HeaderComponent extends LitElement {
  constructor() {
    super();
  }

  static get styles() {
    return css`
      ${unsafeCSS(headerCss)}`;
  }

  render() {
    return html`
      <header class="as-header">
        <h1 class="as-header__logo"><a title="Home Page" href="/">Analog Studios</a></h1>
      </header>
    `;
  }
}

customElements.define('app-header', HeaderComponent);

When building, the issue is that the @import statements are not getting processed and so when running yarn serve you would see 404s for these files.

Proposal

It seems for now the easiest solution is the one I ended up using, which was to just add the postcss-import PostCSS plugin to the project's postcss.config.js:

module.exports = {
  plugins: [
    require('postcss-import'), // added this one
    require('postcss-nested')
  ]
};

Ideally it would great to drop PostCSS from the default CLI installation (it is used in rollup.config.js and figure out how to handle this on our own, especially in an ESM world where we won't need this plugin (see #606 ) , hopefully this is something we can make as first class as we do JavaScript, which may require using Rollup, but at least then we can drop some dependencies from the CLI and / or offload it to the postcss plugin.

So some high level goals to aim for off the top of my head:

1. Standards first with support for import.meta.url, Constructible Stylesheets, and CSS Modules
2. Dependency free - other than maybe Rollup, so as to at least consolidate if a tools is needed
3. Zero runtime - it should generate no more can then the original source code authored
4. Handle minification and the usual standard production build niceties (replacement for cssnano which unfortunately has. a hard dependency on PostCSS
5. Determine what is best for hydration / caching performance, in terms of if CSS should get extracted out of the CSS or not

[thescientist13]

Some approaches being shared in the Lit Slack around managing global styles that might be worth keeping in mind in terms of use cases to support.

we are importing the global CSS within each component. This is a pain in the neck, but not a serious issue at all and we have not noticed a performance issue yet.
One thing I've experimented with is creating a JS file with the global CSS like this:

export const globalCSS = css`       
  css..code..
`

Then on each component I just add this is like this:

static get styles {
  return [
    globalCSS,
    css`       
      component...css..code...
    `
  ]
}

---

For the moment I’m evaluating this path, including the global CSS in every component (causes FUOC unfortunately):
I created a Method Decorator which adds an <style>@import "/assets/styles.css"</style> to the component’s template
I’m using it like this:

@withGlobalStyles()
render() {
  return html`...`;
}

So that I don’t have to bother adding the same @import in every component’s template. I don’t quite like it but it’s the best I’ve found so far for adding CSS sources directly 😕

---

Really good issue here about trying to work with global styles and WCs - WICG/webcomponents#909

[thescientist13]

Other good links

• https://web.dev/css-module-scripts/
• [RFC] Design Systems + Theming #111

[thescientist13]

Hmm, with ParcelCSS being just released, if it can handle @import rules, we might have a winner! 🥳

edit: looks like it can!

Parcel CSS is based on the cssparser Rust crate, a browser-grade CSS tokenizer created by Mozilla and used in Firefox. This provides a solid foundation, including tokenization and basic parsing. However, it does not interpret any CSS properties or at rules. That's where Parcel CSS comes in. It handles parsing each individual rule and property value, as well as minification, compilation, and printing back to CSS.

[thescientist13]

Maybe just go with a CSS AST?
https://github.com/csstree/csstree

[thescientist13]

implemented here as part of the v0.27.0 release - #980