CSS Strategy #7

thescientist13 · 2023-11-04T20:08:59Z

thescientist13
Nov 4, 2023
Maintainer

Overview

Would like to explore possible CSS strategies for the new site, with a few options off the top of my head, assuming light DOM rendering

CSS Modules
Tailwind
Vanilla

Some specific goals / requirements I care about are:

It must emit actual CSS, be it compiled or otherwise, but no CSS-in-JS
No nested <style> blocks, as this can interrupt HTML parsing and lead to greater FOUC
Would like to keep CSS co-located, so header.js + header.css

CSS Modules

There currently isn't a mechanism for CSS Modules with Greenwood, but I would certainly be open to developing it, as I like the authoring experience of vanilla CSS, but with binding / co-location to its usage.

/* style.css */
.className {
  color: green;
}

import styles from "./style.css";
// import { className } from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';

Tailwind

I've used Tailwind with a couple projects and works really well with Light DOM, statically pre-rendered custom elements. Greenwood already has support for PostCSS so this is definitely a good option as well.

Vanilla CSS

This option could be ok, but the part I'm concenred about is co-location, as the options would have to be:

Global CSS file
Inline CSS per component

The problem with the second option, is if we have something like this

export default class Header extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <style>
        h1 {
          color: red;
        }
      </style>

       <header>
         <h1>Welcome to Greenwood!</h1>
       </header>
    `;
  }
}

Which would leave a bunch of <style> tags throughout the HTML, which wouldn't be as performant, and would cause constant reflows / repaints on load as the HTML parser keeps hitting these tags, and could lead to a greater impact of FOUC.

aholtzman · 2023-11-06T11:20:18Z

aholtzman
Nov 6, 2023
Collaborator

With the spirt of the project to keep things as close to the standards as possible, I would vote for CSS Modules. Tailwind would also create more dependencies, something that has generally been avoided when possible on this journey.

1 reply

thescientist13 Nov 22, 2023
Maintainer Author

Well, at the end of the day the complexity for the convenience of either solution has to come from somewhere. While PostCSS + Tailwind is effectively an optimizing compiler just working on narrowing a massive CSS file (all the Tailwind classes) based on matching on class names in input files, CSS Modules requires a bit more work / orchestration under the hood.

As CSS Modules is just a specification (with an implementation for webpack and PostCSS) the general gist as I understand it, is that an implementation would need to handle the following:

Process CSS files based on knowing their usages within JS files, e.g. processing import styles from './header.module.css';
Create an object of class names in the file to an object for reference within the JS template
Inject that CSS into the <head> of the page
From there, rewrite / hash classnames or at least scope them
Stitch the classnames statically back into the JavaScript module (and in theory removing the original import styles ... statement to remove any runtime overhead)

So basically given something like this

import styles from './header.module.css';

export default class Header extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <header>
        <h1 class="${styles.heading}">Welcome to Greenwood!</h1>
      </header>
    `;
  }
}

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

.heading {
  color: blue;
  text-align: center;
}

The outcome / output would look something like this when it is all said and done:

Extract the CSS and at least do basic scoping

.header-heading {
  color: blue;
  text-align: center;
}

Embed the CSS into the <head> of the document inline (or save to a file and <link>)

 <head>
   <style>
     .header-heading{color:blue;text-align:center;}
   </style>
 </head>

Transform the JS to inline the class names and remove the CSS Module import line in the JS too so as to avoid any runtime overhead

export default class Header extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <header>
        <h1 class="header-heading">Welcome to Greenwood!</h1>
      </header>
    `;
  }
}

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

For proper alignment / expectations with CSS Modules, would need to comply with all items captured in the ICSS specification

That said, I've created a draft PR ( #11 ) to start playing around with it and made some decent progress after only hacking on it for a few hours, so definitely take a look and see what you think. So far this has involved leveraging three ASTs / APIs for parsing content including html-parser, css-tree, and acorn (+ acorn-walk), which are technically already deps of @greenwood/cli so... not sure how to score that? 😅 🤷‍♂️

Either way, this will definitely be a plugin so if users feel they are OK with opting into that overhead for that workflow they can, which is more or less the same investment as using our PostCSS plugin + Tailwind, so low friction whichever path you take. 🤞

Will plan to review / demo during our next weekly meeting. 👍

thescientist13 · 2023-11-22T19:30:56Z

thescientist13
Nov 22, 2023
Maintainer Author

Perhaps this could more align with the vanilla or CSS Modules approaches, but it might be cool to leverage Open Props as our (sub) atomic utility library?

0 replies

thescientist13 · 2024-05-25T20:39:24Z

thescientist13
May 25, 2024
Maintainer Author

Final strategy documented here - ProjectEvergreen/greenwood#1234

0 replies

thescientist13 · 2024-06-06T01:46:19Z

thescientist13
Jun 6, 2024
Maintainer Author

Ok, we're locked in, here goes nothing! 🤞

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

CSS Strategy #7

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 4 comments 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

CSS Strategy #7

Uh oh!

Uh oh!

thescientist13 Nov 4, 2023 Maintainer

Overview

CSS Modules

Tailwind

Vanilla CSS

Replies: 4 comments · 1 reply

Uh oh!

aholtzman Nov 6, 2023 Collaborator

Uh oh!

Uh oh!

thescientist13 Nov 22, 2023 Maintainer Author

Uh oh!

thescientist13 Nov 22, 2023 Maintainer Author

Uh oh!

thescientist13 May 25, 2024 Maintainer Author

Uh oh!

thescientist13 Jun 6, 2024 Maintainer Author

thescientist13
Nov 4, 2023
Maintainer

Replies: 4 comments 1 reply

aholtzman
Nov 6, 2023
Collaborator

thescientist13 Nov 22, 2023
Maintainer Author

thescientist13
Nov 22, 2023
Maintainer Author

thescientist13
May 25, 2024
Maintainer Author

thescientist13
Jun 6, 2024
Maintainer Author