CSS selector bug
I thought I was going insane
In a popup, apply a sibling selector (
~
) , e.g. https://codepen.io/vescoyez/pen/wMyRLP?editors=1100
It appears that Plasmo uses autoprefixer
to only apply -moz-
selectors, but no prefix-free ones, despite running
![](https://cdn.answeroverflow.com/1108492026930004089/image.png)
40 Replies
FYI it occurs whether my
<style>
has lang="scss"
or not
FYI when I apply :placeholder-shown
without ~
, it doesn't apply the -moz-
prefix
@louis Any chance to solve it soon?so it doesn't work if you do
input:placeholder-shown?
?It does work
It fails to work when I use
~
Does it work if it's not embedded as a svelte style?
That's what I haven't tried, I haven't tested it against non-Svelte
plasmo uses lightningcss underneath so CSS compiling issue is due to that package
What I know so far is that even if I don't use SCSS, the issue persists
I see, then we should perhaps report the issue there
The issue persists whether the ![Trulysad](https://cdn.discordapp.com/emojis/873673517177118851.png)
<style>
has or doesn't have lang="scss"
What do we do in the meantime?
What is the easiest way to run lightningcss
?
I tried running through the browser, didn't work
I tried running it through Node.js, couldn't reproduce
I tried running it through the CLI, couldn't ![Trulysad](https://cdn.discordapp.com/emojis/873673517177118851.png)
I'm not quite sure tbh xD......
what if you use a separate css file?
does it work or still foobar xd
Interesting,
+
is also affected
It has something to do with :placeholder-shown
Probably this one https://github.com/parcel-bundler/lightningcss/blob/30469232c3fdb828753db4be49f48e9bf727a655/src/selector.rs#L131
For some reason, if the selectors are nested, it will change :placeholder-shown
into :-moz-placeholder-shown
, e.g.
Maybe it has to do with the Svelte compiler
@louis Seems like I'm able to trick the compiler with
In this case, it'll produce both versions
WTF, despite the CSS looking right, the rules aren't being applied ๐fascinating lol
I ran into a stupid issue ๐
![](https://cdn.answeroverflow.com/1109234209140248606/image.png)
![](https://cdn.answeroverflow.com/1109234209358356540/image.png)
๐คจ
![](https://cdn.answeroverflow.com/1109235168415318086/image.png)
position - CSS: Cascading Style Sheets | MDN
The position CSS property sets how an element is positioned in a document. The top, right, bottom, and left properties determine the final location of positioned elements.
![](https://cdn.answeroverflow.com/1109235989588742185/image.png)
Why dafuq is the initial value
static
???lol it's always has been