chore/upgrade greenwood v0.30.0 #98

thescientist13 · 2024-03-10T19:59:55Z

Related Issue

N / A

Summary of Changes

Upgrade Greenwood v0.30.0
Refactor to use Constructable / Adopted Stylesheets

TODO

Upstreams

better error handling for CSS url optimization and better handling for data: - bug/issue 1199 gracefully handle unresolvable asset URLs during CSS optimization ProjectEvergreen/greenwood#1235
SPA dev routing is being too greedy - bug/issue 1234 refine spa local dev routing for html requests ProjectEvergreen/greenwood#1251
real production constructable stylesheets -enhancement/issue 923 real production import attributes ProjectEvergreen/greenwood#1259
postcss-import / development CSS bundling - feature/issue 1257 CSS optimization workflow parity ProjectEvergreen/greenwood#1258

netlify · 2024-05-06T17:08:57Z

❌ Deploy Preview for practical-fermat-fa2c48 failed.

Name	Link
🔨 Latest commit	`13cd0f1`
🔍 Latest deploy log	https://app.netlify.com/sites/practical-fermat-fa2c48/deploys/66db349341f5c500086a5ea3

thescientist13 · 2024-05-31T01:08:41Z

Noticed that when combined with the PostCSS plugin-import plugin, FA was being inlined into the final CSS bundles (which is expected because that is its job, hah!)

  body: '/*!\n' +
    ' *  Font Awesome 4.6.3 by @davegandy - http://fontawesome.io - @fontawesome\n' +
    ' *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)\n' +
    ' */\n' +
    '/* FONT PATH\n' +
    ' * -------------------------- */\n' +
    '@font-face {\n' +
    "  font-family: 'FontAwesome';\n" +
    "  src: url('../fonts/fontawesome-webfont.eot?v=4.6.3');\n" +
    "  src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.6.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff2?v=4.6.3') format('woff2'), url('../fonts/fontawesome-webfont.woff?v=4.6.3') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.6.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.6.3#fontawesomeregular') format('svg');\n" +
    '  font-weight: normal;\n' +
    '  font-style: normal;\n' +
    '}\n' +
    '.fa {\n' +

