Skip to content
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

add native css nesting support #62644

Merged
merged 2 commits into from
Feb 29, 2024

Conversation

jantimon
Copy link
Contributor

@jantimon jantimon commented Feb 28, 2024

today ~83% of all browsers support css nesting: https://caniuse.com/css-nesting

CSS Nesting Browser Support
https://caniuse.com/css-nesting
https://developer.mozilla.org/en-US/docs/Web/CSS/Nesting_selector

therefore this pr upgrades postcss-modules-local-by-default which fixes a bug in css-modules/postcss-modules-local-by-default#64)

  • .foo { &:hover { a_value: some-value; } } is pure
  • .foo { html &:hover { a_value: some-value; } } is pure
  • .foo { &:global(.bar) { a_value: some-value; } } is pure
  • :global(.foo) { &:hover { a_value: some-value; } } is not pure

upgrading the package will allow using css nestings with or without postcss compilation

it fixes the following error:

CssSyntaxError: postcss-modules-local-by-default: <css input>:1:8: Selector "&:hover" is not pure (pure selectors must contain at least one local class or id)

Fixes #55053
Fixes #33734
Fixes #10475

@ijjk
Copy link
Member

ijjk commented Feb 28, 2024

Allow CI Workflow Run

  • approve CI run for commit: 7fde8fa

Note: this should only be enabled once the PR is ready to go and can only be enabled by a maintainer

@jantimon jantimon changed the title add css nesting support add native css nesting support Feb 28, 2024
@ijjk
Copy link
Member

ijjk commented Feb 28, 2024

Failing test suites

Commit: 7fde8fa

pnpm test-dev test/e2e/app-dir/metadata/metadata.test.ts (PPR)

  • app dir - metadata > react cache > should have same title and page value when navigating
Expand output

● app dir - metadata › react cache › should have same title and page value when navigating

expect(received).toBe(expected) // Object.is equality

Expected: "0.5321066820078779"
Received: "0.328509971626608"

  973 |         const obj = JSON.parse(title)
  974 |         // Check `cache()`
