11ty / 11ty/webc

`<link rel="stylesheet">` elements generated in `webc:for` are removed for bundling but not part of the bundle

Open
#188 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
1.4k
Forks
46
Avg merge
10m
Merged PRs (30d)
2

Description

Compiling <link webc:for="href of stylesheets" rel="stylesheet" :href="href"> shows the css files are found, the element is removed from the HTML output, but the default bundle is missing the CSS.

<template webc:if="stylesheets" webc:nokeep>
  <link webc:for="href of stylesheets" rel="stylesheet" :href="href">
</template>

^ This is also not working... same issue; HTML is excised, but CSS is not bundled.

<script webc:type="js">
  if (Array.isArray(stylesheets)) {
    stylesheets.map(href => `<link rel="stylesheet" href="${href}">`).join("");
  }
</script>

^ Edit: This works... isn't this also implicitly a template? I don't know why this would work and not the other.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the compilation with the webc:for stylesheet example and compare it with the working webc:type="js" example. Trace how generated <link rel="stylesheet"> elements are discovered, removed from HTML, and added to the default bundle; done means the generated HTML is unchanged while the referenced CSS is included.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, javascript
Domain
build-system, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.