Skip to content

v0.33.0-alpha.2

Pre-release
Pre-release

Choose a tag to compare

View all tags
@thescientist13 thescientist13 released this 01 Jul 01:38
· 138 commits to master since this release
v0.33.0-alpha.2
91ddd64

Overview

This release in the v0.33.0 release line addresses issue with layouts and pages not merging in certain cases, introduces bare CSS @import specifiers bundling support, and fixes a minor bugs with the Init scaffolding CLI.

🚨 NOTE: There were a couple small regressions as a result of the layouts and pages merging change so please review the Known Issues section below to see if they might impact you. This change may also be a "breaking" change to your app, so please review the Breaking Changes section as well.

# npm
$ npm i -D @greenwood/cli@alpha

# Yarn 1.x (classic)
$ yarn upgrade @greenwood/cli@alpha --dev

# pnpm
$ pnpm i -D @greenwood/cli@alpha

Changelog

https://github.com/ProjectEvergreen/greenwood/issues?q=label%3Av0.33.0%20label%3Aalpha.2

  1. support bundling bare CSS @import specifiers
  2. inconsistent HTML output merging hierarchy for top level pages and layouts
  3. fix init project scaffolding version being to set to current Greenwood version
  4. nested export conditions for import map generation not working (showing [object Object])
  5. set init engines field in package.json to match CLI
  6. set minimum init TypeScript target compiler setting in tsconfig.json

Features (Early Access)

Bare CSS @import specifiers bundling

With this new version of Greenwood, bundling of bare CSS @import specifiers are now supported

/* tired 🥱 */
@import "../../node_modules/open-props/sizes.min.css";

/* wired 😎 */
@import "open-props/sizes";

⚠️ There is a known caveat with Node's import.meta.resolve where it cannot run in loader hooks, which Greenwood uses when running in SSR mode, so this feature will not be viable in cases where you might want to inline CSS into your HTML from a SSR routes

  • ✅ <link> tags 
    <html>
  <head>
    <link rel="stylesheet" href="../styles/theme.css" />
  </head>
  <! -- -->
</html>
  • ✅ CSS Import Attributes 
    import themeSheet from '../styles/theme.css' with { type: 'css' };

export default class Card extends HTMLElement {
  connectedCallback() {
    // ...
  
    this.shadowRoot.adoptedStyleSheets = [themeSheet];
  }
}
  • ❌ Inline CSS 
    import styles from '../styles/theme.css?type=raw';

export default class HomePage extends HTMLElement {
  connectedCallback() {
    this.innerHTML = `
      <html>
        <head>
          <style>
            ${styles}
          </style>
         <!-- ... -->
      </html>
    `
  }
}

Additional details can be found here - ProjectEvergreen/www.greenwoodjs.dev#214

Breaking Changes

Layouts and Pages Merging

Prior to this release, there as a hard "stop" to which pages could "merge" into layouts. For example, this would work

src/
  layouts/
    page.html
  pages/
    index.md

However, none of these would merge

src/
  layouts/
    page.html
  pages/
    index.html
    about.js
    contact.ts

With this change, all page formats can now participate in the pages <> layout hierarchy merging, and while not a breaking change in terms of functionality, we are treating it more as a potential breaking change in terms of behavior / outcome based on your project, so cataloging it in this section to be safe.

As mentioned prior, a few small regressions were observed as called out in the Known Issues section below. This may require explicitly setting the layout property in your frontmatter as otherwise the default is that now everything will default to a page layout.

Additional details can be found here - ProjectEvergreen/www.greenwoodjs.dev#217

Known Issues

  1. reconcile page level custom title and layout <title> merging when using active content
  2. page contents overriding layouts content when no outlet marker is being used
  3. pre-rendered SSR routes with a <body> tag causing a build error

Diff

v0.33.0-alpha.1...v0.33.0-alpha.2

Assets 2
Loading