Styled-jsx: Pseudo classes and elements broken in recent version

[jaydenseric]

Since upgrading [email protected] to [email protected], chained pseudo classes such as :not() and :disabled are broken. I assume this is due to a newer version of styled-jsx. I tried the same styles using https://stylis.js.org without the issue appearing, so it must be something to do with styled-jsx?

With this contrived example:

const Textarea = props => (
  <div>
    <textarea {...props} />
    <style jsx>{`
      textarea:not(:focus) {
        border-color: blue;
      }
      textarea:not(:focus):disabled {
        opacity: 0.5;
      }
    `}</style>
  </div>
)

Before update (correct):

textarea[data-jsx="451418276"]:not(:focus) {
  border-color: blue;
}

textarea[data-jsx="451418276"]:not(:focus):disabled {
  opacity: 0.5;
}

After update (incorrect):

textarea[data-jsx="451418276"]:not([data-jsx="451418276"]:focus) {
  border-color: blue;
}

textarea[data-jsx="451418276"]:not([data-jsx="451418276"]:focus) [data-jsx="451418276"]:disabled {
  opacity: 0.5
}

[jaydenseric]

• Worked: [email protected].
• Not working: [email protected].

@thysultan nothing comes to mind?

[sidorares]

having same issue ( hi @jaydenseric ! )
:before selector not working since updating to [email protected] today

[thysultan]

I'll look into this

@sidorares How does your input vs output look like?
@jaydenseric https://stylis.js.org Does not use cascade isolation so it might not show there.

[thysultan]

@jaydenseric Is the first one still valid? e.x doesn't [data-jsx="451418276"] just increase specificity for the :focus pseudo?

textarea[data-jsx="451418276"]:not([data-jsx="451418276"]:focus)

[sidorares]

@thysultan was: .submit-status-yes[data-jsx="1547817510"]:before, after update to [email protected] ( styled-jsx 1.0.3 ) - .submit-status-yes:before[data-jsx="1547817510"]

[jaydenseric]

@thysultan No, it is not valid. :not() only accepts a single simple selector.

Invalid:

textarea[data-jsx="451418276"]:not([data-jsx="451418276"]:focus) {
  border-color: blue;
}

Although this is valid, the styles will never kick in because of the nonsensical selector:

textarea[data-jsx="451418276"]:not([data-jsx="451418276"]):not(:focus) {
  border-color: blue;
}

[thysultan]

No, it is not valid. :not() only accepts a single simple selector.

Interesting, i think i was working under the assumption that it accepts any number of valid selectors, so that constraint definitely simplifies things 😄 .

Will push a patch for these.

[jaydenseric]

Awesome, looking forward to the patch and getting it pushed all the way through to a Next.js release ASAP, so we can use it!

On the :not syntax; even if it were valid, it is still better smaller for bundle size and less confusing inspector style tracing.

[thysultan]

@giuseppeg That would make these tests invalid right?

a:not( a +b foo:hover :global(marquee) a) {
...
}

[thysultan]

@jaydenseric This may change with the selector level 4 spec https://drafts.csswg.org/selectors-4/#negation but no browser supports that yet so i don't think we need to worry about it yet.

[giuseppeg]

right, @thysultan probably that's my fault. I was just trying to put together odd nested selectors.

When in doubt use the w3c validator https://jigsaw.w3.org/css-validator/validator

[thysultan]

patched in v3.0.14

[krisztianpuska]

I'm having a similar issue since 2.4.1. Not sure if it's styled-jsx or stylis related.

I get a

 ReferenceError: /pages/index.js?entry: flex is not defined

whenever I use order (with or without display: flex):

<style jsx>{`
.hello { order: 1; }
`}</style>

[thysultan]

@krisztianpuska directly related to #29 patched in v3.0.15

[giuseppeg]

Fixed in #223