🧩 Plasmo Developers•16mo ago

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

plasmo dev --verbose

plasmo dev --verbose

Valentin

CodePen

Material design text field - Pure css

...

40 Replies

Avi•16mo ago

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?

lab•16mo ago

so it doesn't work if you do input:placeholder-shown??

Avi•16mo ago

It does work It fails to work when I use ~

input:placeholder-shown { } // works
label { } // works
input:placeholder-shown ~ label { } // DOESN'T work

input:placeholder-shown { } // works
label { } // works
input:placeholder-shown ~ label { } // DOESN'T work

lab•16mo ago

Does it work if it's not embedded as a svelte style?

Avi•16mo ago

That's what I haven't tried, I haven't tested it against non-Svelte

lab•16mo ago

plasmo uses lightningcss underneath so CSS compiling issue is due to that package

Avi•16mo ago

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 <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

lab•16mo ago

I'm not quite sure tbh xD...... what if you use a separate css file? does it work or still foobar xd

Avi•16mo ago

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.

input:placeholder-shown > label { }
↓
input:-moz-placeholder-shown > label {}

input:placeholder-shown > label { }
↓
input:-moz-placeholder-shown > label {}

Maybe it has to do with the Svelte compiler @louis Seems like I'm able to trick the compiler with

input:placeholder-shown:not(:-moz-placeholder-shown) ~ label { }

input:placeholder-shown:not(:-moz-placeholder-shown) ~ label { }

In this case, it'll produce both versions

.form__field:-moz-placeholder-shown:not(:-moz-placeholder-shown) ~ .form__label, .form__field:placeholder-shown:not(:-moz-placeholder-shown) ~ .form__label {
  cursor: text;
  font-size: 16px;
  top: 20px;
}

.form__field:-moz-placeholder-shown:not(:-moz-placeholder-shown) ~ .form__label, .form__field:placeholder-shown:not(:-moz-placeholder-shown) ~ .form__label {
  cursor: text;
  font-size: 16px;
  top: 20px;
}

WTF, despite the CSS looking right, the rules aren't being applied 😐

lab•16mo ago

fascinating lol

Avi•16mo ago

I ran into a stupid issue 😑

Avi•16mo ago

🤨

Avi•16mo ago

https://developer.mozilla.org/en-US/docs/Web/CSS/position?v=example#formal_definition

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.

Avi•16mo ago

Why dafuq is the initial value static???

lab•16mo ago

lol it's always has been

Gaming

Programming

CSS selector bug