search

RadValentin / postcss-prefix-selector

Prefix all CSS rules with a selector
MIT License
166 stars 16 forks source link

Selectors starting with data attributes not working correctly #79

Closed flyingL123 closed 4 years ago

flyingL123 commented 4 years ago

I am having an issue prefixing some of my styles that are being generated with vue-cli. I only have one line configuring the postcss-prefix-selector plugin:

prefix: '.my-wizard '

In the css output I can see the plugin correctly prefixed some of my styles. For example, this:

.bottom-border[data-v-843ce414]

Was transformed to this:

.my-wizard .bottom-border[data-v-843ce414]

However, styles that begin with the data attribute are getting transformed without a space after the prefix. For example, this:

[data-v-843ce414] .v-tab

Gets transformed to this:

.my-wizard[data-v-843ce414] .v-tab

The outputted style doesn't work correctly because it's missing a space after the prefix.

Is this a bug, or am I doing something incorrectly.

UPDATE I think this may be an issue related to the order that this plugin runs compared to vue-loader. It seems that anytime the selector starts with a scoped style from one of my Vue files, this issue occurs. I am thinking maybe the data- prefix hasn't been added yet when this plugin runs. Could that be true? I would have thought this loader would be processing the final css after vue-loader ads its own scoping.

flyingL123 commented 4 years ago

I was able to work around this by ensuring I don't use ::v-deep as the starting selector in any of my Vue files. In other words, I need to give the root element a class and scope the styles within that.

RadValentin commented 4 years ago

@flyingL123 I tested how prefixing works for data attributes and the output is correct so it doesn't look like your issue is being caused by the prefixer. Closing this for now.