mirror of
https://github.com/hanzoai/next.js.git
synced 2026-09-24 17:00:51 +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]>
75 lines
2.1 KiB
TypeScript
75 lines
2.1 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',
|
|
},
|
|
},
|
|
},
|
|
])('SCSS Support ($dependencies)', ({ dependencies, nextConfig }) => {
|
|
const { next, isNextDev } = nextTestSetup({
|
|
files: __dirname,
|
|
dependencies,
|
|
nextConfig,
|
|
})
|
|
describe('Has CSS in computed styles in Production', () => {
|
|
it('should have CSS for page', async () => {
|
|
const browser = await next.browser('/page2')
|
|
|
|
expect(
|
|
await browser.elementByCss('.blue-text').getComputedCss('color')
|
|
).toBe(colorToRgb('blue'))
|
|
})
|
|
})
|
|
|
|
if (isNextDev) {
|
|
describe('Can hot reload CSS without losing state', () => {
|
|
it('should update CSS color without remounting <input>', async () => {
|
|
const browser = await next.browser('/page1')
|
|
|
|
const desiredText = 'hello world'
|
|
await browser.elementById('text-input').type(desiredText)
|
|
expect(await browser.elementById('text-input').getValue()).toBe(
|
|
desiredText
|
|
)
|
|
|
|
expect(
|
|
await browser.elementByCss('.red-text').getComputedCss('color')
|
|
).toBe(colorToRgb('red'))
|
|
|
|
await next.patchFile('styles/global1.scss', (contents) => {
|
|
return contents.replace('$var: red', '$var: purple')
|
|
})
|
|
|
|
await retry(async () => {
|
|
expect(
|
|
await browser.elementByCss('.red-text').getComputedCss('color')
|
|
).toBe(colorToRgb('purple'))
|
|
})
|
|
|
|
// ensure text remained
|
|
expect(await browser.elementById('text-input').getValue()).toBe(
|
|
desiredText
|
|
)
|
|
})
|
|
})
|
|
}
|
|
|
|
describe('Has CSS in computed styles in Development', () => {
|
|
it('should have CSS for page', async () => {
|
|
const browser = await next.browser('/page2')
|
|
|
|
expect(
|
|
await browser.elementByCss('.blue-text').getComputedCss('color')
|
|
).toBe(colorToRgb('blue'))
|
|
})
|
|
})
|
|
})
|