mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +00:00
Donny/강동윤andGitHub
3e6720c364
# Turbopack * https://github.com/vercel/turbo/pull/7719 <!-- Tobias Koppers - accept css files outside of the project as virtual assets --> * https://github.com/vercel/turbo/pull/7661 <!-- Tobias Koppers - more efficient node.js process startup --> * https://github.com/vercel/turbo/pull/7720 <!-- Tobias Koppers - generate correct async module handling for side effects optimization --> * https://github.com/vercel/turbo/pull/7718 <!-- Donny/강동윤 - fix(turbopack): Fix CSS Modules class name for lightningcss mode --> ### What? Update tests to make CSS Modules of `lightningcss` work with CSS grids. ### Why? `lightningcss` enforces the class name to end with `[local]`. See: https://lightningcss.dev/css-modules.html#css-grid ### How? Closes PACK-2731
54 lines
1.8 KiB
TypeScript
54 lines
1.8 KiB
TypeScript
import { nextTestSetup } from 'e2e-utils'
|
|
import { describeVariants } from 'next-test-utils'
|
|
|
|
describeVariants.each(['turbo'])('experimental-lightningcss', () => {
|
|
const { next } = nextTestSetup({
|
|
files: __dirname,
|
|
})
|
|
|
|
it('should support css modules', async () => {
|
|
// Recommended for tests that check HTML. Cheerio is a HTML parser that has a jQuery like API.
|
|
const $ = await next.render$('/')
|
|
expect($('p').text()).toBe('hello world')
|
|
// swc_css does not include `-module` in the class name, while lightningcss does.
|
|
expect($('p').attr('class')).toBe(
|
|
'search-keyword style-module__hlQ3RG__blue'
|
|
)
|
|
})
|
|
})
|
|
|
|
// lightningcss produces different class names in turbo mode
|
|
describeVariants.each(['default'])(
|
|
'experimental-lightningcss with default mode',
|
|
() => {
|
|
describe('in dev server', () => {
|
|
const { next } = nextTestSetup({
|
|
files: __dirname,
|
|
dependencies: { lightningcss: '^1.23.0' },
|
|
packageJson: {
|
|
browserslist: ['chrome 100'],
|
|
},
|
|
})
|
|
|
|
it('should support css modules', async () => {
|
|
// Recommended for tests that check HTML. Cheerio is a HTML parser that has a jQuery like API.
|
|
const $ = await next.render$('/')
|
|
expect($('p').text()).toBe('hello world')
|
|
// We remove hash from the class name in test mode using env var because it is not deterministic.
|
|
expect($('p').attr('class')).toBe('search-keyword style-module__blue')
|
|
})
|
|
|
|
it('should support browserslist', async () => {
|
|
const $ = await next.browser('/')
|
|
|
|
expect(await $.elementByCss('.nested').text()).toBe(
|
|
'Red due to nesting'
|
|
)
|
|
expect(await $.elementByCss('.nested').getComputedCss('color')).toBe(
|
|
'rgb(255, 0, 0)'
|
|
)
|
|
})
|
|
})
|
|
}
|
|
)
|