-
Notifications
You must be signed in to change notification settings - Fork 26.4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
'Nested style detected' when dynamically including a media query in a jsx style declaration #3133
Comments
Try adding support for nesting via PostCSS. A simple solucion could be modify your {
"name": "MediaQueryIssue",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "^4.1.0",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"postcss-nested": "2.1.2",
"styled-jsx-plugin-postcss": "0.1.0"
},
"postcss": {
"plugins": {
"postcss-nested": {}
}
}
} And add a {
"presets": [
[
"next/babel",
{
"styled-jsx": {
"plugins": [
"styled-jsx-plugin-postcss"
]
}
}
]
]
} This should work :) |
@MFCo thank you for your suggestion. Unfortunately, the error is gone but the media query has no effect. I created the As I mentioned the nesting error is gone, the page loads properly but when I switch to the mobile view nothing changes as if there where no media query. Here is a chunk of the generated CSS that I get when I inspect the
It seems that the media query is interpreted as a CSS class. Furthermore, I tried to replace the following:
with an explicit and static media query:
Only then did it work. |
@MissaouiChedy try to keep the value only in the variable: @media screen and (max-width: ${mobile}) {
p { color: blue }
} otherwise our CSS parser doesn't have any way to tell that your interpolation is a media query .. it'd rather think that it encountered a nested block. |
@giuseppeg thank you for your suggestion. We started using the SCSS syntax in our styled jsx code which removed the need to wrap media queries in variables. Now we just use SASS mixins. |
It is in my understanding that the
<style jsx>
tag contains an interpolated string in order allow insertion of variables that can be stored and manipulated in javascript as in the following example:I am trying to use the previous mechanism to encapsulate the media queries that I use in a single location:
But when I try to use them as follows:
I get the following error:
The MediaQueryIssue repository contains a minimalistic example that demonstrates the issue.
The error message indicates that nested styling as been detected, this seems odd since I did use only one
<style jsx>
elements inside the rendered structure of the previous example.One of the advantages of using styled jsx is the ability to substitute values that can be manipulated in JavaScript in order to kill as much duplication as possible, unfortunately the fact that it is impossible to substitute media queries limits this advantage greatly.
I suspect that this might be a styled jsx specific issue but I am not sure yet and I thought it would better to start the discussion here.
Pointers to where to debug are welcome and I would be glad to contribute fixes if possible.
The text was updated successfully, but these errors were encountered: