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'
|
|
|
|
describe.each([
|
|
{ dependencies: { sass: '1.54.0' }, nextConfig: undefined },
|
|
{
|
|
dependencies: { 'sass-embedded': '1.75.0' },
|
|
nextConfig: {
|
|
sassOptions: {
|
|
implementation: 'sass-embedded',
|
|
},
|
|
},
|
|
},
|
|
])('unused scss', ({ dependencies, nextConfig }) => {
|
|
describe('Body is not hidden when unused in Development ($dependencies)', () => {
|
|
const { next, isNextDev } = nextTestSetup({
|
|
files: __dirname,
|
|
dependencies,
|
|
nextConfig,
|
|
})
|
|
|
|
;(isNextDev ? describe : describe.skip)('development only', () => {
|
|
it('should have body visible', async () => {
|
|
const browser = await next.browser('/')
|
|
const currentDisplay = await browser.eval(
|
|
`window.getComputedStyle(document.querySelector('body')).display`
|
|
)
|
|
expect(currentDisplay).toBe('block')
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('Body is not hidden when broken in Development', () => {
|
|
const { next, isNextDev } = nextTestSetup({
|
|
files: __dirname,
|
|
dependencies,
|
|
nextConfig,
|
|
})
|
|
|
|
;(isNextDev ? describe : describe.skip)('development only', () => {
|
|
it('should have body visible', async () => {
|
|
await next.patchFile('pages/index.js', (contents) => {
|
|
return contents.replace('<div />', '<div>')
|
|
})
|
|
|
|
const browser = await next.browser('/')
|
|
const currentDisplay = await browser.eval(
|
|
`window.getComputedStyle(document.querySelector('body')).display`
|
|
)
|
|
expect(currentDisplay).toBe('block')
|
|
})
|
|
})
|
|
})
|
|
})
|