Next.js: styled-jsx opt-out?

[Cinamonas]

Is there currently a way to completely disable styled-jsx that's bundled with Next.js? If not, it would be great to have this option as currently it sometimes clashes with other CSS solutions by doing preprocessing of its own.

See #2304 and I've also been having issues with importing plain CSS through wrap-in-js.

[arunoda]

There's no need to opt-out. It's already opt-in.
If you don't use it, it won't be included in the bundle.

[Cinamonas]

@arunoda, maybe I'm missing something, but I'm not using it anywhere explicitly, and it still parses (and breaks) the stylesheet that I'm importing directly from node_modules (which I then injectGlobal through styled-components).

Right now, this is how I opt-out:

// babel-preset.js
const preset = require('next/babel');

preset.plugins = removeStyledJsx(preset.plugins);

module.exports = preset;

function removeStyledJsx(plugins) {
  return plugins.filter(plugin => plugin.indexOf('styled-jsx') === -1);
}

// .babelrc
{
  "presets": [
    "./babel-preset"
  ],
  // …
}

And this fixes the issues that I'm having.

[timneutkens]

@giuseppeg ^

[giuseppeg]

@timneutkens @arunoda there is nothing I can do to prevent that from happening.
See https://github.com/styled-components/styled-components/issues/934

Seems like that they released a new version of babel-plugin-styled-components with the workaround that I suggested.

[arunoda]

@Cinamonas okay even if it's not included in the bundle, it parses. Good point.
Thanks @giuseppeg for the pointer.

I hope with the new version, we can get rid of this issue.

[timneutkens]

@giuseppeg I was expecting you had seen this issue before 😄 Thanks for clarifying ❤️

[Sly777]

On the last versions of next.js-styled comp-babel styled comp, There is no problem. I tried on my package (https://github.com/Sly777/ran) and It works without getting error. FYI, @arunoda :)

[timneutkens]

Awesome @Sly777 so we can close this? Or does anyone want to confirm that it's fixed 👌 We might have to update the example 🤔

[Cinamonas]

@timneutkens, I've just upgraded to the latest beta, removed my styled-jsx out-out code and everything seems to be working 🎉

[arunoda]

Awesome. Let's close this then.

[dortzur]

@Cinamonas this also solves Nesting detected at... Unfortunately nesting is not supported by styled-jsx when using with-global-stylesheet
Thanks!

[giuseppeg]

fwiw I fixed this in styled-jsx 1.0.9