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]>
38 lines
939 B
TypeScript
38 lines
939 B
TypeScript
/* eslint-env jest */
|
|
|
|
import { nextTestSetup } from 'e2e-utils'
|
|
import { colorToRgb } from 'next-test-utils'
|
|
|
|
describe.each([
|
|
{ dependencies: { sass: '1.54.0' }, nextConfig: undefined },
|
|
{
|
|
dependencies: { 'sass-embedded': '1.75.0' },
|
|
nextConfig: {
|
|
sassOptions: {
|
|
implementation: 'sass-embedded',
|
|
},
|
|
},
|
|
},
|
|
])(
|
|
'CSS Module Composes Usage (Basic) ($dependencies)',
|
|
({ dependencies, nextConfig }) => {
|
|
const { next } = nextTestSetup({
|
|
files: __dirname,
|
|
dependencies,
|
|
nextConfig,
|
|
})
|
|
|
|
it('should render the module', async () => {
|
|
const browser = await next.browser('/')
|
|
expect(
|
|
await browser.elementByCss('#verify-yellow').getComputedCss('color')
|
|
).toBe(colorToRgb('yellow'))
|
|
expect(
|
|
await browser
|
|
.elementByCss('#verify-yellow')
|
|
.getComputedCss('background-color')
|
|
).toBe(colorToRgb('blue'))
|
|
})
|
|
}
|
|
)
|