It means Greenwood's CSS optimization has no reference for where to start looking and because of no node_modules signal in the pathname, fails to look it up and completely breaks on lookup, which is obviously not good.

  Error: ENOENT: no such file or directory, open '/Users/owenbuckley/Workspace/analogstudiosri/www.analogstudios.net/src/fonts/fontawesome-webfont.eot'
    at Object.openSync (node:fs:596:3)
    at Object.readFileSync (node:fs:464:35)
    at Object.enter (file:///Users/owenbuckley/Workspace/analogstudiosri/www.analogstudios.net/node_modules/@greenwood/cli/src/plugins/resource/plugin-standard-css.js:56:36)
    at walkNode (file:///Users/owenbuckley/Workspace/analogstudiosri/www.analogstudios.net/node_modules/css-tree/lib/walker/create.js:169:36)
    at List.walkReducer (file:///Users/owenbuckley/Workspace/analogstudiosri/www.analogstudios.net/node_modules/css-tree/lib/walker/create.js:195:61)
    at List.reduce (file:///Users/owenbuckley/Workspace/analogstudiosri/www.analogstudios.net/node_modules/css-tree/lib/utils/List.js:174:22)
    at Object.Value (file:///Users/owenbuckley/Workspace/analogstudiosri/www.analogstudios.net/node_modules/css-tree/lib/walker/create.js:103:31)
    at walkNode (file:///Users/owenbuckley/Workspace/analogstudiosri/www.analogstudios.net/node_modules/css-tree/lib/walker/create.js:180:41)
    at Object.Declaration (file:///Users/owenbuckley/Workspace/analogstudiosri/www.analogstudios.net/node_modules/css-tree/lib/walker/create.js:108:28)
    at walkNode (file:///Users/owenbuckley/Workspace/analogstudiosri/www.analogstudios.net/node_modules/css-tree/lib/walker/create.js:180:41) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/owenbuckley/Workspace/analogstudiosri/www.analogstudios.net/src/fonts/fontawesome-webfont.eot'

Should at least guard for this with a warning message, which I have patched in for now and will need to upstream

if (fs.existsSync(locationUrl.pathname)) {
  // do all the fancy stuff
  optimizedCss += `url('${basePath}${hashedRoot}')`;         
} else {
  // TODO handle  'data:', e.g.  Unable to optimize /Users/owenbuckley/Workspace/analogstudiosri/www.analogstudios.net/src/data:image/svg+xml;charset=utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%204%204'%3E%3Cpath%20stroke='%23fff'%20d='M0%202h4'/%3E%3C/svg%3E.
  console.warn(`Unable to optimize ${locationUrl.pathname}.  You may need to manually copy this file into the output directory.`);
  optimizedCss += `url('${value}')`;
}

thescientist13 · 2024-05-31T01:58:31Z

Wow, this is really nice now using ConstructableStylesheets, and removing the inline @import reference in the CSS is paying off huge for payload sizes 🤩

BEFORE

Before, a copy of Bootstrap and FA would be part of every component bundle file

@import "../../theme.css";

.as-header {
  /** CSS goes here **/
}

import { css, html, LitElement, unsafeCSS, TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
import '../navigation/navigation.ts';
import headerCss from './header.css?type=css';

@customElement('app-header')
export class HeaderComponent extends LitElement {
  static styles = css`${unsafeCSS(headerCss)}`;

  protected render(): TemplateResult {
    return html`
      <header class="as-header">
        <div id="as-inner-header">
          <h1 class="as-header__logo"><a title="Home Page" href="/">Analog Studios</a></h1>
          <app-navigation></app-navigation>
        </div>
      </header>
    `;
  }
}

And thus would really bloat the bundle sizes

AFTER

Now, we can join the two together

.as-header {
  /** CSS goes here **/
}

import { css, html, LitElement, unsafeCSS, TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
import '../navigation/navigation.ts';
import headerCss from './header.css?type=css';

@customElement('app-header')
export class HeaderComponent extends LitElement {
  static styles = css`${unsafeCSS(headerCss)}`;

  protected render(): TemplateResult {
    return html`
      <header class="as-header">
        <div id="as-inner-header">
          <h1 class="as-header__logo"><a title="Home Page" href="/">Analog Studios</a></h1>
          <app-navigation></app-navigation>
        </div>
      </header>
    `;
  }
}

And now the site payload has dropped by 500KB !

In fact, we could probably make all the components use Constructable Styleheets too!

import { html, LitElement, TemplateResult } from 'lit';
import { customElement } from 'lit/decorators.js';
import '../navigation/navigation.ts';
import theme from '../../theme.css' with { type: 'css' };
import header from './header.css' with { type: 'css' };

@customElement('app-header')
export class HeaderComponent extends LitElement {
  static styles = [theme, header];

  protected render(): TemplateResult {
    return html`
      <!-- HTML goes here -->
    `;
  }
}

thescientist13 · 2024-08-03T22:39:48Z

Looks like there might a race condition happening somewhere related to greenwoodSyncImportAttributes in rollup.config.js, and seems specifically related to the use of optimization: 'inline' in greenwood.config.js, in that some of the built files are still including placeholders for Rollup asset bundling, e.g.

import o from"/import.meta.ROLLUP_ASSET_URL_2926c8e7"with{type:"css"};

My guess is that since we are doing these replacements in the generateBundle Rollup hook, the Greenwood code that runs the inline optimization on the HTML code is happening before Rollup has finished running. 🫢

Hmm, so no after upgrading and pulling in changes for ProjectEvergreen/greenwood#1268 I can't seem to reproduce this issue anymore after restoring the inline optimization setting. soooo I guess we're good for now? 🥺

thescientist13 · 2024-11-02T17:22:07Z

Sooooo... now Netlify redirects seems to be failing now? 😳

Local proxy was fine, and so is production?
https://www.analogstudios.net/api/v2/posts

and it works 🤷‍♂️

upgrade greenwood v0.30.0

69d2113

thescientist13 added the chore label Mar 10, 2024

thescientist13 mentioned this pull request Mar 10, 2024

release/0.30.0 ProjectEvergreen/greenwood#1208

Merged

39 tasks

upgrade alpha.2

66e7fe6

thescientist13 added the needs upstream label May 6, 2024

thescientist13 added 3 commits May 6, 2024 13:21

bump netlify.toml node version

1da1b1c

gracefully handle un-resolvable CSS assets

15d6c4f

add patch package and postinstall

2ed1f58

refactor to use constructable stylesheets

dc8c75a

handle data: URLs in CSS optimization

24288c0

This was referenced May 31, 2024

bug/issue 1199 gracefully handle unresolvable asset URLs during CSS optimization ProjectEvergreen/greenwood#1235

Merged

apply CSS optimizations and bundling to CSS (in) modules ProjectEvergreen/greenwood#1227

Open

bump greenwood alpha.3

6ae9dde

thescientist13 mentioned this pull request Jun 22, 2024

bug/issue 1234 refine spa local dev routing for html requests ProjectEvergreen/greenwood#1251

Merged

upgrade v0.30.0-alpha.4

73ba3cc

thescientist13 added feature New feature or request and removed needs upstream labels Jun 29, 2024

thescientist13 added 7 commits June 29, 2024 16:51

restore testing workflow

d199cfb

convert all CSS to use constructable stylesheets

3d62526

remove plugin

529e927

remove plugin from testing

4265ebb

restore postcss plugin

af4d294

restore postcss plugin

3cad5db

real production css modules

acf2334

thescientist13 mentioned this pull request Jul 20, 2024

enhancement/issue 923 real production import attributes ProjectEvergreen/greenwood#1259

Merged

11 tasks

thescientist13 added 2 commits July 20, 2024 20:48

patching with greenwood super css

6dd2ddd

setup patch package

7d77a8d

thescientist13 self-assigned this Jul 21, 2024

thescientist13 added the needs upstream label Jul 21, 2024

thescientist13 added 2 commits August 3, 2024 18:02

patching externalized constructable stylesheets bundling

aca7a36

upgrade greenwood v0.30.0-alpha.5

de83f6e

thescientist13 removed the needs upstream label Aug 3, 2024

thescientist13 added the needs upstream label Aug 3, 2024

thescientist13 added 3 commits September 4, 2024 08:49

patch package support for import attributes polyfill

5b7faa3

restore inline optimization

dfd91c6

patch quiter console logging

13cd0f1

thescientist13 added needs upstream and removed needs upstream labels Sep 6, 2024

upgrade alpha.6

7a8c0cf

thescientist13 removed the needs upstream label Sep 6, 2024

thescientist13 added 2 commits October 19, 2024 20:37

bump to greenwood v0.30.0-alpha.7

038619b

v0.30.0 final

19f16af

thescientist13 marked this pull request as ready for review November 2, 2024 17:18

thescientist13 merged commit fac8efd into main Nov 2, 2024
5 checks passed

thescientist13 deleted the chore/upgrade-greenwood-0.30.0 branch November 2, 2024 23:30

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore/upgrade greenwood v0.30.0 #98

chore/upgrade greenwood v0.30.0 #98

thescientist13 commented Mar 10, 2024 •

edited

Loading

netlify bot commented May 6, 2024 •

edited

Loading

thescientist13 commented May 31, 2024

thescientist13 commented May 31, 2024 •

edited

Loading

thescientist13 commented Aug 3, 2024 •

edited

Loading

thescientist13 commented Nov 2, 2024 •

edited

Loading

chore/upgrade greenwood v0.30.0 #98

chore/upgrade greenwood v0.30.0 #98

Conversation

thescientist13 commented Mar 10, 2024 • edited Loading

Related Issue

Summary of Changes

TODO

Upstreams

netlify bot commented May 6, 2024 • edited Loading

❌ Deploy Preview for practical-fermat-fa2c48 failed.

thescientist13 commented May 31, 2024

thescientist13 commented May 31, 2024 • edited Loading

BEFORE

AFTER

thescientist13 commented Aug 3, 2024 • edited Loading

thescientist13 commented Nov 2, 2024 • edited Loading

thescientist13 commented Mar 10, 2024 •

edited

Loading

netlify bot commented May 6, 2024 •

edited

Loading

thescientist13 commented May 31, 2024 •

edited

Loading

thescientist13 commented Aug 3, 2024 •

edited

Loading

thescientist13 commented Nov 2, 2024 •

edited

Loading