Scripts and styles are not aggregated in the root WebC layout template

darthmall commented 2 years ago

If you’re using WebC for layout templates, you can’t put WebC components in the layout that calls this.getCSS or this.getJS and have its styles and scripts be aggregated.

Let me know if you’d like a repo with a reproduction of the issue.

Example

site-footer.webc

<footer>
  <p>&copy; 2022 Yours Truly</p>
</footer>
<style>
  footer {
    font-family: fantasy;
  }
</style>

base.webc

<!doctype html>
<html>
<head>
  <style @html="this.getCSS(this.page.url)"></style>
</head>
<body>
  <site-footer webc:nokeep></site-footer>
</body>
</html>

Output

<!doctype html>
<html>
<head>
  <style></style>
</head>
<body>
  <footer>
    <p>&copy 2022 Yours Truly</p>
  </footer>
</body>
</html>

Note the empty <style> tag.

Workaround

You can work around this issue by adding a template in the layout chain so that you aren't including styled components in your root layout template.

root.webc

<!doctype html>
<html>
<head>
  <style @html="this.getCSS(this.page.url)"></style>
</head>
<body @html="this.content"></body>
</html>

base.webc

---
layout: root.webc
---
<site-footer webc:nokeep></site-footer>

kellenmace commented 2 years ago

Confirming that I'm encountering similar issues. When I follow along with the Crash Course in Eleventy’s new WebC Plugin YouTube video and insert <style @html="this.getCSS(this.page.url)"></style> into the layout.webc file, then build the site, I get an empty line where the aggregated styles should appear, like this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>

  </head>
  <body><my-component>HELLO I AM A COMPONENT
</my-component></body>
</html>

imacrayon commented 2 years ago

I think I might have the same issue using a different approach: I tried creating a layout.webc component with a slot:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>...</title>
    <style @html="this.getCSS(this.page.url)"></style>
  </head>
  <body>
    <slot></slot>
  </body>
</html>

Then, instead of setting the layout using front matter, I used the layout as a component in page.webc like this:

<layout>
  <p>Page content</p>
  <my-component></my-component>
</layout>

<my-component> is compiled as expected, but getCSS doesn't generate any styles.

oliverjam commented 2 years ago

The nested layouts workaround doesn't appear to work any more. @zachleat is it possible that the https://github.com/11ty/eleventy/issues/2654 fix stopped this working? Since nested WebC layouts are correctly treated as layouts now.

Given that layouts ideally need to support bundling, is there a better solution than disabling it for only the root layout (assuming 11ty knows which one that is). This would be awkward but at least documentable as a way to bundle components that are used in layouts.

zachleat commented 2 years ago

Shipping this with Eleventy WebC v0.8.0 (likely Monday).

More details in #33

zachleat commented 1 year ago

Eleventy WebC v0.8.0 is out! https://github.com/11ty/eleventy-plugin-webc/releases/tag/v0.8.0

11ty / eleventy-plugin-webc