Motivation
Next.js is generating very verbose CSS class names in production builds, thus increasing the size of the final bundle considerably, especially for big applications.
Solution
The most affordable solution is to use single-character class names, a suggested practice that produces smaller application output while guaranteeing class name uniqueness across the entire application.
With this pull request Next.js will be able to generate incrementally unique class names for production builds while keeping the more developer-friendly verbose class names for development.
As an example, Next.js will be able to generate the class name A from the original class name index_redText__3CwEB generated by CSS modules.
Alternatives I considered
I considered the proposals by @Timer, especially the one cited below:
Deduping of Styles: If multiple classes define common sets of attributes, we may hoist those attributes out into a new class and then transparently compose the emitted classes (think Atomic CSS).
This is indeed the optimal way to go but IMHO it would be a great effort to implement for CSS modules / non-js based styles.
Disclaimer
This feature is based on the great work made by the people at Styletron, using a modified version of their MIT Licensed SequentialIDGenerator.
Fixes #15910
Fixes #9888
Failing test suites
test/integration/css-features/test/index.test.js
- CSS Modules: Import Global CSS > should've emitted a single CSS file
Expand output
● CSS Modules: Import Global CSS › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Modules: Import Global CSS should've emitted a single CSS file 1`
Snapshot: "a .styles_foo__31qlD{all:initial}"
Received: "a .ae{all:initial}"
199 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
200 |
> 201 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
202 | `"a .styles_foo__31qlD{all:initial}"`
203 | )
204 | })
at Object.<anonymous> (integration/css-features/test/index.test.js:201:59)
test/integration/scss-modules/test/index.test.js
- 3rd Party CSS Module Support > should've emitted a single CSS file
- 3rd Party CSS Module Support > should've injected the CSS on server render
- Basic SCSS Module Support > should've emitted a single CSS file
- Basic SCSS Module Support > should've injected the CSS on server render
- CSS Module Composes Usage (Basic) > should've emitted a single CSS file
- CSS Module Composes Usage (External) > should've emitted a single CSS file
- Catch-all Route CSS Module Usage > should've emitted a single CSS file
- Dynamic Route CSS Module Usage > should've emitted a single CSS file
- Valid CSS Module Usage from within node_modules > should've prerendered with relevant data
- Valid CSS Module Usage from within node_modules > should've emitted a single CSS file
- Valid Nested CSS Module Usage from within node_modules > should've prerendered with relevant data
- Valid Nested CSS Module Usage from within node_modules > should've emitted a single CSS file
Expand output
● Basic SCSS Module Support › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Basic SCSS Module Support should've emitted a single CSS file 1`
Snapshot: ".index_redText__2VIiM{color:red}"
Received: ".ae{color:red}"
53 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
54 |
> 55 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
56 | `".index_redText__2VIiM{color:red}"`
57 | )
58 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:55:59)
● Basic SCSS Module Support › should've injected the CSS on server render
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Basic SCSS Module Support should've injected the CSS on server render 1`
Snapshot: "index_redText__2VIiM"
Received: "ae"
70 | expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
71 |
> 72 | expect($('#verify-red').attr('class')).toMatchInlineSnapshot(
| ^
73 | `"index_redText__2VIiM"`
74 | )
75 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:72:44)
● 3rd Party CSS Module Support › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `3rd Party CSS Module Support should've emitted a single CSS file 1`
Snapshot: ".index_foo__9_fxH{position:relative}.index_foo__9_fxH .bar,.index_foo__9_fxH .baz{height:100%;overflow:hidden}.index_foo__9_fxH .lol,.index_foo__9_fxH>.lel{width:80%}"
Received: ".ae{position:relative}.ae .bar,.ae .baz{height:100%;overflow:hidden}.ae .lol,.ae>.lel{width:80%}"
109 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
110 |
> 111 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
112 | `".index_foo__9_fxH{position:relative}.index_foo__9_fxH .bar,.index_foo__9_fxH .baz{height:100%;overflow:hidden}.index_foo__9_fxH .lol,.index_foo__9_fxH>.lel{width:80%}"`
113 | )
114 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:111:59)
● 3rd Party CSS Module Support › should've injected the CSS on server render
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `3rd Party CSS Module Support should've injected the CSS on server render 1`
Snapshot: "index_foo__9_fxH"
Received: "ae"
126 | expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
127 |
> 128 | expect($('#verify-div').attr('class')).toMatchInlineSnapshot(
| ^
129 | `"index_foo__9_fxH"`
130 | )
131 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:128:44)
● Valid CSS Module Usage from within node_modules › should've prerendered with relevant data
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid CSS Module Usage from within node_modules should've prerendered with relevant data 1`
Snapshot: "{\"message\":\"Why hello there\"} {\"redText\":\"example_redText__1hNNA\"}"
Received: "{\"message\":\"Why hello there\"} {\"redText\":\"ae\"}"
311 |
312 | const cssPreload = $('#nm-div')
> 313 | expect(cssPreload.text()).toMatchInlineSnapshot(
| ^
314 | `"{\\"message\\":\\"Why hello there\\"} {\\"redText\\":\\"example_redText__1hNNA\\"}"`
315 | )
316 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:313:31)
● Valid CSS Module Usage from within node_modules › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid CSS Module Usage from within node_modules should've emitted a single CSS file 1`
Snapshot: ".example_redText__1hNNA{color:red}"
Received: ".ae{color:red}"
325 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
326 |
> 327 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
328 | `".example_redText__1hNNA{color:red}"`
329 | )
330 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:327:59)
● Valid Nested CSS Module Usage from within node_modules › should've prerendered with relevant data
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid Nested CSS Module Usage from within node_modules should've prerendered with relevant data 1`
Snapshot: "{\"message\":\"Why hello there\"} {\"other2\":\"example_other2__1pnJV\",\"subClass\":\"example_subClass__2EbKX other_className__E6nd8\"}"
Received: "{\"message\":\"Why hello there\"} {\"other2\":\"ae\",\"subClass\":\"af ah\"}"
364 |
365 | const cssPreload = $('#nm-div')
> 366 | expect(cssPreload.text()).toMatchInlineSnapshot(
| ^
367 | `"{\\"message\\":\\"Why hello there\\"} {\\"other2\\":\\"example_other2__1pnJV\\",\\"subClass\\":\\"example_subClass__2EbKX other_className__E6nd8\\"}"`
368 | )
369 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:366:31)
● Valid Nested CSS Module Usage from within node_modules › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid Nested CSS Module Usage from within node_modules should've emitted a single CSS file 1`
Snapshot: ".other_other3__ZPN-Y{color:violet}.other_className__E6nd8{background:red;color:#ff0}.example_other2__1pnJV{color:red}.example_subClass__2EbKX{background:#00f}"
Received: ".ag{color:violet}.ah{background:red;color:#ff0}.ae{color:red}.af{background:#00f}"
378 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
379 |
> 380 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
381 | `".other_other3__ZPN-Y{color:violet}.other_className__E6nd8{background:red;color:#ff0}.example_other2__1pnJV{color:red}.example_subClass__2EbKX{background:#00f}"`
382 | )
383 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:380:59)
● CSS Module Composes Usage (Basic) › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Module Composes Usage (Basic) should've emitted a single CSS file 1`
Snapshot: ".index_className__2O8Wt{background:red;color:#ff0}.index_subClass__3e6Re{background:#00f}"
Received: ".ae{background:red;color:#ff0}.af{background:#00f}"
411 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
412 |
> 413 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
414 | `".index_className__2O8Wt{background:red;color:#ff0}.index_subClass__3e6Re{background:#00f}"`
415 | )
416 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:413:59)
● CSS Module Composes Usage (External) › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Module Composes Usage (External) should've emitted a single CSS file 1`
Snapshot: ".other_className__2VTl4{background:red;color:#ff0}.index_subClass__3e6Re{background:#00f}"
Received: ".af{background:red;color:#ff0}.ae{background:#00f}"
444 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
445 |
> 446 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
447 | `".other_className__2VTl4{background:red;color:#ff0}.index_subClass__3e6Re{background:#00f}"`
448 | )
449 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:446:59)
● Dynamic Route CSS Module Usage › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Dynamic Route CSS Module Usage should've emitted a single CSS file 1`
Snapshot: "._post__home__3F5yW{background:red}"
Received: ".ae{background:red}"
482 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
483 |
> 484 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
485 | `"._post__home__3F5yW{background:red}"`
486 | )
487 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:484:59)
● Catch-all Route CSS Module Usage › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Catch-all Route CSS Module Usage should've emitted a single CSS file 1`
Snapshot: ".___post__home__psZf9{background:red}"
Received: ".ae{background:red}"
540 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
541 |
> 542 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
543 | `".___post__home__psZf9{background:red}"`
544 | )
545 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:542:59)
test/integration/css-modules/test/index.test.js
- 3rd Party CSS Module Support > should've emitted a single CSS file
- 3rd Party CSS Module Support > should've injected the CSS on server render
- Basic CSS Module Support > should've emitted a single CSS file
- Basic CSS Module Support > should've injected the CSS on server render
- CSS Module Composes Usage (Basic) > should've emitted a single CSS file
- CSS Module Composes Usage (External) > should've emitted a single CSS file
- Catch-all Route CSS Module Usage > should've emitted a single CSS file
- Dynamic Route CSS Module Usage > should've emitted a single CSS file
- Valid CSS Module Usage from within node_modules > should've prerendered with relevant data
- Valid CSS Module Usage from within node_modules > should've emitted a single CSS file
- Valid Nested CSS Module Usage from within node_modules > should've prerendered with relevant data
- Valid Nested CSS Module Usage from within node_modules > should've emitted a single CSS file
Expand output
● Basic CSS Module Support › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Basic CSS Module Support should've emitted a single CSS file 1`
Snapshot: ".index_redText__3CwEB{color:red}"
Received: ".ae{color:red}"
54 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
55 |
> 56 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
57 | `".index_redText__3CwEB{color:red}"`
58 | )
59 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:56:59)
● Basic CSS Module Support › should've injected the CSS on server render
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Basic CSS Module Support should've injected the CSS on server render 1`
Snapshot: "index_redText__3CwEB"
Received: "ae"
71 | expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
72 |
> 73 | expect($('#verify-red').attr('class')).toMatchInlineSnapshot(
| ^
74 | `"index_redText__3CwEB"`
75 | )
76 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:73:44)
● 3rd Party CSS Module Support › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `3rd Party CSS Module Support should've emitted a single CSS file 1`
Snapshot: ".index_foo__29BAH{position:relative}.index_foo__29BAH .bar,.index_foo__29BAH .baz{height:100%;overflow:hidden}.index_foo__29BAH .lol,.index_foo__29BAH>.lel{width:80%}"
Received: ".ae{position:relative}.ae .bar,.ae .baz{height:100%;overflow:hidden}.ae .lol,.ae>.lel{width:80%}"
110 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
111 |
> 112 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
113 | `".index_foo__29BAH{position:relative}.index_foo__29BAH .bar,.index_foo__29BAH .baz{height:100%;overflow:hidden}.index_foo__29BAH .lol,.index_foo__29BAH>.lel{width:80%}"`
114 | )
115 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:112:59)
● 3rd Party CSS Module Support › should've injected the CSS on server render
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `3rd Party CSS Module Support should've injected the CSS on server render 1`
Snapshot: "index_foo__29BAH"
Received: "ae"
127 | expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
128 |
> 129 | expect($('#verify-div').attr('class')).toMatchInlineSnapshot(
| ^
130 | `"index_foo__29BAH"`
131 | )
132 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:129:44)
● Valid CSS Module Usage from within node_modules › should've prerendered with relevant data
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid CSS Module Usage from within node_modules should've prerendered with relevant data 1`
Snapshot: "{\"message\":\"Why hello there\"} {\"redText\":\"example_redText__1rb5g\"}"
Received: "{\"message\":\"Why hello there\"} {\"redText\":\"ae\"}"
312 |
313 | const cssPreload = $('#nm-div')
> 314 | expect(cssPreload.text()).toMatchInlineSnapshot(
| ^
315 | `"{\\"message\\":\\"Why hello there\\"} {\\"redText\\":\\"example_redText__1rb5g\\"}"`
316 | )
317 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:314:31)
● Valid CSS Module Usage from within node_modules › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid CSS Module Usage from within node_modules should've emitted a single CSS file 1`
Snapshot: ".example_redText__1rb5g{color:red}"
Received: ".ae{color:red}"
326 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
327 |
> 328 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
329 | `".example_redText__1rb5g{color:red}"`
330 | )
331 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:328:59)
● Valid Nested CSS Module Usage from within node_modules › should've prerendered with relevant data
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid Nested CSS Module Usage from within node_modules should've prerendered with relevant data 1`
Snapshot: "{\"message\":\"Why hello there\"} {\"subClass\":\"example_subClass__2YUgj other_className__bt_-E\"}"
Received: "{\"message\":\"Why hello there\"} {\"subClass\":\"ae af\"}"
365 |
366 | const cssPreload = $('#nm-div')
> 367 | expect(cssPreload.text()).toMatchInlineSnapshot(
| ^
368 | `"{\\"message\\":\\"Why hello there\\"} {\\"subClass\\":\\"example_subClass__2YUgj other_className__bt_-E\\"}"`
369 | )
370 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:367:31)
● Valid Nested CSS Module Usage from within node_modules › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid Nested CSS Module Usage from within node_modules should've emitted a single CSS file 1`
Snapshot: ".other3_other3__1f9h7{color:violet}.other_className__bt_-E{background:red;color:#ff0}.other2_other2__2PUfY{color:red}.example_subClass__2YUgj{background:#00f}"
Received: ".ah{color:violet}.af{background:red;color:#ff0}.ag{color:red}.ae{background:#00f}"
379 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
380 |
> 381 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
382 | `".other3_other3__1f9h7{color:violet}.other_className__bt_-E{background:red;color:#ff0}.other2_other2__2PUfY{color:red}.example_subClass__2YUgj{background:#00f}"`
383 | )
384 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:381:59)
● CSS Module Composes Usage (Basic) › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Module Composes Usage (Basic) should've emitted a single CSS file 1`
Snapshot: ".index_className__3gr_q{background:red;color:#ff0}.index_subClass__FUvW6{background:#00f}"
Received: ".ae{background:red;color:#ff0}.af{background:#00f}"
412 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
413 |
> 414 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
415 | `".index_className__3gr_q{background:red;color:#ff0}.index_subClass__FUvW6{background:#00f}"`
416 | )
417 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:414:59)
● CSS Module Composes Usage (External) › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Module Composes Usage (External) should've emitted a single CSS file 1`
Snapshot: ".other_className__21NIP{background:red;color:#ff0}.index_subClass__FUvW6{background:#00f}"
Received: ".af{background:red;color:#ff0}.ae{background:#00f}"
445 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
446 |
> 447 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
448 | `".other_className__21NIP{background:red;color:#ff0}.index_subClass__FUvW6{background:#00f}"`
449 | )
450 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:447:59)
● Dynamic Route CSS Module Usage › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Dynamic Route CSS Module Usage should've emitted a single CSS file 1`
Snapshot: "._post__home__2Cy-L{background:red}"
Received: ".ae{background:red}"
493 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
494 |
> 495 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
496 | `"._post__home__2Cy-L{background:red}"`
497 | )
498 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:495:59)
● Catch-all Route CSS Module Usage › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Catch-all Route CSS Module Usage should've emitted a single CSS file 1`
Snapshot: ".___post__home__38gR-{background:red}.__55css_home__qxXcH{color:green}"
Received: ".ae{background:red}.af{color:green}"
543 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
544 |
> 545 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
546 | `".___post__home__38gR-{background:red}.__55css_home__qxXcH{color:green}"`
547 | )
548 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:545:59)
Jun 15
'20 17:06
ijjk
Failing test suites
test/integration/css-features/test/index.test.js
- CSS Modules: Import Global CSS > should've emitted a single CSS file
Expand output
● CSS Modules: Import Global CSS › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Modules: Import Global CSS should've emitted a single CSS file 1`
Snapshot: "a .styles_foo__31qlD{all:initial}"
Received: "a .a{all:initial}"
199 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
200 |
> 201 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
202 | `"a .styles_foo__31qlD{all:initial}"`
203 | )
204 | })
at Object.<anonymous> (integration/css-features/test/index.test.js:201:59)
test/integration/css-modules/test/index.test.js
- 3rd Party CSS Module Support > should've emitted a single CSS file
- 3rd Party CSS Module Support > should've injected the CSS on server render
- Basic CSS Module Support > should've emitted a single CSS file
- Basic CSS Module Support > should've injected the CSS on server render
- CSS Module Composes Usage (Basic) > should've emitted a single CSS file
- CSS Module Composes Usage (External) > should've emitted a single CSS file
- Catch-all Route CSS Module Usage > should've emitted a single CSS file
- Dynamic Route CSS Module Usage > should've emitted a single CSS file
- Valid CSS Module Usage from within node_modules > should've prerendered with relevant data
- Valid CSS Module Usage from within node_modules > should've emitted a single CSS file
- Valid Nested CSS Module Usage from within node_modules > should've prerendered with relevant data
- Valid Nested CSS Module Usage from within node_modules > should've emitted a single CSS file
Expand output
● Basic CSS Module Support › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Basic CSS Module Support should've emitted a single CSS file 1`
Snapshot: ".index_redText__3CwEB{color:red}"
Received: ".a{color:red}"
54 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
55 |
> 56 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
57 | `".index_redText__3CwEB{color:red}"`
58 | )
59 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:56:59)
● Basic CSS Module Support › should've injected the CSS on server render
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Basic CSS Module Support should've injected the CSS on server render 1`
Snapshot: "index_redText__3CwEB"
Received: "a"
71 | expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
72 |
> 73 | expect($('#verify-red').attr('class')).toMatchInlineSnapshot(
| ^
74 | `"index_redText__3CwEB"`
75 | )
76 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:73:44)
● 3rd Party CSS Module Support › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `3rd Party CSS Module Support should've emitted a single CSS file 1`
Snapshot: ".index_foo__29BAH{position:relative}.index_foo__29BAH .bar,.index_foo__29BAH .baz{height:100%;overflow:hidden}.index_foo__29BAH .lol,.index_foo__29BAH>.lel{width:80%}"
Received: ".a{position:relative}.a .bar,.a .baz{height:100%;overflow:hidden}.a .lol,.a>.lel{width:80%}"
110 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
111 |
> 112 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
113 | `".index_foo__29BAH{position:relative}.index_foo__29BAH .bar,.index_foo__29BAH .baz{height:100%;overflow:hidden}.index_foo__29BAH .lol,.index_foo__29BAH>.lel{width:80%}"`
114 | )
115 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:112:59)
● 3rd Party CSS Module Support › should've injected the CSS on server render
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `3rd Party CSS Module Support should've injected the CSS on server render 1`
Snapshot: "index_foo__29BAH"
Received: "a"
127 | expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
128 |
> 129 | expect($('#verify-div').attr('class')).toMatchInlineSnapshot(
| ^
130 | `"index_foo__29BAH"`
131 | )
132 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:129:44)
● Valid CSS Module Usage from within node_modules › should've prerendered with relevant data
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid CSS Module Usage from within node_modules should've prerendered with relevant data 1`
Snapshot: "{\"message\":\"Why hello there\"} {\"redText\":\"example_redText__1rb5g\"}"
Received: "{\"message\":\"Why hello there\"} {\"redText\":\"a\"}"
312 |
313 | const cssPreload = $('#nm-div')
> 314 | expect(cssPreload.text()).toMatchInlineSnapshot(
| ^
315 | `"{\\"message\\":\\"Why hello there\\"} {\\"redText\\":\\"example_redText__1rb5g\\"}"`
316 | )
317 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:314:31)
● Valid CSS Module Usage from within node_modules › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid CSS Module Usage from within node_modules should've emitted a single CSS file 1`
Snapshot: ".example_redText__1rb5g{color:red}"
Received: ".a{color:red}"
326 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
327 |
> 328 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
329 | `".example_redText__1rb5g{color:red}"`
330 | )
331 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:328:59)
● Valid Nested CSS Module Usage from within node_modules › should've prerendered with relevant data
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid Nested CSS Module Usage from within node_modules should've prerendered with relevant data 1`
Snapshot: "{\"message\":\"Why hello there\"} {\"subClass\":\"example_subClass__2YUgj other_className__bt_-E\"}"
Received: "{\"message\":\"Why hello there\"} {\"subClass\":\"a b\"}"
365 |
366 | const cssPreload = $('#nm-div')
> 367 | expect(cssPreload.text()).toMatchInlineSnapshot(
| ^
368 | `"{\\"message\\":\\"Why hello there\\"} {\\"subClass\\":\\"example_subClass__2YUgj other_className__bt_-E\\"}"`
369 | )
370 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:367:31)
● Valid Nested CSS Module Usage from within node_modules › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid Nested CSS Module Usage from within node_modules should've emitted a single CSS file 1`
Snapshot: ".other3_other3__1f9h7{color:violet}.other_className__bt_-E{background:red;color:#ff0}.other2_other2__2PUfY{color:red}.example_subClass__2YUgj{background:#00f}"
Received: ".d{color:violet}.b{background:red;color:#ff0}.c{color:red}.a{background:#00f}"
379 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
380 |
> 381 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
382 | `".other3_other3__1f9h7{color:violet}.other_className__bt_-E{background:red;color:#ff0}.other2_other2__2PUfY{color:red}.example_subClass__2YUgj{background:#00f}"`
383 | )
384 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:381:59)
● CSS Module Composes Usage (Basic) › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Module Composes Usage (Basic) should've emitted a single CSS file 1`
Snapshot: ".index_className__3gr_q{background:red;color:#ff0}.index_subClass__FUvW6{background:#00f}"
Received: ".a{background:red;color:#ff0}.b{background:#00f}"
412 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
413 |
> 414 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
415 | `".index_className__3gr_q{background:red;color:#ff0}.index_subClass__FUvW6{background:#00f}"`
416 | )
417 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:414:59)
● CSS Module Composes Usage (External) › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Module Composes Usage (External) should've emitted a single CSS file 1`
Snapshot: ".other_className__21NIP{background:red;color:#ff0}.index_subClass__FUvW6{background:#00f}"
Received: ".b{background:red;color:#ff0}.a{background:#00f}"
445 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
446 |
> 447 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
448 | `".other_className__21NIP{background:red;color:#ff0}.index_subClass__FUvW6{background:#00f}"`
449 | )
450 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:447:59)
● Dynamic Route CSS Module Usage › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Dynamic Route CSS Module Usage should've emitted a single CSS file 1`
Snapshot: "._post__home__2Cy-L{background:red}"
Received: ".a{background:red}"
493 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
494 |
> 495 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
496 | `"._post__home__2Cy-L{background:red}"`
497 | )
498 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:495:59)
● Catch-all Route CSS Module Usage › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Catch-all Route CSS Module Usage should've emitted a single CSS file 1`
Snapshot: ".___post__home__38gR-{background:red}.__55css_home__qxXcH{color:green}"
Received: ".a{background:red}.b{color:green}"
543 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
544 |
> 545 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
546 | `".___post__home__38gR-{background:red}.__55css_home__qxXcH{color:green}"`
547 | )
548 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:545:59)
Jun 15
'20 18:06
ijjk
Failing test suites
test/integration/css-features/test/index.test.js
- CSS Modules: Import Global CSS > should've emitted a single CSS file
Expand output
● CSS Modules: Import Global CSS › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Modules: Import Global CSS should've emitted a single CSS file 1`
Snapshot: "a .styles_foo__31qlD{all:initial}"
Received: "a .a{all:initial}"
199 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
200 |
> 201 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
202 | `"a .styles_foo__31qlD{all:initial}"`
203 | )
204 | })
at Object.<anonymous> (integration/css-features/test/index.test.js:201:59)
test/integration/css-modules/test/index.test.js
- 3rd Party CSS Module Support > should've emitted a single CSS file
- 3rd Party CSS Module Support > should've injected the CSS on server render
- Basic CSS Module Support > should've emitted a single CSS file
- Basic CSS Module Support > should've injected the CSS on server render
- CSS Module Composes Usage (Basic) > should've emitted a single CSS file
- CSS Module Composes Usage (External) > should've emitted a single CSS file
- Catch-all Route CSS Module Usage > should've emitted a single CSS file
- Dynamic Route CSS Module Usage > should've emitted a single CSS file
- Valid CSS Module Usage from within node_modules > should've prerendered with relevant data
- Valid CSS Module Usage from within node_modules > should've emitted a single CSS file
- Valid Nested CSS Module Usage from within node_modules > should've prerendered with relevant data
- Valid Nested CSS Module Usage from within node_modules > should've emitted a single CSS file
Expand output
● Basic CSS Module Support › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Basic CSS Module Support should've emitted a single CSS file 1`
Snapshot: ".index_redText__3CwEB{color:red}"
Received: ".a{color:red}"
54 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
55 |
> 56 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
57 | `".index_redText__3CwEB{color:red}"`
58 | )
59 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:56:59)
● Basic CSS Module Support › should've injected the CSS on server render
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Basic CSS Module Support should've injected the CSS on server render 1`
Snapshot: "index_redText__3CwEB"
Received: "a"
71 | expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
72 |
> 73 | expect($('#verify-red').attr('class')).toMatchInlineSnapshot(
| ^
74 | `"index_redText__3CwEB"`
75 | )
76 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:73:44)
● 3rd Party CSS Module Support › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `3rd Party CSS Module Support should've emitted a single CSS file 1`
Snapshot: ".index_foo__29BAH{position:relative}.index_foo__29BAH .bar,.index_foo__29BAH .baz{height:100%;overflow:hidden}.index_foo__29BAH .lol,.index_foo__29BAH>.lel{width:80%}"
Received: ".a{position:relative}.a .bar,.a .baz{height:100%;overflow:hidden}.a .lol,.a>.lel{width:80%}"
110 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
111 |
> 112 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
113 | `".index_foo__29BAH{position:relative}.index_foo__29BAH .bar,.index_foo__29BAH .baz{height:100%;overflow:hidden}.index_foo__29BAH .lol,.index_foo__29BAH>.lel{width:80%}"`
114 | )
115 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:112:59)
● 3rd Party CSS Module Support › should've injected the CSS on server render
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `3rd Party CSS Module Support should've injected the CSS on server render 1`
Snapshot: "index_foo__29BAH"
Received: "a"
127 | expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
128 |
> 129 | expect($('#verify-div').attr('class')).toMatchInlineSnapshot(
| ^
130 | `"index_foo__29BAH"`
131 | )
132 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:129:44)
● Valid CSS Module Usage from within node_modules › should've prerendered with relevant data
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid CSS Module Usage from within node_modules should've prerendered with relevant data 1`
Snapshot: "{\"message\":\"Why hello there\"} {\"redText\":\"example_redText__1rb5g\"}"
Received: "{\"message\":\"Why hello there\"} {\"redText\":\"a\"}"
312 |
313 | const cssPreload = $('#nm-div')
> 314 | expect(cssPreload.text()).toMatchInlineSnapshot(
| ^
315 | `"{\\"message\\":\\"Why hello there\\"} {\\"redText\\":\\"example_redText__1rb5g\\"}"`
316 | )
317 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:314:31)
● Valid CSS Module Usage from within node_modules › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid CSS Module Usage from within node_modules should've emitted a single CSS file 1`
Snapshot: ".example_redText__1rb5g{color:red}"
Received: ".a{color:red}"
326 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
327 |
> 328 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
329 | `".example_redText__1rb5g{color:red}"`
330 | )
331 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:328:59)
● Valid Nested CSS Module Usage from within node_modules › should've prerendered with relevant data
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid Nested CSS Module Usage from within node_modules should've prerendered with relevant data 1`
Snapshot: "{\"message\":\"Why hello there\"} {\"subClass\":\"example_subClass__2YUgj other_className__bt_-E\"}"
Received: "{\"message\":\"Why hello there\"} {\"subClass\":\"a b\"}"
365 |
366 | const cssPreload = $('#nm-div')
> 367 | expect(cssPreload.text()).toMatchInlineSnapshot(
| ^
368 | `"{\\"message\\":\\"Why hello there\\"} {\\"subClass\\":\\"example_subClass__2YUgj other_className__bt_-E\\"}"`
369 | )
370 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:367:31)
● Valid Nested CSS Module Usage from within node_modules › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid Nested CSS Module Usage from within node_modules should've emitted a single CSS file 1`
Snapshot: ".other3_other3__1f9h7{color:violet}.other_className__bt_-E{background:red;color:#ff0}.other2_other2__2PUfY{color:red}.example_subClass__2YUgj{background:#00f}"
Received: ".d{color:violet}.b{background:red;color:#ff0}.c{color:red}.a{background:#00f}"
379 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
380 |
> 381 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
382 | `".other3_other3__1f9h7{color:violet}.other_className__bt_-E{background:red;color:#ff0}.other2_other2__2PUfY{color:red}.example_subClass__2YUgj{background:#00f}"`
383 | )
384 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:381:59)
● CSS Module Composes Usage (Basic) › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Module Composes Usage (Basic) should've emitted a single CSS file 1`
Snapshot: ".index_className__3gr_q{background:red;color:#ff0}.index_subClass__FUvW6{background:#00f}"
Received: ".a{background:red;color:#ff0}.b{background:#00f}"
412 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
413 |
> 414 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
415 | `".index_className__3gr_q{background:red;color:#ff0}.index_subClass__FUvW6{background:#00f}"`
416 | )
417 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:414:59)
● CSS Module Composes Usage (External) › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Module Composes Usage (External) should've emitted a single CSS file 1`
Snapshot: ".other_className__21NIP{background:red;color:#ff0}.index_subClass__FUvW6{background:#00f}"
Received: ".b{background:red;color:#ff0}.a{background:#00f}"
445 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
446 |
> 447 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
448 | `".other_className__21NIP{background:red;color:#ff0}.index_subClass__FUvW6{background:#00f}"`
449 | )
450 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:447:59)
● Dynamic Route CSS Module Usage › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Dynamic Route CSS Module Usage should've emitted a single CSS file 1`
Snapshot: "._post__home__2Cy-L{background:red}"
Received: ".a{background:red}"
493 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
494 |
> 495 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
496 | `"._post__home__2Cy-L{background:red}"`
497 | )
498 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:495:59)
● Catch-all Route CSS Module Usage › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Catch-all Route CSS Module Usage should've emitted a single CSS file 1`
Snapshot: ".___post__home__38gR-{background:red}.__55css_home__qxXcH{color:green}"
Received: ".a{background:red}.b{color:green}"
543 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
544 |
> 545 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
546 | `".___post__home__38gR-{background:red}.__55css_home__qxXcH{color:green}"`
547 | )
548 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:545:59)
Jun 15
'20 18:06
ijjk
Failing test suites
test/integration/css-features/test/index.test.js
- CSS Modules: Import Global CSS > should've emitted a single CSS file
Expand output
● CSS Modules: Import Global CSS › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Modules: Import Global CSS should've emitted a single CSS file 1`
Snapshot: "a .styles_foo__31qlD{all:initial}"
Received: "a .a{all:initial}"
199 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
200 |
> 201 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
202 | `"a .styles_foo__31qlD{all:initial}"`
203 | )
204 | })
at Object.<anonymous> (integration/css-features/test/index.test.js:201:59)
Jun 15
'20 20:06
ijjk
@timneutkens Although tests pass, building a project using my local copy is spitting multiple warnings like the one below.
Conflict: Multiple assets emit different content to the same filename static/css/<hash>.css
Is it related to #13937 or is a problem I introduced with this PR?
@timneutkens Although tests pass, building a project using my local copy is spitting multiple warnings like the one below.
Conflict: Multiple assets emit different content to the same filename static/css/<hash>.css
Is it related to #13937 or is a problem I introduced with this PR?
Forget it, I was using an outdated local version
Failing test suites
Commit: f3a01c386df879c8c4fc3ebb07a55cff054ac052
test/integration/css-features/test/index.test.js
- CSS Modules: Import Global CSS > should've emitted a single CSS file
Expand output
● CSS Modules: Import Global CSS › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Modules: Import Global CSS should've emitted a single CSS file 1`
Snapshot: "a .A{all:initial}"
Received: "a .a{all:initial}"
199 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
200 |
> 201 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
202 | `"a .A{all:initial}"`
203 | )
204 | })
at Object.<anonymous> (integration/css-features/test/index.test.js:201:59)
test/unit/base62.test.js
- base62 tests > correctly encodes value
Expand output
● base62 tests › correctly encodes value
expect(received).toBe(expected) // Object.is equality
Expected: "a"
Received: "A"
10 | it('correctly encodes value', () => {
11 | const result1 = base62(36)
> 12 | expect(result1).toBe('a')
| ^
13 |
14 | const result2 = base62(123456)
15 | expect(result2).toBe('W7E')
at Object.<anonymous> (unit/base62.test.js:12:21)
Jun 24
'20 15:06
ijjk
Failing test suites
Commit: c95e4e21f98bb4990563021e6b40afd46848b96b
test/integration/css-features/test/index.test.js
- CSS Modules: Import Global CSS > should've emitted a single CSS file
Expand output
● CSS Modules: Import Global CSS › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Modules: Import Global CSS should've emitted a single CSS file 1`
Snapshot: "a .A{all:initial}"
Received: "a .a{all:initial}"
199 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
200 |
> 201 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
202 | `"a .A{all:initial}"`
203 | )
204 | })
at Object.<anonymous> (integration/css-features/test/index.test.js:201:59)
test/integration/css-modules/test/index.test.js
- 3rd Party CSS Module Support > should've emitted a single CSS file
- 3rd Party CSS Module Support > should've injected the CSS on server render
- Basic CSS Module Support > should've emitted a single CSS file
- Basic CSS Module Support > should've injected the CSS on server render
- CSS Module Composes Usage (Basic) > should've emitted a single CSS file
- CSS Module Composes Usage (External) > should've emitted a single CSS file
- Catch-all Route CSS Module Usage > should've emitted a single CSS file
- Dynamic Route CSS Module Usage > should've emitted a single CSS file
- Has CSS Module in computed styles in Production > emits optimized class names in Production
- Valid CSS Module Usage from within node_modules > should've prerendered with relevant data
- Valid CSS Module Usage from within node_modules > should've emitted a single CSS file
- Valid Nested CSS Module Usage from within node_modules > should've prerendered with relevant data
- Valid Nested CSS Module Usage from within node_modules > should've emitted a single CSS file
Expand output
● Basic CSS Module Support › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Basic CSS Module Support should've emitted a single CSS file 1`
Snapshot: ".A{color:red}"
Received: ".a{color:red}"
54 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
55 |
> 56 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
57 | `".A{color:red}"`
58 | )
59 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:56:59)
● Basic CSS Module Support › should've injected the CSS on server render
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Basic CSS Module Support should've injected the CSS on server render 1`
Snapshot: "A"
Received: "a"
71 | expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
72 |
> 73 | expect($('#verify-red').attr('class')).toMatchInlineSnapshot(`"A"`)
| ^
74 | })
75 | })
76 |
at Object.<anonymous> (integration/css-modules/test/index.test.js:73:44)
● 3rd Party CSS Module Support › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `3rd Party CSS Module Support should've emitted a single CSS file 1`
Snapshot: ".A{position:relative}.A .bar,.A .baz{height:100%;overflow:hidden}.A .lol,.A>.lel{width:80%}"
Received: ".a{position:relative}.a .bar,.a .baz{height:100%;overflow:hidden}.a .lol,.a>.lel{width:80%}"
108 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
109 |
> 110 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
111 | `".A{position:relative}.A .bar,.A .baz{height:100%;overflow:hidden}.A .lol,.A>.lel{width:80%}"`
112 | )
113 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:110:59)
● 3rd Party CSS Module Support › should've injected the CSS on server render
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `3rd Party CSS Module Support should've injected the CSS on server render 1`
Snapshot: "A"
Received: "a"
125 | expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
126 |
> 127 | expect($('#verify-div').attr('class')).toMatchInlineSnapshot(`"A"`)
| ^
128 | })
129 | })
130 |
at Object.<anonymous> (integration/css-modules/test/index.test.js:127:44)
● Has CSS Module in computed styles in Production › emits optimized class names in Production
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Has CSS Module in computed styles in Production emits optimized class names in Production 1`
Snapshot: "A"
Received: "a"
199 | const $ = cheerio.load(content)
200 |
> 201 | expect($('#verify-red').attr('class')).toMatchInlineSnapshot(`"A"`)
| ^
202 | })
203 | })
204 |
at Object.<anonymous> (integration/css-modules/test/index.test.js:201:44)
● Valid CSS Module Usage from within node_modules › should've prerendered with relevant data
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid CSS Module Usage from within node_modules should've prerendered with relevant data 1`
Snapshot: "{\"message\":\"Why hello there\"} {\"redText\":\"A\"}"
Received: "{\"message\":\"Why hello there\"} {\"redText\":\"a\"}"
324 |
325 | const cssPreload = $('#nm-div')
> 326 | expect(cssPreload.text()).toMatchInlineSnapshot(
| ^
327 | `"{\\"message\\":\\"Why hello there\\"} {\\"redText\\":\\"A\\"}"`
328 | )
329 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:326:31)
● Valid CSS Module Usage from within node_modules › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid CSS Module Usage from within node_modules should've emitted a single CSS file 1`
Snapshot: ".A{color:red}"
Received: ".a{color:red}"
338 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
339 |
> 340 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
341 | `".A{color:red}"`
342 | )
343 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:340:59)
● Valid Nested CSS Module Usage from within node_modules › should've prerendered with relevant data
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid Nested CSS Module Usage from within node_modules should've prerendered with relevant data 1`
Snapshot: "{\"message\":\"Why hello there\"} {\"subClass\":\"A B\"}"
Received: "{\"message\":\"Why hello there\"} {\"subClass\":\"a b\"}"
377 |
378 | const cssPreload = $('#nm-div')
> 379 | expect(cssPreload.text()).toMatchInlineSnapshot(
| ^
380 | `"{\\"message\\":\\"Why hello there\\"} {\\"subClass\\":\\"A B\\"}"`
381 | )
382 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:379:31)
● Valid Nested CSS Module Usage from within node_modules › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid Nested CSS Module Usage from within node_modules should've emitted a single CSS file 1`
Snapshot: ".D{color:violet}.B{background:red;color:#ff0}.C{color:red}.A{background:#00f}"
Received: ".d{color:violet}.b{background:red;color:#ff0}.c{color:red}.a{background:#00f}"
391 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
392 |
> 393 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
394 | `".D{color:violet}.B{background:red;color:#ff0}.C{color:red}.A{background:#00f}"`
395 | )
396 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:393:59)
● CSS Module Composes Usage (Basic) › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Module Composes Usage (Basic) should've emitted a single CSS file 1`
Snapshot: ".A{background:red;color:#ff0}.B{background:#00f}"
Received: ".a{background:red;color:#ff0}.b{background:#00f}"
424 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
425 |
> 426 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
427 | `".A{background:red;color:#ff0}.B{background:#00f}"`
428 | )
429 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:426:59)
● CSS Module Composes Usage (External) › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Module Composes Usage (External) should've emitted a single CSS file 1`
Snapshot: ".B{background:red;color:#ff0}.A{background:#00f}"
Received: ".b{background:red;color:#ff0}.a{background:#00f}"
457 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
458 |
> 459 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
460 | `".B{background:red;color:#ff0}.A{background:#00f}"`
461 | )
462 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:459:59)
● Dynamic Route CSS Module Usage › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Dynamic Route CSS Module Usage should've emitted a single CSS file 1`
Snapshot: ".A{background:red}"
Received: ".a{background:red}"
505 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
506 |
> 507 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
508 | `".A{background:red}"`
509 | )
510 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:507:59)
● Catch-all Route CSS Module Usage › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Catch-all Route CSS Module Usage should've emitted a single CSS file 1`
Snapshot: ".A{background:red}.B{color:green}"
Received: ".a{background:red}.b{color:green}"
555 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
556 |
> 557 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
558 | `".A{background:red}.B{color:green}"`
559 | )
560 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:557:59)
test/integration/scss-modules/test/index.test.js
- 3rd Party CSS Module Support > should've emitted a single CSS file
- 3rd Party CSS Module Support > should've injected the CSS on server render
- Basic SCSS Module Support > should've emitted a single CSS file
- Basic SCSS Module Support > should've injected the CSS on server render
- CSS Module Composes Usage (Basic) > should've emitted a single CSS file
- CSS Module Composes Usage (External) > should've emitted a single CSS file
- Catch-all Route CSS Module Usage > should've emitted a single CSS file
- Dynamic Route CSS Module Usage > should've emitted a single CSS file
- Has CSS Module in computed styles in Production > emits optimized class names in Production
- Valid CSS Module Usage from within node_modules > should've prerendered with relevant data
- Valid CSS Module Usage from within node_modules > should've emitted a single CSS file
- Valid Nested CSS Module Usage from within node_modules > should've prerendered with relevant data
- Valid Nested CSS Module Usage from within node_modules > should've emitted a single CSS file
Expand output
● Basic SCSS Module Support › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Basic SCSS Module Support should've emitted a single CSS file 1`
Snapshot: ".A{color:red}"
Received: ".a{color:red}"
53 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
54 |
> 55 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
56 | `".A{color:red}"`
57 | )
58 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:55:59)
● Basic SCSS Module Support › should've injected the CSS on server render
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Basic SCSS Module Support should've injected the CSS on server render 1`
Snapshot: "A"
Received: "a"
70 | expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
71 |
> 72 | expect($('#verify-red').attr('class')).toMatchInlineSnapshot(`"A"`)
| ^
73 | })
74 | })
75 |
at Object.<anonymous> (integration/scss-modules/test/index.test.js:72:44)
● 3rd Party CSS Module Support › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `3rd Party CSS Module Support should've emitted a single CSS file 1`
Snapshot: ".A{position:relative}.A .bar,.A .baz{height:100%;overflow:hidden}.A .lol,.A>.lel{width:80%}"
Received: ".a{position:relative}.a .bar,.a .baz{height:100%;overflow:hidden}.a .lol,.a>.lel{width:80%}"
107 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
108 |
> 109 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
110 | `".A{position:relative}.A .bar,.A .baz{height:100%;overflow:hidden}.A .lol,.A>.lel{width:80%}"`
111 | )
112 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:109:59)
● 3rd Party CSS Module Support › should've injected the CSS on server render
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `3rd Party CSS Module Support should've injected the CSS on server render 1`
Snapshot: "A"
Received: "a"
124 | expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
125 |
> 126 | expect($('#verify-div').attr('class')).toMatchInlineSnapshot(`"A"`)
| ^
127 | })
128 | })
129 |
at Object.<anonymous> (integration/scss-modules/test/index.test.js:126:44)
● Has CSS Module in computed styles in Production › emits optimized class names in Production
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Has CSS Module in computed styles in Production emits optimized class names in Production 1`
Snapshot: "A"
Received: "a"
198 | const $ = cheerio.load(content)
199 |
> 200 | expect($('#verify-red').attr('class')).toMatchInlineSnapshot(`"A"`)
| ^
201 | })
202 | })
203 |
at Object.<anonymous> (integration/scss-modules/test/index.test.js:200:44)
● Valid CSS Module Usage from within node_modules › should've prerendered with relevant data
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid CSS Module Usage from within node_modules should've prerendered with relevant data 1`
Snapshot: "{\"message\":\"Why hello there\"} {\"redText\":\"A\"}"
Received: "{\"message\":\"Why hello there\"} {\"redText\":\"a\"}"
323 |
324 | const cssPreload = $('#nm-div')
> 325 | expect(cssPreload.text()).toMatchInlineSnapshot(
| ^
326 | `"{\\"message\\":\\"Why hello there\\"} {\\"redText\\":\\"A\\"}"`
327 | )
328 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:325:31)
● Valid CSS Module Usage from within node_modules › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid CSS Module Usage from within node_modules should've emitted a single CSS file 1`
Snapshot: ".A{color:red}"
Received: ".a{color:red}"
337 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
338 |
> 339 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
340 | `".A{color:red}"`
341 | )
342 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:339:59)
● Valid Nested CSS Module Usage from within node_modules › should've prerendered with relevant data
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid Nested CSS Module Usage from within node_modules should've prerendered with relevant data 1`
Snapshot: "{\"message\":\"Why hello there\"} {\"other2\":\"A\",\"subClass\":\"B D\"}"
Received: "{\"message\":\"Why hello there\"} {\"other2\":\"a\",\"subClass\":\"b d\"}"
376 |
377 | const cssPreload = $('#nm-div')
> 378 | expect(cssPreload.text()).toMatchInlineSnapshot(
| ^
379 | `"{\\"message\\":\\"Why hello there\\"} {\\"other2\\":\\"A\\",\\"subClass\\":\\"B D\\"}"`
380 | )
381 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:378:31)
● Valid Nested CSS Module Usage from within node_modules › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid Nested CSS Module Usage from within node_modules should've emitted a single CSS file 1`
Snapshot: ".C{color:violet}.D{background:red;color:#ff0}.A{color:red}.B{background:#00f}"
Received: ".c{color:violet}.d{background:red;color:#ff0}.a{color:red}.b{background:#00f}"
390 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
391 |
> 392 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
393 | `".C{color:violet}.D{background:red;color:#ff0}.A{color:red}.B{background:#00f}"`
394 | )
395 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:392:59)
● CSS Module Composes Usage (Basic) › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Module Composes Usage (Basic) should've emitted a single CSS file 1`
Snapshot: ".A{background:red;color:#ff0}.B{background:#00f}"
Received: ".a{background:red;color:#ff0}.b{background:#00f}"
423 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
424 |
> 425 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
426 | `".A{background:red;color:#ff0}.B{background:#00f}"`
427 | )
428 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:425:59)
● CSS Module Composes Usage (External) › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Module Composes Usage (External) should've emitted a single CSS file 1`
Snapshot: ".B{background:red;color:#ff0}.A{background:#00f}"
Received: ".b{background:red;color:#ff0}.a{background:#00f}"
456 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
457 |
> 458 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
459 | `".B{background:red;color:#ff0}.A{background:#00f}"`
460 | )
461 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:458:59)
● Dynamic Route CSS Module Usage › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Dynamic Route CSS Module Usage should've emitted a single CSS file 1`
Snapshot: ".A{background:red}"
Received: ".a{background:red}"
494 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
495 |
> 496 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
497 | `".A{background:red}"`
498 | )
499 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:496:59)
● Catch-all Route CSS Module Usage › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Catch-all Route CSS Module Usage should've emitted a single CSS file 1`
Snapshot: ".A{background:red}"
Received: ".a{background:red}"
552 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
553 |
> 554 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
555 | `".A{background:red}"`
556 | )
557 | })
at Object.<anonymous> (integration/scss-modules/test/index.test.js:554:59)
Jun 24
'20 20:06
ijjk
Failing test suites
Commit: a474ad15c92d0186ab52c8b2d4fbb59f9893ef32
test/unit/base62.test.js
Expand output
● Test suite failed to run
Cannot find module 'next/dist/build/webpack/config/blocks/css/loaders/utils/base62' from 'base62.test.js'
> 1 | import base62 from 'next/dist/build/webpack/config/blocks/css/loaders/utils/base62'
| ^
2 |
3 | describe('base62 tests', () => {
4 | it('returns first word in dictionary if input equals 0', () => {
at Resolver.resolveModule (../node_modules/jest-resolve/build/index.js:259:17)
at Object.<anonymous> (unit/base62.test.js:1:1)
test/unit/sequential-id-generator.test.js
Expand output
● Test suite failed to run
Cannot find module 'next/dist/build/webpack/config/blocks/css/loaders/utils/SequentialIDGenerator' from 'sequential-id-generator.test.js'
> 1 | import SequentialIDGenerator from 'next/dist/build/webpack/config/blocks/css/loaders/utils/SequentialIDGenerator'
| ^
2 |
3 | describe('', () => {
4 | let generator
at Resolver.resolveModule (../node_modules/jest-resolve/build/index.js:259:17)
at Object.<anonymous> (unit/sequential-id-generator.test.js:1:1)
test/integration/css-features/test/index.test.js
- CSS Modules: Import Global CSS > should've emitted a single CSS file
Expand output
● CSS Modules: Import Global CSS › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Modules: Import Global CSS should've emitted a single CSS file 1`
Snapshot: "a .A{all:initial}"
Received: "a .a{all:initial}"
199 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
200 |
> 201 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
202 | `"a .A{all:initial}"`
203 | )
204 | })
at Object.<anonymous> (integration/css-features/test/index.test.js:201:59)
test/integration/css-modules/test/index.test.js
- 3rd Party CSS Module Support > should've emitted a single CSS file
- 3rd Party CSS Module Support > should've injected the CSS on server render
- Basic CSS Module Support > should've emitted a single CSS file
- Basic CSS Module Support > should've injected the CSS on server render
- CSS Module Composes Usage (Basic) > should've emitted a single CSS file
- CSS Module Composes Usage (External) > should've emitted a single CSS file
- Catch-all Route CSS Module Usage > should've emitted a single CSS file
- Dynamic Route CSS Module Usage > should've emitted a single CSS file
- Has CSS Module in computed styles in Production > emits optimized class names in Production
- Valid CSS Module Usage from within node_modules > should've prerendered with relevant data
- Valid CSS Module Usage from within node_modules > should've emitted a single CSS file
- Valid Nested CSS Module Usage from within node_modules > should've prerendered with relevant data
- Valid Nested CSS Module Usage from within node_modules > should've emitted a single CSS file
Expand output
● Basic CSS Module Support › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Basic CSS Module Support should've emitted a single CSS file 1`
Snapshot: ".A{color:red}"
Received: ".a{color:red}"
54 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
55 |
> 56 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
57 | `".A{color:red}"`
58 | )
59 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:56:59)
● Basic CSS Module Support › should've injected the CSS on server render
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Basic CSS Module Support should've injected the CSS on server render 1`
Snapshot: "A"
Received: "a"
71 | expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
72 |
> 73 | expect($('#verify-red').attr('class')).toMatchInlineSnapshot(`"A"`)
| ^
74 | })
75 | })
76 |
at Object.<anonymous> (integration/css-modules/test/index.test.js:73:44)
● 3rd Party CSS Module Support › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `3rd Party CSS Module Support should've emitted a single CSS file 1`
Snapshot: ".A{position:relative}.A .bar,.A .baz{height:100%;overflow:hidden}.A .lol,.A>.lel{width:80%}"
Received: ".a{position:relative}.a .bar,.a .baz{height:100%;overflow:hidden}.a .lol,.a>.lel{width:80%}"
108 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
109 |
> 110 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
111 | `".A{position:relative}.A .bar,.A .baz{height:100%;overflow:hidden}.A .lol,.A>.lel{width:80%}"`
112 | )
113 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:110:59)
● 3rd Party CSS Module Support › should've injected the CSS on server render
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `3rd Party CSS Module Support should've injected the CSS on server render 1`
Snapshot: "A"
Received: "a"
125 | expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
126 |
> 127 | expect($('#verify-div').attr('class')).toMatchInlineSnapshot(`"A"`)
| ^
128 | })
129 | })
130 |
at Object.<anonymous> (integration/css-modules/test/index.test.js:127:44)
● Has CSS Module in computed styles in Production › emits optimized class names in Production
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Has CSS Module in computed styles in Production emits optimized class names in Production 1`
Snapshot: "A"
Received: "a"
199 | const $ = cheerio.load(content)
200 |
> 201 | expect($('#verify-red').attr('class')).toMatchInlineSnapshot(`"A"`)
| ^
202 | })
203 | })
204 |
at Object.<anonymous> (integration/css-modules/test/index.test.js:201:44)
● Valid CSS Module Usage from within node_modules › should've prerendered with relevant data
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid CSS Module Usage from within node_modules should've prerendered with relevant data 1`
Snapshot: "{\"message\":\"Why hello there\"} {\"redText\":\"A\"}"
Received: "{\"message\":\"Why hello there\"} {\"redText\":\"a\"}"
324 |
325 | const cssPreload = $('#nm-div')
> 326 | expect(cssPreload.text()).toMatchInlineSnapshot(
| ^
327 | `"{\\"message\\":\\"Why hello there\\"} {\\"redText\\":\\"A\\"}"`
328 | )
329 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:326:31)
● Valid CSS Module Usage from within node_modules › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid CSS Module Usage from within node_modules should've emitted a single CSS file 1`
Snapshot: ".A{color:red}"
Received: ".a{color:red}"
338 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
339 |
> 340 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
341 | `".A{color:red}"`
342 | )
343 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:340:59)
● Valid Nested CSS Module Usage from within node_modules › should've prerendered with relevant data
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid Nested CSS Module Usage from within node_modules should've prerendered with relevant data 1`
Snapshot: "{\"message\":\"Why hello there\"} {\"subClass\":\"A B\"}"
Received: "{\"message\":\"Why hello there\"} {\"subClass\":\"a b\"}"
377 |
378 | const cssPreload = $('#nm-div')
> 379 | expect(cssPreload.text()).toMatchInlineSnapshot(
| ^
380 | `"{\\"message\\":\\"Why hello there\\"} {\\"subClass\\":\\"A B\\"}"`
381 | )
382 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:379:31)
● Valid Nested CSS Module Usage from within node_modules › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Valid Nested CSS Module Usage from within node_modules should've emitted a single CSS file 1`
Snapshot: ".D{color:violet}.B{background:red;color:#ff0}.C{color:red}.A{background:#00f}"
Received: ".d{color:violet}.b{background:red;color:#ff0}.c{color:red}.a{background:#00f}"
391 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
392 |
> 393 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
394 | `".D{color:violet}.B{background:red;color:#ff0}.C{color:red}.A{background:#00f}"`
395 | )
396 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:393:59)
● CSS Module Composes Usage (Basic) › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Module Composes Usage (Basic) should've emitted a single CSS file 1`
Snapshot: ".A{background:red;color:#ff0}.B{background:#00f}"
Received: ".a{background:red;color:#ff0}.b{background:#00f}"
424 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
425 |
> 426 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
427 | `".A{background:red;color:#ff0}.B{background:#00f}"`
428 | )
429 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:426:59)
● CSS Module Composes Usage (External) › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `CSS Module Composes Usage (External) should've emitted a single CSS file 1`
Snapshot: ".B{background:red;color:#ff0}.A{background:#00f}"
Received: ".b{background:red;color:#ff0}.a{background:#00f}"
457 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
458 |
> 459 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
460 | `".B{background:red;color:#ff0}.A{background:#00f}"`
461 | )
462 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:459:59)
● Dynamic Route CSS Module Usage › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Dynamic Route CSS Module Usage should've emitted a single CSS file 1`
Snapshot: ".A{background:red}"
Received: ".a{background:red}"
505 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
506 |
> 507 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
508 | `".A{background:red}"`
509 | )
510 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:507:59)
● Catch-all Route CSS Module Usage › should've emitted a single CSS file
expect(received).toMatchInlineSnapshot(snapshot)
Snapshot name: `Catch-all Route CSS Module Usage should've emitted a single CSS file 1`
Snapshot: ".A{background:red}.B{color:green}"
Received: ".a{background:red}.b{color:green}"
555 | const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
556 |
> 557 | expect(cssContent.replace(/\/\*.*?\*\//g, '').trim()).toMatchInlineSnapshot(
| ^
558 | `".A{background:red}.B{color:green}"`
559 | )
560 | })
at Object.<anonymous> (integration/css-modules/test/index.test.js:557:59)
Jun 24
'20 20:06
ijjk
Failing test suites
Commit: b08729831634b25e06e3f46d4b642f76b8c09abe
test/unit/sequential-css-module-local-ident-generator.test.js
Expand output
● Test suite failed to run
Cannot find module 'next/dist/build/webpack/config/blocks/css/loaders/utils/SequentialCSSModuleLocalIdentGenerator' from 'sequential-css-module-local-ident-generator.test.js'
> 1 | import SequentialCSSModuleLocalIdentGenerator from 'next/dist/build/webpack/config/blocks/css/loaders/utils/SequentialCSSModuleLocalIdentGenerator'
| ^
2 |
3 | describe('', () => {
4 | let generator
at Resolver.resolveModule (../node_modules/jest-resolve/build/index.js:259:17)
at Object.<anonymous> (unit/sequential-css-module-local-ident-generator.test.js:1:1)
Jun 24
'20 21:06
ijjk
next.js copied to clipboard
vercel
