v-bind in CSS doesn't work with imported styles
Version
3.2.31
Reproduction link
Steps to reproduce
Use the v-bind in CSS feature in a CSS file and import the file in the style block of a SFC.
What is expected?
- Style parsed and converted into custom property
- Custom property applied via inline-styles
What is actually happening?
Style doesn't get applied
While this feature could be added, I don't think it makes sense to have a v-bind() in an external CSS as the origin of the variable would be confusing and implicit.
This intended - since the same CSS file may be imported by multiple different SFCs, v-bind() usage in the imported file will become semantically ambiguous - which SFC's state should it bind to?
@yyx990803 & @posva that makes sense. I would argue though that the behavior is unexpected (POLA?) and thus warrants a warning/mention in the docs.
@yyx990803 @posva I think that this information should be added to the docs. It took me a little while until I landed here in this issue.
Despite this logic hole, I think this should be possible - even with extra settings to become aware of the behaviour. We have a framework with more than 100 components that contain a lot of code and props (especially styles for different status of our components that we can't move to sub-components). I don't want a vue single file with +900 lines just because the (s)css and