Styled-jsx: Selectors that need escape sequences, need to be escaped twice

[hamlim]

Any characters that need to be escaped within a selector, need to be escaped twice.

Quick demo:

<div className="."> ... </div>
<style jsx>{`
  /* This won't work (but works with regular css) */
  .\. {
    color: red;
  }
  /* This will work */
  .\\. {
    color: green;
  }
`}</style>

Tested on [email protected]

[giuseppeg]

this might as well be a bug in Stylis cc @thysultan (need to verify though)

[thysultan]

It's a feature in javascript strings, maybe String.raw could help here.

[giuseppeg]

@hamlim is this still an issue?

[giuseppeg]

closing for inactivity

[ryanfitzer]

I can confirm that this is still an issue ([email protected]). When importing a css file (I'm using the styled-jsx/webpack loader) that has an escaped selector like the following:

.focus\:bg-transparent:focus {
    background-color: transparent
}

Another escape is added to the original escape:

.focus\\:bg-transparent:focus {
    background-color: transparent
}

This results in a browser warning:

StyleSheet: illegal rule: 

.focus\\:bg-transparent:focus {background-color: transparent}

I ran into this while using TailwindCSS. As you can see, it relies heavily on these escaped selectors.

My current workaround is to do a replace:

import styleUtils from './path/to/tailwind/utils.css?type=global';

Object.assign( styleUtils, styleUtils.map( rule => rule.replace( /\\\\/, '\\' ) ) );

[...]
<style jsx>{ styleUtils }</style>
[...]

Not great, but this is only being used in our Storybook.

[ryanfitzer]

I checked to see if stylis might be the issue. It looks to strip the escape out:

import stylis from 'stylis';

stylis( '.focus\:bg-transparent:focus', 'background-color: transparent' ) ;

Results in the following:

.focus:bg-transparent:focus{background-color:transparent;}

@thysultan Is this the expected result when using escaped selectors?

[ryanfitzer]

Since mine is specific to the Webpack loader, I created a new issue: https://github.com/zeit/styled-jsx/issues/620