We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
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
codemirror / https://github.com/prichey/css-bug-repro
next dev
.blue-bg
.pink-bg
Using a 'partially' URL encoded SVG as data URL works as expected in globals.css, e.g.
globals.css
.red-bg { background-image: url("data:image/svg+xml,%3Csvg width='1' height='1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' fill='red' /%3E%3C/svg%3E"); }
Using the same CSS in styled-jsx does not, e.g.
styled-jsx
<style jsx>{` .red-bg { background-image: url("data:image/svg+xml,%3Csvg width='1' height='1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' fill='red' /%3E%3C/svg%3E"); } `}</style>
What's worse is that declarations following the 'broken' declaration are not respected, e.g.
<style jsx>{` .red-bg { background-image: url("data:image/svg+xml,%3Csvg width='1' height='1' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1' height='1' fill='red' /%3E%3C/svg%3E"); } .pink-bg { background-color: pink; // not applied } `}</style>
This worked without issue prior to updating to Next 14.2, but now is broken.
As a sanity check, I downgraded to Next 13 (13.5.6), and it does indeed work as expected:
Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 23.1.0: Mon Oct 9 21:27:24 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6000 Available memory (MB): 16384 Available CPU cores: 8 Binaries: Node: 20.11.1 npm: 10.2.4 Yarn: 1.22.19 pnpm: 9.1.0 Relevant Packages: next: 14.2.3 // Latest available version is detected (14.2.3). eslint-config-next: N/A react: 18.3.1 react-dom: 18.3.1 typescript: 5.4.5 Next.js Config: output: N/A
Not sure
next dev (local), Other (Deployed)
No response
The text was updated successfully, but these errors were encountered:
I have the same issue.
It seems to work in 14.1.4 but doesn't work in 14.2.0
Sorry, something went wrong.
No branches or pull requests
Link to the code that reproduces this issue
codemirror / https://github.com/prichey/css-bug-repro
To Reproduce
next dev
.blue-bg
,.pink-bg
).Current vs. Expected behavior
Using a 'partially' URL encoded SVG as data URL works as expected in
globals.css
, e.g.Using the same CSS in
styled-jsx
does not, e.g.What's worse is that declarations following the 'broken' declaration are not respected, e.g.
This worked without issue prior to updating to Next 14.2, but now is broken.
As a sanity check, I downgraded to Next 13 (13.5.6), and it does indeed work as expected:
Provide environment information
Operating System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 23.1.0: Mon Oct 9 21:27:24 PDT 2023; root:xnu-10002.41.9~6/RELEASE_ARM64_T6000 Available memory (MB): 16384 Available CPU cores: 8 Binaries: Node: 20.11.1 npm: 10.2.4 Yarn: 1.22.19 pnpm: 9.1.0 Relevant Packages: next: 14.2.3 // Latest available version is detected (14.2.3). eslint-config-next: N/A react: 18.3.1 react-dom: 18.3.1 typescript: 5.4.5 Next.js Config: output: N/A
Which area(s) are affected? (Select all that apply)
Not sure
Which stage(s) are affected? (Select all that apply)
next dev (local), Other (Deployed)
Additional context
No response
The text was updated successfully, but these errors were encountered: