Lightning CSS

[thescientist13]

Overview

It's quite impressive to see how fast CSS is moving these days, and the incredible features coming to the language are super exciting and valuable to developers, and users since some of these capabilities no longer require JS (if applicable). A little while ago, Greenwood dropped its core dependency on PostCSS](#763) for the sake of bundling / minification and replaced it with an AST tool called csstree.

However, now being at that intersection of new CSS features and using csstree, it seems like csstree is not able to keep up with some of these new features, unfortunately

• [Question] Is it possible to get the full selector for a nested rule? csstree/csstree#210
• Support container queries csstree/csstree#174
• oklch() support csstree/csstree#244

We also have to keep up with these ourselves at time as well

• handling AttributeSelector matcher csstree/csstree#207
• support all CSS function pseudo classes / elements for CSS optimizing #1178
• add support for optimizing the CSS :has / :is pseudo-selectors #1106
• support bundling of url properties (like for @font-face + src) during CSS file optimization #1199
• CSS Modules ™️ plugin #1233
• bug/issue 1199 gracefully handle unresolvable asset URLs during CSS optimization #1235
• functions in CSS declarations (like CSS var) are being incorrectly optimized #1242

Proposal

Since Greenwood should absolutely be aligned and support standards based CSS as much as possible, and realizing that short of building this entire dependency ourselves, we should at least recognize if there are alternate options that are standing at the forefront of our ecosystem.

One of these appears to be Lightning CSS, which is absolutely at the forefront of modern CSS features, syntax, bundling and minification, and even has support for CSS Modules, which at least in a naive capacity, Greenwood (plans to) supports as a plugin.

Not only that, Tailwind is betting big on Lightning CSS as well, with the v4 dropping PostCSS entirely in favor of it.

One dependency — the only thing the new engine depends on is Lightning CSS.

If there's any tool that needs to be at the forefront of CSS features, it's Tailwind. Additionally, the creator of Lightning CSS also created Parcel and React Aria.

Considerations

Interestingly enough, as part #980 we did evaluate Parcel CSS at the time, but there was a particular feature in PostCSS that we leverage that was not supported at the time, the ability to configure a "starting" directory for a given file to be processed

Additionally, would be nice to evaluate

• following / bundling @importrules
• setting the relative "from" option in PostCSS parse config

  Getting a 404 on nested CSS paths when deep link refreshing, e.g. /blog/releases/0.27.0 - seems that only the bundle method supports inlining @import, but it requires a file to seed the compiler. Which means we have to work on scratch files, but that loses the context of relative paths, which is something PostCSS Import had a solution for.
  so there is a custom resolver, but it borks on non-relative URLs? (like google font URLs)

[thescientist13]

Wonder if Lightning CSS would help with this issue observed here with content using octal values not being supported in csstree?

[thescientist13]

Actually, doing some initial testing in the website and seems nesting is actually working!? 🤩

.page-content {
  & h1 {
    font-size: var(--font-size-5);
    margin: var(--size-4) 0 0;
  }
}

So maybe it's just that css-tree can't give rich information about this as part of the AST, but our basic walking / parsing seems to preserve the ruleset intact, so that's all that really matter, right!? 💯

[thescientist13]

Ah, so I tested without the & and it does seem that css-tree hiccups BUT, it appears the syntax still makes it out the other end OK though?

.page-content {
  max-width: 100ch;
  padding: 0 var(--size-4);
  margin: var(--size-4) 0 0;

  h2, p {
    margin: var(--size-4) 0;
    color: red;
  }
}

will output this in the terminal

success, done generating all pages!
bundling static assets...
Parse error: Colon is expected
    5 |        margin: var(--size-4) 0 0;
    6 |
    7 |        h2, p {
-----------------^
    8 |          margin: var(--size-4) 0;
    9 |          color: red;

Looking at the MDN docs on nesting, it does seem to indicate that the & is optional, it just might alter the selection semantics.

[thescientist13]

For VSCode users - microsoft/vscode-css#9