🧩 Plasmo Developers•2y 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

AviOP•2y 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•2y ago

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

AviOP•2y 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•2y ago

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

AviOP•2y ago

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

lab•2y ago

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

AviOP•2y 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•2y ago

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

AviOP•2y 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•2y ago

fascinating lol

AviOP•2y ago

I ran into a stupid issue 😑

AviOP•2y ago

🤨

AviOP•2y 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.

AviOP•2y ago

Why dafuq is the initial value static???

lab•2y ago

lol it's always has been

AviOP•2y ago

https://tenor.com/view/break-the-code-gif-19420388

Tenor

AviOP•2y ago

It's so weird On the left it's the popup, on the right it's Codepen

AviOP•2y ago

And as I said before, the rules should be applied wait fr I removed the :not(:-moz-placeholder-shown) and it worked

lab•2y ago

heh

AviOP•2y ago

Yeah, the CSS engine apparently doesn't like unknown pseudo classes

AviOP•2y ago

And yes, it doesn't exist

AviOP•2y ago

Hopefully it'll be merged ASAP https://github.com/parcel-bundler/lightningcss/pull/492

GitHub

Removed non-existing -moz-placeholder-shown by avi12 · Pull Reque...

https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions#mozilla-only_properties

lab•2y ago

should be fast I hope, it's a pretty active project

AviOP•2y ago

TBH I'm not even sure if my PR will solve the issue 😅 It's been 4 days since the PR TrollDespair

lab•2y ago

me when I submit a PR to parcel and they took 3 months to merge it, which prompted me to create the plasmo framework (fyi lightningcss was created and maintained by the same guy working on parcel) oh yeah they added it to the parcel project now eh I forgot about ixd

AviOP•2y ago

The thing is, I don't even know if my fix will indeed fix me problem hah

AviOP•2y ago

I thought it was a big brain moment, but lightningcss was like nope

<script lang="ts">
  import styleText from "data-text:~styles/styles-text-field.css";

  const style = document.createElement("style");
  style.textContent = styleText;
  document.head.append(style);
</script>

<script lang="ts">
  import styleText from "data-text:~styles/styles-text-field.css";

  const style = document.createElement("style");
  style.textContent = styleText;
  document.head.append(style);
</script>

AviOP•2y ago

@louis I'm wondering, why does data-text: involve lightningcss at all? I mean, I intend to import text

lab•2y ago

it still need to transform the css/sass into optimized code within the bundle :d

AviOP•2y ago

I see, IMO it should be context-dependent I.e. importing SCSS should indeed be processed and optimized, but if I import CSS this way while in a Svelte/Vue popup, I'd probably want to deal with the CSS myself, such as working around the annoying -moz-placeholder-shown thing You know what, how about if you fork the repo and apply my PR until a Parcel maintainer will merge it?

lab•2y ago

hmmm... tempting one problem I hate about the parcel repo is that it's big xD... I was never able to build the whole thing from source, and lightningcss is rust based too xd

AviOP•2y ago

I think it's worth the shot

lab•2y ago

oh actually seems like lightningcss is separated into its own repo now just under the same org

AviOP•2y ago

Relying on an unmaintained project is hell

lab•2y ago

lol well yeah but nobody thank him try build and publish to npm on your end, and I can guide you on how to use it in your local plasmo to test and debug further actually build and link it :p easiest for you to do is build, link your local lightningcss build with your extension <- pnpm will resolve to your local build then you can verify if that PR fix the issue you saw

AviOP•2y ago

man sounds like too much work 😂

AviOP•2y ago

@louis This is what I call a big brain move

const elStyle = document.createElement("style");
elStyle.textContent = `
.form__group {
  position: relative;
  padding: 15px 0 0;
  margin-top: 10px;
}

.form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #d2d2d2;
  outline: 0;
  font-size: 16px;
  color: #212121;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
}

.form__field::placeholder {
  color: transparent;
}

.form__field:placeholder-shown ~ .form__label {
  font-size: 16px;
  cursor: text;
  top: 20px;
}

label,
.form__field:focus ~ .form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 12px;
  color: #9b9b9b;
}

.form__field:focus ~ .form__label {
  color: #009788;
}

.form__field:focus {
  padding-bottom: 6px;
  border-bottom: 2px solid #009788;
}
`;
document.head.append(elStyle);

const elStyle = document.createElement("style");
elStyle.textContent = `
.form__group {
  position: relative;
  padding: 15px 0 0;
  margin-top: 10px;
}

.form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 1px solid #d2d2d2;
  outline: 0;
  font-size: 16px;
  color: #212121;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
}

.form__field::placeholder {
  color: transparent;
}

.form__field:placeholder-shown ~ .form__label {
  font-size: 16px;
  cursor: text;
  top: 20px;
}

label,
.form__field:focus ~ .form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 12px;
  color: #9b9b9b;
}

.form__field:focus ~ .form__label {
  color: #009788;
}

.form__field:focus {
  padding-bottom: 6px;
  border-bottom: 2px solid #009788;
}
`;
document.head.append(elStyle);

lab•2y ago

lol got 'em

AviOP•2y ago

Screw you lightningcss 😁

AviOP•2y ago

@louis Someone responded wowreact

Gaming

Programming

CSS selector bug