CSS Modules does not support deep selector

[hoomersinpsom]

What problem does this feature solve?

when using css modules, the deep selector '>>>' does not work at all, when using css scoped it works fine, would be great if css modules has this feature

What does the proposed API look like?

<style lang="postcss" module>
.container  >>> .children {
  color: red;
}
</style>
// should be parsed to

<style type="text/css">
.container_Xz11 .children{
  color: red
}
</style>

[posva]

@hoomersinpsom transfered to #1703

[ms-fadaei]

@posva any update?

[rijenkii]

vuejs/core#7524

Because :deep() is specifically as feature of scoped css, not module. It does not translate to how CSS modules work.

This issue can be closed as "won't fix" I assume.

[rijenkii]

After a bit of research, it turns out that CSS Modules has its own analog of :deep -- :globlal!
https://github.com/css-modules/css-modules#exceptions

Example:

.parent > :global(.child) {}

Is compiled to:

._parent_pjgkn_1 > .child {}

[PerpetualWar]

If we are using css modules exclusively in a project, and this is not supported, how to update child component styles from parent?

[rijenkii]

There is no way to target a class defined in a child's <style module>.
Consider adding a parameter to the child to control its style.

Alternatively, you can define some classes in a regular <style>, use them in your child component and then target them from parent with :global().

[joey-carlisle4]

After a bit of research, it turns out that CSS Modules has its own analog of :deep -- :globlal! https://github.com/css-modules/css-modules#exceptions

Example:

.parent > :global(.child) {}
Is compiled to:

._parent_pjgkn_1 > .child {}

link update https://github.com/css-modules/css-modules/blob/master/docs/composition.md#exceptions