Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

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.

Sign up for GitHub

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

Jump to bottom

Add Support for Cascade Layers #43479

Closed
1 task done
kyle-jorve opened this issue Nov 28, 2022 · 0 comments
Closed
1 task done

Add Support for Cascade Layers #43479

kyle-jorve opened this issue Nov 28, 2022 · 0 comments
Labels
bug Issue was opened via the bug report template.

Comments

@kyle-jorve
Copy link

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
Platform: win32
Arch: x64
Version: Windows 10 Pro
Binaries:
Node: 16.17.1
npm: N/A
Yarn: N/A
pnpm: N/A
Relevant packages:
next: 13.0.5
eslint-config-next: 13.0.4
react: 18.2.0
react-dom: 18.2.0

What browser are you using? (if relevant)

Chrome Version 107.0.5304.107

How are you deploying your application? (if relevant)

No response

Describe the Bug

I've created an _index.css file which I am importing into _app.tsx, like so: import "../styles/base/_index.css";

In _index.css I'm importing stylesheets into layers, like so:

@layer reset, theme, icons, typography, buttons, layout;

@import url("./normalize.css") layer(reset);
@import url("./theme.css") layer(theme);
@import url("./icons.css") layer(icons);
@import url("./typography.css") layer(typography);
@import url("./buttons.css") layer(buttons);
@import url("./layout.css") layer(layout);

However, when I run the dev environment, this is the result:
image

This leads me to believe that Next does not yet support cascade layers.

Expected Behavior

A cascade layer shouldn't be added to the media attribute of a style tag. Rather, the styles themselves should be wrapped in the layer declaration. Example:

@layer reset {
/* all reset styles here */
...
}

Link to reproduction - Issues with a link to complete (but minimal) reproduction code will be addressed faster

https://github.com/kyle-jorve/portfolio-site-next

To Reproduce

Run npm run dev. Inspect the stylesheets in the <head>.
@kyle-jorve kyle-jorve added the bug Issue was opened via the bug report template. label Nov 28, 2022
@vercel vercel locked and limited conversation to collaborators Nov 29, 2022
@balazsorban44 balazsorban44 converted this issue into discussion #43525 Nov 29, 2022

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Assignees
No one assigned
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@kyle-jorve