demo/home page greenwood Super CSS (SCSS) optimizations

[thescientist13]

Related Issue

Testing something related to improving:

1. Optimizing (e.g. inlining @import) rules during development (too)
2. CSS Modules output bundling - Isomorphic (Reflected) Import Attributes Support greenwood#1216

Summary of Changes

Optimizing @import

Currently this project was using postcss-import specifically to inline @import rules when used within Constructable Stylesheets

// in our case theme.css itself @imports Open Props, Prism, etc
import themeSheet from '../theme.css' with { type: 'css' };
import headerSheet from './header.css' with { type: 'css' };

export default class Header extends HTMLElement {
  connectedCallback() {
      this.attachShadow({ mode: "open" });
     
      //...
      this.shadowRoot.adoptedStyleSheets = [themeSheet, headerSheet];
  }
}

because without it we would just have unresolved @import paths

and @import paths is not allowed in Declarative Shadow DOM

This is something Greenwood was already doing during production builds, so now this change just brings (most) of that behavior to development as well. (see Observations section for more thoughts here)

"Real" Production Constructable Stylesheets

This is the real notable one, as before, our production bundling implementation actually was in-lining the contents of a Constructable Stylesheet, due just to the known limitations of what / how we thought it was possible to achieve.

However, I completely overlooked a concept often used in bundling called externals, which essentially means externalizing modules from the bundler graph, aka. just skipping over them. This is great since if we try to feed raw CSS to Rollup it will of course break since it's not JS, but with externals, we tell Rollup to ignore this and thus it will stay a CSS file in production.

For example taking this basic example

// in our case theme.css itself @imports Open Props, Prism, etc
import themeSheet from '../theme.css' with { type: 'css' };
import headerSheet from './header.css' with { type: 'css' };

export default class Header extends HTMLElement {
  connectedCallback() {
      this.attachShadow({ mode: "open" });

      //...
      this.shadowRoot.adoptedStyleSheets = [themeSheet, headerSheet];
  }
}

What would output before would be something like this

and now, after, it looks like this! ✨

and what's cooler, we can still re-use the original reference to something like theme.852017890.css so there is only one source of truth! which will work great with caching

TODOs

1. "real" JSON modules
2. how to exclude module.css?
3. avoid all one-offs getting sent to /assets (also, should probably prefix with base) - use fileName option in this.emitFile
4. need to handle inline optimization bundle mapping edge case (see chore/upgrade greenwood v0.30.0 AnalogStudiosRI/www.analogstudios.net#98)

might be nice to lean further into the "inline" configuration option here so CSS / JSON modules could optionally get inlined instead of the standard import / external HTTP request convention (new issue)

import sheet from './styles.css' with { type: 'css', optimization: 'inline' };

Upstreams

1. Issue tracking for CSS optimizing in dev mode (plus PostCSS plugin README callout / styles and assets docs) - CSS optimization workflow parity during development (inlining @import statements) greenwood#1257
2. PR for import attributes bundling and comment in our ongoing discussion around this topic - TBD

---

Related to CSS Modules, occasionally getting this Unexpected end of JSON input, probably a race condition with the hacky shared module file approach I'm using, really would be nice to have a better implementation when porting

node:internal/event_target:1062
  process.nextTick(() => { throw err; });
                          ^
SyntaxError [Error]: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at getCssModulesMap (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/plugin-css-modules.js:20:26)
    at CssModulesResource.shouldIntercept (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/plugin-css-modules.js:194:27)
    at getCustomLoaderResponse (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/@greenwood/cli/src/loader.js:60:48)
    at async load (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/@greenwood/cli/src/loader.js:102:28)
    at async nextLoad (node:internal/modules/esm/hooks:864:22)
    at async Hooks.load (node:internal/modules/esm/hooks:447:20)
    at async handleMessage (node:internal/modules/esm/worker:196:18)
Emitted 'error' event on WorkerPool instance at:
    at Worker.<anonymous> (file:///Users/owenbuckley/Workspace/project-evergreen/www.greenwoodjs.dev/node_modules/@greenwood/cli/src/lib/threadpool.js:49:14)
    at Worker.emit (node:events:517:28)
    at [kOnErrorMessage] (node:internal/worker:314:10)
    at [kOnMessage] (node:internal/worker:325:37)
    at MessagePort.<anonymous> (node:internal/worker:225:57)
    at [nodejs.internal.kHybridDispatch] (node:internal/event_target:786:20)
    at exports.emitMessage (node:internal/per_context/messageport:23:28)

[thescientist13]

all of this is now available as of v0.30.0-alpha.5!