Styled-jsx: Unfortunately nesting is not supported by styled-jsx

[juanigallo]

Hi there !

.a { p { color: red; } }

The code above is throwing the error: Unfortunately nesting is not supported by styled-jsx

Is any plan to support nesting in styled-jsx ? Or is there a workaround to fix this ?

Thanks !

[juanigallo]

Just saw https://github.com/zeit/styled-jsx/pull/190 but I think that the issue is still valid.

[huv1k]

You can use postcss in meanwhile

[giuseppeg]

styled-jsx is never going to support non standard CSS features, however soon (like this weekend) I will release a new version that introduces a plugin system which will allow to use SASS, PostCSS or really processing your styles as you please - I already wrote two sample plugins
https://github.com/giuseppeg/styled-jsx-plugin-sass
https://github.com/giuseppeg/styled-jsx-plugin-postcss

[juanigallo]

Thanks for the answer. I will try de sass plugin.

[corysimmons]

https://github.com/giuseppeg/styled-jsx-plugin-postcss + postcss-cssnext = W3C spec nesting

.foo {
  & .bar {
    background: blue;
  }
}

[scythargon]

Still can't setup this ><
installed styled-jsx-plugin-postcss, added it to babel config, and postcss-preset-env (which replaces postcss-cssnext nowadays)

created postcss.config.js:

module.exports = {
  parser: 'sugarss',
  plugins: {
    'postcss-plugin': {},
    'postcss-preset-env': {},
  }
}

Now I get:

but still

Can you please tell me where am I wrong?

[corysimmons]

module.exports = {
  parser: 'sugarss',
  plugins: {
    'postcss-plugin': {}, // I suspect this should be 'styled-jsx-plugin-postcss': {}
    'postcss-preset-env': {},
  }
}

tbh, I'm not sure. It's a pain to get setup and working right.

I jumped to Emotion and haven't looked back. https://github.com/zeit/next.js/tree/canary/examples/with-emotion

[ekanant]

When I import bootstrap.css from node_modules It has error

Error: Nesting detected at 31452:1. Unfortunately nesting is not supported by styled-jsx.

I found that the error is from this style, It's from navbar bootstrap 4, How can I fix this?

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-light .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}