mirror of
https://github.com/hanzoai/next.js.git
synced 2026-10-30 14:46:38 +00:00
50b9966ba9
## What? This PR adds an option to use `sass-embedded`. ## Why? For large projects sass-embedded improves SCSS compilation time by over 50%. See also https://github.com/vercel/next.js/discussions/36160 ## How? Added a sassOption `implementation` to configure the sass-loader which Sass implementation to use. See also https://www.npmjs.com/package/sass-loader#implementation I think this a similar approach to what is done for `additionalData`. ## Additional notes In order to support `sass-embedded`, `sass-loader` is upgraded to 12.6.0. --------- Co-authored-by: Zack Tanner <[email protected]>
56 lines
1.6 KiB
TypeScript
56 lines
1.6 KiB
TypeScript
/* eslint-env jest */
|
|
|
|
import { nextTestSetup } from 'e2e-utils'
|
|
import { colorToRgb, retry } from 'next-test-utils'
|
|
|
|
describe.each([
|
|
{ dependencies: { sass: '1.54.0' }, nextConfig: undefined },
|
|
{
|
|
dependencies: { 'sass-embedded': '1.75.0' },
|
|
nextConfig: {
|
|
sassOptions: {
|
|
implementation: 'sass-embedded',
|
|
},
|
|
},
|
|
},
|
|
])(
|
|
'Can hot reload CSS Module without losing state ($dependencies)',
|
|
({ dependencies, nextConfig }) => {
|
|
const { next, isNextDev } = nextTestSetup({
|
|
files: __dirname,
|
|
dependencies,
|
|
nextConfig,
|
|
})
|
|
;(isNextDev ? describe : describe.skip)('development only', () => {
|
|
it('should update CSS color without remounting <input>', async () => {
|
|
const browser = await next.browser('/')
|
|
|
|
const desiredText = 'hello world'
|
|
await browser.elementById('text-input').type(desiredText)
|
|
expect(await browser.elementById('text-input').getValue()).toBe(
|
|
desiredText
|
|
)
|
|
|
|
expect(
|
|
await browser.elementByCss('#verify-red').getComputedCss('color')
|
|
).toBe(colorToRgb('red'))
|
|
|
|
await next.patchFile('pages/index.module.scss', (content) => {
|
|
return content.replace('$var: red', '$var: purple')
|
|
})
|
|
|
|
await retry(async () => {
|
|
expect(
|
|
await browser.elementByCss('#verify-red').getComputedCss('color')
|
|
).toBe(colorToRgb('purple'))
|
|
})
|
|
|
|
// ensure text remained
|
|
expect(await browser.elementById('text-input').getValue()).toBe(
|
|
desiredText
|
|
)
|
|
})
|
|
})
|
|
}
|
|
)
|