Scoped CSS with :global

[hworld]

I've been having trouble getting certain CSS to output correctly. It works really great when setting styles for classes within the template, but to set styles that will affect child content, it's not so easy/impossible.

I am using the scoped functionality (which is awesome).

In webpack's css loader there is an option for scoped styles where you can put :global before the selector to make it global. It also allows doing something like .something :global( .else ) and it would output something similar to .something[data-v-234] .else {}.

More info here: https://github.com/webpack-contrib/css-loader#css-scope

Currently I am putting all of these rules into a new stylesheet file and just doing a raw require() call to it from within my component file. It'd be great to be able to include all of the styles for the component in one stylesheet, though.

I think the easiest would maybe be to allow just putting :global at the beginning of the line.

.name {
  color: red;
}
:global .title {
  font-weight: bold;
}

Would generate:

.name[data-v-5] {
  color: #f00;
}
.title {
  font-weight: bold;
}

It'd be really great to have support for doing the sort of "scoped" global selector where you can wrap a piece of the selector with :global(), but that may just be totally out of scope.

What are your thoughts on something like this?

[ktsn]

Looks nice. But I'm not so much familiar with CSS transformation (using postcss), so it would not be implemented soon. If you would like to implement it, PR is welcome.

[Toilal]

How is this handled when using vue-loader inside .vue files ?

[hworld]

Just realized that there is an issue in the vue-loader for this exact thing. I guess we'll wait to see what they do: https://github.com/vuejs/vue-loader/issues/661

[ktsn]

Implemented via #32. I'll release it after writing docs.

[ktsn]

I just realized there is a standard combinator >>> in Shadow DOM for the purpose of this use case. I've replaced :global with >>> and released it. Here is the docs

[hworld]

Whoa, this is great! Thanks a bunch for implementing it. I had actually tried my hand at it for a few hours one day and didn't get very far. =P