[Feature Request] add scopeId option

[ije]

This feature is vary useful for Inline Style in UI component with scope:

• vue/sevlte sfc
• styled-jsx
• aleph.js inline style

For example:

const rawCSS = `
.foo {
  color: blue;
  & .bar {
     color: yellow:
  }
}
`

css.transform({
  filename: 'style.css',
  code: Buffer.from(rawCSS),
  scopeId: "data-***",
  drafts: {
    nesting: true
  }
});

/*
Output:

.foo[data-***] {
  color: blue;
}
.foo .bar[data-***] {
  color: blue;
}
*/

then we can inject the data-*** attr into elements of current component:

<div class="foo" data-***>
  <div class="bar" data-***>
    ...
  </div>
</div>

[devongovett]

Seems a bit related to #96. Is there an advantage to using a data attribute rather than renaming the classes to include a hash? #96 proposes making the hash predictable, so you could transform the class attribute in the same way. Would that work, or do we need two different features?

[ije]

i think it is different with #96, think about this:

export default App() {
  return <>
    <h1>hello<h1>
    <style>{`
       h1 { font-size: 100px; }
    `}</style>
  </>
}

I want to apply the h1 style for current component, not globally. But css-moudles only can handle class selector. I expect the output looks like:

<h1 data-scope-id>hello<h1>

h1[data-scope-id] {
  font-size: 100px;
}

And for AST transformer, add a new html/JSX attr is very easy, but rewriting class name is very complex(consider lots of edge cases).

[ije]

Is there an advantage to using a data attribute rather than renaming the classes to include a hash?

As I have known, vue sfc is using data- attr to handle scoped style.

[devongovett]

So the question is, how do you specify how this id is used? There seem to be several different ways it's commonly done:

• styled-jsx uses className="jsx-XXX", and adds a corresponding class selector to each rule
• Svelte works like styled-jsx
• Vue adds a data attribute as described above
• You could also use a data attribute but set the value, like data-scope="XXX"
• etc.

Some of these also seem to have a way of opting out, e.g. :global(...) like what CSS modules has.

A nice thing about CSS modules is that it is somewhat of a "standard", and it's not tied to a specific library or framework, so multiple build tools can implement it. Is there such a spec for this type of scoped styles too, or do we basically have to invent our own yet again? It would be nice if, say, build tools could swap over to Parcel CSS and still work with Vue and Svelte without also changing the template compiler. But I'm not sure that's possible unless we implement all of the ways listed above...

[devongovett]

I think this could be solved by the custom transform API I'm working on (#363).

[devongovett]

The custom transform API is now released. See https://lightningcss.dev/transforms.html. Hopefully you could now solve this case with that. If this becomes a common enough ask, and we can define the way it should work across tools, we could implement it in Lightning CSS core, but now at least it is possible to build yourself.

[ije]

thanks a lot!