search

11ty / eleventy-plugin-webc

Adds support for WebC *.webc files to Eleventy
https://www.11ty.dev/docs/languages/webc/
119 stars 10 forks source link

dynamic attributes not working when using webc:keep #66

Closed niklasgrewe closed 1 year ago

niklasgrewe commented 1 year ago

Dynamic variables are not resolved when using webc:keep

This works ✅

<!-- layouts/base.webc -->

<link rel="stylesheet" href="assets/css/index.css">

<!-- will render to -->
<link rel="stylesheet" href="assets/css/index.css">

But this doesn't work 🚫

<!-- layouts/base.webc -->

<link webc:if="css" webc:keep rel="stylesheet" :href="css">

<!-- will render to -->
<link rel="stylesheet" href="function (...args) {
   benchmark.before();
   let ret = callback.call(this, ...args);
   benchmark.after();
   return ret;
}">
zachleat commented 1 year ago

Can you provide how base.webc is being used? Just trying to glean how you’re setting css.

css is a provided WebC helper from https://github.com/11ty/eleventy-plugin-bundle (and I agree this is confusing)

niklasgrewe commented 1 year ago

my base.webc looks like this:

<!doctype html>
<html lang="en">
   <head>
        <meta charset="utf-8">
    <title @text="title"></title>
    <style @raw="getBundle('css')" webc:keep></style>
   </head>
   <body @raw="content"></body>
</html>
zachleat commented 1 year ago

Ah, then is your original comment mislabeled? I would like to know what css is (or what you expect it to be) in this example:

<!-- layouts/base.webc -->

<link webc:if="css" webc:keep rel="stylesheet" :href="css">

<!-- will render to -->
<link rel="stylesheet" href="function (...args) {
   benchmark.before();
   let ret = callback.call(this, ...args);
   benchmark.after();
   return ret;
}">
niklasgrewe commented 1 year ago

sorry i forgot something... my base.webc looks like this:

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title @text="title"></title>
      <link webc:keep rel="stylesheet" :href="`assets/css/${this.css}`" />
      <style @raw="getBundle('css')" webc:keep></style>
   </head>
   <body @raw="content"></body>
</html>

and inside my home.webc i set the css inside my frontmatter like this:

---
layout: layouts/base.webc
css: home.css
---

but this:

<link webc:keep rel="stylesheet" :href="`assets/css/${this.css}`" />

will render to:

<link rel="stylesheet" href="function (...args) {
   benchmark.before();
   let ret = callback.call(this, ...args);
   benchmark.after();
   return ret;
}">
zachleat commented 1 year ago

Perfect, that’s what I needed, thank you.

zachleat commented 1 year ago

Fixed by https://github.com/11ty/eleventy-plugin-webc/commit/731604f42db28aac1a04dc026bb101fee9b35c0a