Wrong output for nth-child() in combination with a class

[SimonSiefke]

Do you want to request a feature or report a bug?

A bug.

What is the current behavior?

The CSS doesn't get compiled correctly.

In the following example

export default () => (
  <div className="green">
    <style jsx>{`
      div {
        height:100px;
        width:100px;
      }
      div:nth-child(1).green {
        background: green;
      }
    `}</style>
  </div>
)

the styles get compiled to

<style id="__jsx-2072553631">
div.jsx-2072553631 {
  height: 100px;
  width: 100px;
}
div.jsx-2072553631:nth-child(1) .green.jsx-2072553631 {
  background: green;
}
</style>

There is an extra space between nth-child(1) and .green, which should not be there.

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

Reproduction steps:

1. Create package.json:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "export": "next build && next export -o dist",
    "start": "next start"
  },
  "dependencies": {
    "next": "^7.0.2",
    "react": "^16.6.3",
    "react-dom": "^16.6.3"
  }
}

2. Create pages/index.js:

// pages/index.js
export default () => (
  <div className="green">
    <style jsx>
      {`
        div {
          height: 100px;
          width: 100px;
        }
        div:nth-child(1).green {
          background: green;
        }
      `}
    </style>
  </div>
)

npm run export # and inspect dist/index.html

What is the expected behavior?

The styles should get compiled to

<style id="__jsx-2072553631">
div.jsx-2072553631 {
  height: 100px;
  width: 100px;
}
div.jsx-2072553631:nth-child(1).green.jsx-2072553631 {
  background: green;
}
</style>

and there should be no space between nth-child(1) and .green.

Environment (include versions)

• OS: Linux
• Browser: All
• styled-jsx (version): 3.1.0 (with nextjs 7.0.2)

Did this work in previous versions?

?

[giuseppeg]

Hi this is a bug in Stylis, the css processor we use to scope selectors. Can you report the issue to them https://github.com/thysultan/stylis.js ? Mention that this happens wen you use cascade: false