Opt-in edition

[derari]

would it be possible/good/... to have an edition where the styles are only applied below a specifically flagged element?

I am currently rebuilding a larger ui and I want to apply missing.css without breaking the entire page. I thinking of something like this:

    <div class="missing-css>
         ... css applies only here ...
    </div>

I had some initial success by modifying css.ts as follows, but there are probably some kinks to iron out

const compile = await bundleAsync({
  filename: input,
  drafts: { nesting: true },
  errorRecovery: true,
  minify: false,
  targets: browserslistToTargets(
    browserslist(">= 0.25%"),
  ),
  visitor: {
    Rule(rule) {
	  if (rule.type != "style") return rule;
	  rule.value.selectors.forEach(function (selector) {
	    selector.unshift({ type: "combinator", value: "descendant" });
	    selector.unshift({ type: "class", name: "missing-css" });
	  });
	  return rule;
	}
  }
});

[dz4k]

It might be possible to do this without a separate edition, but it might have implications on bundle size or selector performance: https://elk.zone/front-end.social/@JaneOri/113737040422137639

🤔 If you're building a CSS library, you could easily give your dev users an option on where to use your library. Default to putting everything on :root unless their HTML directs confinement

:root:not(:has(.my-library-root)),
.my-library-root {
  --bunch-of-library-vars: here;
}