Styled-jsx: Any CSS variable name containing the substring "content" causes weird, broken output

[callumlocke]

I finally isolated a weird bug that kept happening in my Next.js project.

If you use the substring content as part of a CSS variable name, then whenever you try to read that variable using the var() CSS function, styled-jsx compiles it into weird vendor-prefixed gibberish.

Reading a variable named --foo-bar

This compiles correctly.

export default () => (
  <div>
    <p>hello world</p>

    <style jsx>{`
      p {
        color: red;
        width: var(--foo-bar);
      }
    `}</style>
  </div>
)

// Output (correct):
import _JSXStyle from "styled-jsx/style";
export default (() => <div data-jsx={2358650767}>
    <p data-jsx={2358650767}>hello world</p>

    <_JSXStyle styleId={2358650767} css={"p[data-jsx=\"2358650767\"]{color:red;width:var(--foo-bar)}"} />
  </div>);

Reading a variable named --foo-content

This compiles to gibberish.

export default () => (
  <div>
    <p>hello world</p>

    <style jsx>{`
      p {
        color: red;
        width: var(--foo-content);
      }
    `}</style>
  </div>
)

// Output (gibberish):
import _JSXStyle from "styled-jsx/style";
export default (() => <div data-jsx={161648215}>
    <p data-jsx={161648215}>hello world</p>

    <_JSXStyle styleId={161648215} css={"p[data-jsx=\"161648215\"]{color:red;width:-webkit-foo-content);width:-moz-foo-content);width:foo-content)}"} />
  </div>);

Reading a variable named --content-foo

This also compiles to gibberish, but a different kind.

export default () => (
  <div>
    <p>hello world</p>

    <style jsx>{`
      p {
        color: red;
        width: var(--content-foo);
      }
    `}</style>
  </div>
)

// Output (gibberish):
import _JSXStyle from "styled-jsx/style";
export default (() => <div data-jsx={477030615}>
    <p data-jsx={477030615}>hello world</p>

    <_JSXStyle styleId={477030615} css={"p[data-jsx=\"477030615\"]{color:red;width:-webkit-r(--content-foo);width:-moz-r(--content-foo);width:r(--content-foo)}"} />
  </div>);

[giuseppeg]

this must be a bug in Stylis our css processor cc @thysultan

[thysultan]

Patched in 3.2.18

[callumlocke]

@thysultan thank you.

@giuseppeg can you bump the stylis dependency and republish?

By the way, why does styled-jsx not use ^ or ~ semver ranges for its dependencies? What's the advantage of opting out of patch updates?

[giuseppeg]

By the way, why does styled-jsx not use ^ or ~ semver ranges for its dependencies? What's the advantage of opting out of patch updates?

@callumlocke I didn't make that call. @leo / @rauchg may be able to answer that question. I imagine that the reason is that even patches can introduce regressions. This also was a pre-yarn decision iirc which we might revisit.

[giuseppeg]

@callumlocke I just released 1.0.11 which includes the fix. Thanks for the bug report!