vercel
Not work Unfortunately nesting is not supported by styled-jsx.
What expected behavior The css file imported to
Reproduced
import "bootstrap/dist/css/bootstrap.min.css";
or
import "bootstrap/dist/css/bootstrap.css";
What version "styled-jsx": "^3.2.1"
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");
}
hi! can you create a PR with a failing test https://github.com/zeit/styled-jsx/blob/master/test/styles.js ?
I think this is the same issue as https://github.com/zeit/styled-jsx/issues/500 (caused by https://github.com/thysultan/stylis.js/issues/123).
Simular issue while using the example https://github.com/zeit/next.js/tree/canary/examples/with-external-styled-jsx-sass and trying to @import bootstrap from node modules. SASS is supported with my own files but anything imported from node modules and I get errors as if the SASS support disappears.
Failed to compile.
./styles/globals.scss
Error: Nesting detected at 3147:29. Unfortunately nesting is not supported by styled-jsx.
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
at Array.forEach (<anonymous>)
I can nest with SASS in my own files, including imports, but anything imported from node_modules it seems to think it is CSS and not SASS again.
You can see by looking at file globals.scss and un-commenting the line that imports from bootstrap. https://codesandbox.io/s/0y2q7162k0
I have reproduced this with my own project as well. Imports worked fine with NextJS's next-sass method but moving over to external sass styled jsx things broke down.
So using NextJS's https://github.com/zeit/next.js/tree/canary/examples/with-next-sass you can see the import @import "~bootstrap/scss/bootstrap"; works https://codesandbox.io/s/402km8x797 (look in /styles/globals.scss)
The same import using the method from https://github.com/zeit/next.js/tree/canary/examples/with-external-styled-jsx-sass does not https://codesandbox.io/s/0y2q7162k0 (go into /styles/globals.scss and uncomment the same import line....)
If you use bootstrap globally you can avoid importing it otherwise somebody should raise the issue on Stylis. Ping the author https://github.com/thysultan/stylis.js/issues/123
Unfortunately, we use a mixture of Bootstrap SASS files compiled with our own to create a customized design system and those variables, functions, and mixins are also imported into our scoped SASS for custom components to keep the design consistent. Once this bug is resolved the external styled jsx sass solution will be the silver bullet I have been waiting for.
@Soundvessel I encourage you to leave a comment on the issue I linked in my prev comment and see if the stylis author can fix this quickly
I was thinking about this solution for CSS, but without nesting it will be retro, repetitive for me now. It is good idea, subscribed.
Are you gonna fix this? I have the same problem when I'm using keyframes. It's so annoying issue..
@keyframes test2 {
100% {
opacity: 0;
.test {
opacity: 1;
}
@keyframes test2 {
100% {
opacity: 0;
}
}
opacity: 3;
}
}
