Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Closed
darthmall opened this issue Oct 10, 2022 · 5 comments
Closed

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

darthmall opened this issue Oct 10, 2022 · 5 comments
Labels
bug Something isn't working
Milestone
Eleventy WebC Plu...

Comments

@darthmall
Copy link

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>
@zachleat zachleat added bug Something isn't working education labels Oct 14, 2022
@kellenmace
Copy link

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
Copy link

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.

@zachleat zachleat mentioned this issue Oct 27, 2022
Closed
@oliverjam oliverjam mentioned this issue Nov 30, 2022
Closed
@oliverjam
Copy link

The nested layouts workaround doesn't appear to work any more. @zachleat is it possible that the 11ty/eleventy#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 zachleat removed the education label Dec 2, 2022
@zachleat zachleat added this to the Eleventy WebC Plugin v0.8.0 milestone Dec 2, 2022
@zachleat
Copy link
Member

zachleat commented Dec 2, 2022

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

More details in #33

@zachleat
Copy link
Member

zachleat commented Dec 5, 2022 •
edited
Loading

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

darthmall pushed a commit to darthmall/11ty.webc.fun that referenced this issue Jan 13, 2023
Consolidate root.webc and base.webc
2df04f7 
Zach fixed 11ty/eleventy-plugin-webc#11 so the
root.webc layout template is no longer needed to aggregate styles and scripts.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
Eleventy WebC Plugin v0.8.0
Development

No branches or pull requests
5 participants
@zachleat @darthmall @imacrayon @kellenmace @oliverjam