Unable to bundle multiple buckets to file URLs

douglas-johnson commented 1 year ago

Thank you for responding to my previous comment here: https://github.com/11ty/eleventy-plugin-webc/issues/4#issuecomment-1441176246

I tried to use WebC 0.9.0 as suggested. I was able to get a single bundled CSS file, but bucketing was not working for me. Here is a reduced example of what I'm seeing.

I am on these versions of the related dependencies:

"@11ty/eleventy": "^2.0.0",
"@11ty/eleventy-plugin-bundle": "^1.0.1",
"@11ty/eleventy-plugin-webc": "^0.9.0"

Input

eleventy.config.js

const pluginWebc = require( "@11ty/eleventy-plugin-webc" );
const bundlerPlugin = require("@11ty/eleventy-plugin-bundle");

module.exports = function(eleventyConfig) {
  eleventyConfig.addPlugin( pluginWebc, {
    components: '_components/**/*.webc'
  });
  eleventyConfig.addPlugin(bundlerPlugin);
  return {
    htmlTemplateEngine: "webc"
  }
}

index.webc

---
layout: "layouts/main.webc"
---
<main>
  <p>Test</p>   
</main>

layouts/main.webc

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" :href="getBundleFileUrl('css')" webc:keep />
  </head>
  <body>
    <site-header webc:nokeep></site-header>
    <div @html="content" webc:nokeep></div>
    <site-footer webc:nokeep></site-footer>
    <link rel="stylesheet" type="text/css" :href="getBundleFileUrl('css', 'defer')" webc:keep />
  </body>
</html>

site-header.webc

<style>
p {
  color: blue;
}
</style>
<header webc:root="override">
  <p>Head</p>
</header>

site-footer.webc

<style webc:bucket="defer">
p {
  color: red;
}
</style>
<footer webc:root="override">
  <p>Feet</p>
</footer>

Output

_site/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="/bundle/ZBjbc84u7A.css">
  </head>
  <body>
    <header>
      <p>Head</p>
    </header>
    <main>
      <p>Test</p>   
    </main>
    <footer>
      <p>Feet</p>
    </footer>
    <link rel="stylesheet" type="text/css" href="/bundle/47DEQpj8HB.css">
  </body>
</html>

_site/bundle/ZBjbc84u7A.css ( default bucket, looks like I expected )

p {
  color: blue;
}

_site/bundle/47DEQpj8HB.css ( defer bucket, empty )

Gyanreyer commented 1 year ago

I just encountered this issue as well! It's a bug introduced in v0.9.0, so I just opened a PR with a fix.

douglas-johnson commented 1 year ago

I just encountered this issue as well! It's a bug introduced in v0.9.0, so I just opened a PR with a fix.

Thanks @Gyanreyer ! I'm glad to know it wasn't just me.

zachleat commented 1 year ago

Sorry about that folks! I’ll get a v0.9.1 up shortly with this PR—thank you @Gyanreyer!

zachleat commented 1 year ago

Just as a side note: "@11ty/eleventy-plugin-bundle" is bundled by the Eleventy WebC plugin so it’s superfluous in your app package.json!

zachleat commented 1 year ago

Fixed by #57

11ty / eleventy-plugin-webc

Unable to bundle multiple buckets to file URLs #56

Input

Output