Style scoping prefixes nested CSS

[riskygit]

This input:

<style webc:scoped>
  :host {
    background: green;

    & header {
      color: rebeccapurple;
    }
  }
</style>

Produces:

.wrq7qa4k5 {
  background: green;

  .wrq7qa4k5 & header {
    color: rebeccapurple;
  }
}

Which then gets put into a CSS preprocessor that produces:

.wrq7qa4k5 {
  background: green;
}

.wrq7qa4k5 .wrq7qa4k5 header {
  color: rebeccapurple;
}

The issue is the double .wrq7qa4k5 .wrq7qa4k5. Edit: The transforms need to be run before the bundler modifies :host and does prefixing it seems?

[riskygit]

Actually, it seems I've made a mistake. It doesn't make sense to use nesting inside :host. If you use nesting/minification in another selector (say, & .child inside .container), however, you do end up with something like:

.wrq7qa4k5 :is(.wrq7qa4k5 .container) .child { ... }.

It is an accurate selector from what I can tell, but is that optimal? If prefixing occurs after transforming, then the selector would probably be .wrq7qa4k5 .container .child. Because prefixing occurs first, & becomes .wrq7qa4k5 .container rather than just .container and is then prefixed again. I could be wrong...

[riskygit]

Sad this is still affecting compilation. https://github.com/11ty/webc/blob/100a949aed5f96605bf0280f19f3e4b63a8a581c/src/ast.js#L69 This scoped transform just needs to be done after transforms in bundlePluginOptions are applied.

[riskygit]

Solved using webc plugin for eleventy

[dwighthouse]

@riskygit I recently found this issue. It's the same as what you found: https://github.com/11ty/eleventy-plugin-webc/issues/98

However, you say you've solved it using webc plugin for eleventy? I'm using the webc plugin for eleventy (I think), and I still see this issue. What did you do to fix it exactly? I'm not using any css processors besides what's built in for webc's plugin.

[riskygit]

@dwighthouse It's quite a miserable solution, really, and likely why I didn't document it here. You can monkey-patch https://github.com/11ty/webc/blob/main/webc.js#L220: grab the AST serializer, store the built-in transform within it called css:scoped, and replace it with a function that first performs your desired preprocessing and then calls the stored function. I wish I had a better answer for you.

[dwighthouse]

@riskygit That is pretty awful. Worse that I don't fully understand. I've so far run into three bugs in webc trying to convert my site from primarily nunjucks. And only one of which has a waiting PR for a fix. I'm going to look into trying to implement a fix for this and the other things myself and make a PR or two.

[Zearin]

@zachleat Might want to check out the workaround described in this thread. 👆