> 975 |         expect(obj.val.toString()).toBe(value)
      |                                    ^
  976 |         // Check `fetch()`
  977 |         // TODO-APP: Investigate why fetch deduping doesn't apply but cache() does.
  978 |         if (!isNextDev) {

  at Object.toBe (e2e/app-dir/metadata/metadata.test.ts:975:36)

Read more about building and testing Next.js in contributing.md.

@ijjk
Copy link
Member

ijjk commented Feb 28, 2024

Stats from current PR

Default Build
General
vercel/next.js canary jantimon/next.js allow-pure-nested-selectors Change
buildDuration 13.9s 13.9s N/A
buildDurationCached 8.5s 6.5s N/A
nodeModulesSize 198 MB 198 MB
nextStartRea..uration (ms) 429ms 411ms N/A
Client Bundles (main, webpack)
vercel/next.js canary jantimon/next.js allow-pure-nested-selectors Change
2453-HASH.js gzip 30.4 kB 30.4 kB N/A
3304.HASH.js gzip 181 B 181 B
3f784ff6-HASH.js gzip 53.7 kB 53.7 kB N/A
8299-HASH.js gzip 5.04 kB 5.04 kB N/A
framework-HASH.js gzip 45.2 kB 45.2 kB
main-app-HASH.js gzip 242 B 241 B N/A
main-HASH.js gzip 32.2 kB 32.2 kB N/A
webpack-HASH.js gzip 1.7 kB 1.7 kB N/A
Overall change 45.4 kB 45.4 kB
Legacy Client Bundles (polyfills)
vercel/next.js canary jantimon/next.js allow-pure-nested-selectors Change
polyfills-HASH.js gzip 31 kB 31 kB
Overall change 31 kB 31 kB
Client Pages
vercel/next.js canary jantimon/next.js allow-pure-nested-selectors Change
_app-HASH.js gzip 196 B 197 B N/A
_error-HASH.js gzip 184 B 184 B
amp-HASH.js gzip 505 B 505 B
css-HASH.js gzip 324 B 325 B N/A
dynamic-HASH.js gzip 2.5 kB 2.5 kB N/A
edge-ssr-HASH.js gzip 258 B 258 B
head-HASH.js gzip 352 B 352 B
hooks-HASH.js gzip 370 B 371 B N/A
image-HASH.js gzip 4.2 kB 4.2 kB
index-HASH.js gzip 259 B 259 B
link-HASH.js gzip 2.67 kB 2.67 kB N/A
routerDirect..HASH.js gzip 314 B 312 B N/A
script-HASH.js gzip 386 B 386 B
withRouter-HASH.js gzip 309 B 309 B
1afbb74e6ecf..834.css gzip 106 B 106 B
Overall change 6.56 kB 6.56 kB
Client Build Manifests
vercel/next.js canary jantimon/next.js allow-pure-nested-selectors Change
_buildManifest.js gzip 483 B 485 B N/A
Overall change 0 B 0 B
Rendered Page Sizes
vercel/next.js canary jantimon/next.js allow-pure-nested-selectors Change
index.html gzip 529 B 526 B N/A
link.html gzip 542 B 539 B N/A
withRouter.html gzip 524 B 521 B N/A
Overall change 0 B 0 B
Edge SSR bundle Size
vercel/next.js canary jantimon/next.js allow-pure-nested-selectors Change
edge-ssr.js gzip 95 kB 95 kB N/A
page.js gzip 3.06 kB 3.07 kB N/A
Overall change 0 B 0 B
Middleware size
vercel/next.js canary jantimon/next.js allow-pure-nested-selectors Change
middleware-b..fest.js gzip 624 B 623 B N/A
middleware-r..fest.js gzip 151 B 151 B
middleware.js gzip 25.5 kB 25.5 kB N/A
edge-runtime..pack.js gzip 839 B 839 B
Overall change 990 B 990 B
Next Runtimes
vercel/next.js canary jantimon/next.js allow-pure-nested-selectors Change
app-page-exp...dev.js gzip 171 kB 171 kB
app-page-exp..prod.js gzip 96.7 kB 96.7 kB
app-page-tur..prod.js gzip 98.5 kB 98.5 kB
app-page-tur..prod.js gzip 92.9 kB 92.9 kB
app-page.run...dev.js gzip 150 kB 150 kB
app-page.run..prod.js gzip 91.4 kB 91.4 kB
app-route-ex...dev.js gzip 21.3 kB 21.3 kB
app-route-ex..prod.js gzip 15 kB 15 kB
app-route-tu..prod.js gzip 15 kB 15 kB
app-route-tu..prod.js gzip 14.8 kB 14.8 kB
app-route.ru...dev.js gzip 20.9 kB 20.9 kB
app-route.ru..prod.js gzip 14.8 kB 14.8 kB
pages-api-tu..prod.js gzip 9.51 kB 9.51 kB
pages-api.ru...dev.js gzip 9.79 kB 9.79 kB
pages-api.ru..prod.js gzip 9.51 kB 9.51 kB
pages-turbo...prod.js gzip 22.3 kB 22.3 kB
pages.runtim...dev.js gzip 23 kB 23 kB
pages.runtim..prod.js gzip 22.3 kB 22.3 kB
server.runti..prod.js gzip 50.6 kB 50.6 kB
Overall change 950 kB 950 kB
build cache
vercel/next.js canary jantimon/next.js allow-pure-nested-selectors Change
0.pack gzip 1.56 MB 1.56 MB N/A
index.pack gzip 105 kB 105 kB N/A
Overall change 0 B 0 B
Diff details
Diff for middleware.js

Diff too large to display

Commit: bacff20

@samcx samcx enabled auto-merge (squash) February 29, 2024 18:01
@samcx samcx self-requested a review February 29, 2024 18:01
Copy link
Member

@samcx samcx left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for submitting a :pr:!

:lgtm:

@samcx samcx merged commit 56c8792 into vercel:canary Feb 29, 2024
64 checks passed
@jantimon
Copy link
Contributor Author

thanks for merging

@legowerewolf
Copy link

Woo!

ijjk added a commit that referenced this pull request Feb 29, 2024
Update precompiled related to below dependencies upgrades 

x-ref: #62698
x-ref: #62644

Closes NEXT-2649

Co-authored-by: JJ Kasper <jj@jjsweb.site>
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 26, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
4 participants