From 6414d0aa9a73bf4e73b9547a4590f27d5e794416 Mon Sep 17 00:00:00 2001 From: JJ Kasper Date: Fri, 13 Mar 2020 17:05:35 -0500 Subject: [PATCH 1/2] Add support for SCSS includePaths --- packages/next/build/webpack-config.ts | 1 + .../build/webpack/config/blocks/css/index.ts | 5 ++++ packages/next/build/webpack/config/index.ts | 3 ++ packages/next/build/webpack/config/utils.ts | 2 ++ packages/next/next-server/server/config.ts | 1 + .../basic-module-include-paths/next.config.js | 7 +++++ .../basic-module-include-paths/pages/index.js | 9 ++++++ .../pages/index.module.scss | 5 ++++ .../styles/_vars.scss | 1 + test/integration/scss/test/index.test.js | 28 +++++++++++++++++++ 10 files changed, 62 insertions(+) create mode 100644 test/integration/scss-fixtures/basic-module-include-paths/next.config.js create mode 100644 test/integration/scss-fixtures/basic-module-include-paths/pages/index.js create mode 100644 test/integration/scss-fixtures/basic-module-include-paths/pages/index.module.scss create mode 100644 test/integration/scss-fixtures/basic-module-include-paths/styles/_vars.scss diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 106cd1bf37919..96b1d01bc6694 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -897,6 +897,7 @@ export default async function getBaseWebpackConfig( hasSupportCss: !!config.experimental.css, hasSupportScss: !!config.experimental.scss, assetPrefix: config.assetPrefix || '', + scssIncludePaths: config.experimental.scssIncludePaths, }) if (typeof config.webpack === 'function') { diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/packages/next/build/webpack/config/blocks/css/index.ts index 0ba6ec7051db3..107f04ea95b9f 100644 --- a/packages/next/build/webpack/config/blocks/css/index.ts +++ b/packages/next/build/webpack/config/blocks/css/index.ts @@ -34,6 +34,10 @@ export const css = curry(async function css( return config } + const sassOptions = { + includePaths: ctx.scssIncludePaths, + } + const sassPreprocessors: webpack.RuleSetUseItem[] = [ // First, process files with `sass-loader`: this inlines content, and // compiles away the proprietary syntax. @@ -43,6 +47,7 @@ export const css = curry(async function css( // Source maps are required so that `resolve-url-loader` can locate // files original to their source directory. sourceMap: true, + sassOptions, }, }, // Then, `sass-loader` will have passed-through CSS imports as-is instead diff --git a/packages/next/build/webpack/config/index.ts b/packages/next/build/webpack/config/index.ts index 8df1fffe08efa..114e8f20ba768 100644 --- a/packages/next/build/webpack/config/index.ts +++ b/packages/next/build/webpack/config/index.ts @@ -13,6 +13,7 @@ export async function build( hasSupportCss, hasSupportScss, assetPrefix, + scssIncludePaths, }: { rootDirectory: string customAppFile: string | null @@ -21,6 +22,7 @@ export async function build( hasSupportCss: boolean hasSupportScss: boolean assetPrefix: string + scssIncludePaths: string[] } ): Promise { const ctx: ConfigurationContext = { @@ -35,6 +37,7 @@ export async function build( ? assetPrefix.slice(0, -1) : assetPrefix : '', + scssIncludePaths, } const fn = pipe(base(ctx), css(hasSupportCss, hasSupportScss, ctx)) diff --git a/packages/next/build/webpack/config/utils.ts b/packages/next/build/webpack/config/utils.ts index f84d9e903dec4..9686587863517 100644 --- a/packages/next/build/webpack/config/utils.ts +++ b/packages/next/build/webpack/config/utils.ts @@ -11,6 +11,8 @@ export type ConfigurationContext = { isClient: boolean assetPrefix: string + + scssIncludePaths: string[] } export type ConfigurationFn = ( diff --git a/packages/next/next-server/server/config.ts b/packages/next/next-server/server/config.ts index 84cfe126c923b..ba00ccdfa54c3 100644 --- a/packages/next/next-server/server/config.ts +++ b/packages/next/next-server/server/config.ts @@ -52,6 +52,7 @@ const defaultConfig: { [key: string]: any } = { reactMode: 'legacy', workerThreads: false, basePath: '', + scssIncludePaths: [], }, future: { excludeDefaultMomentLocales: false, diff --git a/test/integration/scss-fixtures/basic-module-include-paths/next.config.js b/test/integration/scss-fixtures/basic-module-include-paths/next.config.js new file mode 100644 index 0000000000000..235ad7e248bf5 --- /dev/null +++ b/test/integration/scss-fixtures/basic-module-include-paths/next.config.js @@ -0,0 +1,7 @@ +const path = require('path') + +module.exports = { + experimental: { + scssIncludePaths: [path.join(__dirname, 'styles')], + }, +} diff --git a/test/integration/scss-fixtures/basic-module-include-paths/pages/index.js b/test/integration/scss-fixtures/basic-module-include-paths/pages/index.js new file mode 100644 index 0000000000000..7b42859a67e32 --- /dev/null +++ b/test/integration/scss-fixtures/basic-module-include-paths/pages/index.js @@ -0,0 +1,9 @@ +import { redText } from './index.module.scss' + +export default function Home() { + return ( +
+ This text should be red. +
+ ) +} diff --git a/test/integration/scss-fixtures/basic-module-include-paths/pages/index.module.scss b/test/integration/scss-fixtures/basic-module-include-paths/pages/index.module.scss new file mode 100644 index 0000000000000..a03f5a3efebac --- /dev/null +++ b/test/integration/scss-fixtures/basic-module-include-paths/pages/index.module.scss @@ -0,0 +1,5 @@ +@import '_vars.scss'; + +.redText { + color: $var; +} diff --git a/test/integration/scss-fixtures/basic-module-include-paths/styles/_vars.scss b/test/integration/scss-fixtures/basic-module-include-paths/styles/_vars.scss new file mode 100644 index 0000000000000..121e9ffac3164 --- /dev/null +++ b/test/integration/scss-fixtures/basic-module-include-paths/styles/_vars.scss @@ -0,0 +1 @@ +$var: red; diff --git a/test/integration/scss/test/index.test.js b/test/integration/scss/test/index.test.js index 9daec89617a43..7c6203a7a55d6 100644 --- a/test/integration/scss/test/index.test.js +++ b/test/integration/scss/test/index.test.js @@ -78,6 +78,34 @@ describe('SCSS Support', () => { }) }) + describe('Basic Module Include Paths Support', () => { + const appDir = join(fixturesDir, 'basic-module-include-paths') + + beforeAll(async () => { + await remove(join(appDir, '.next')) + }) + + it('should compile successfully', async () => { + const { code, stdout } = await nextBuild(appDir, [], { + stdout: true, + }) + expect(code).toBe(0) + expect(stdout).toMatch(/Compiled successfully/) + }) + + it(`should've emitted a single CSS file`, async () => { + const cssFolder = join(appDir, '.next/static/css') + + const files = await readdir(cssFolder) + const cssFiles = files.filter(f => /\.css$/.test(f)) + + expect(cssFiles.length).toBe(1) + expect(await readFile(join(cssFolder, cssFiles[0]), 'utf8')).toContain( + 'color:red' + ) + }) + }) + describe('Basic Global Support with src/ dir', () => { const appDir = join(fixturesDir, 'single-global-src') From c31249a4605cfca9ed858ff3426b93efe8fb53d4 Mon Sep 17 00:00:00 2001 From: Tim Neutkens Date: Mon, 16 Mar 2020 09:59:55 +0100 Subject: [PATCH 2/2] Support sassOptions instead of just includePaths --- packages/next/build/webpack-config.ts | 2 +- packages/next/build/webpack/config/blocks/css/index.ts | 6 +----- packages/next/build/webpack/config/index.ts | 6 +++--- packages/next/build/webpack/config/utils.ts | 2 +- packages/next/next-server/server/config.ts | 2 +- .../scss-fixtures/basic-module-include-paths/next.config.js | 4 +++- 6 files changed, 10 insertions(+), 12 deletions(-) diff --git a/packages/next/build/webpack-config.ts b/packages/next/build/webpack-config.ts index 96b1d01bc6694..d4e3106196e3c 100644 --- a/packages/next/build/webpack-config.ts +++ b/packages/next/build/webpack-config.ts @@ -897,7 +897,7 @@ export default async function getBaseWebpackConfig( hasSupportCss: !!config.experimental.css, hasSupportScss: !!config.experimental.scss, assetPrefix: config.assetPrefix || '', - scssIncludePaths: config.experimental.scssIncludePaths, + sassOptions: config.experimental.sassOptions, }) if (typeof config.webpack === 'function') { diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/packages/next/build/webpack/config/blocks/css/index.ts index 107f04ea95b9f..85989207bffb7 100644 --- a/packages/next/build/webpack/config/blocks/css/index.ts +++ b/packages/next/build/webpack/config/blocks/css/index.ts @@ -34,10 +34,6 @@ export const css = curry(async function css( return config } - const sassOptions = { - includePaths: ctx.scssIncludePaths, - } - const sassPreprocessors: webpack.RuleSetUseItem[] = [ // First, process files with `sass-loader`: this inlines content, and // compiles away the proprietary syntax. @@ -47,7 +43,7 @@ export const css = curry(async function css( // Source maps are required so that `resolve-url-loader` can locate // files original to their source directory. sourceMap: true, - sassOptions, + sassOptions: ctx.sassOptions, }, }, // Then, `sass-loader` will have passed-through CSS imports as-is instead diff --git a/packages/next/build/webpack/config/index.ts b/packages/next/build/webpack/config/index.ts index 114e8f20ba768..914b8f47e745e 100644 --- a/packages/next/build/webpack/config/index.ts +++ b/packages/next/build/webpack/config/index.ts @@ -13,7 +13,7 @@ export async function build( hasSupportCss, hasSupportScss, assetPrefix, - scssIncludePaths, + sassOptions, }: { rootDirectory: string customAppFile: string | null @@ -22,7 +22,7 @@ export async function build( hasSupportCss: boolean hasSupportScss: boolean assetPrefix: string - scssIncludePaths: string[] + sassOptions: any } ): Promise { const ctx: ConfigurationContext = { @@ -37,7 +37,7 @@ export async function build( ? assetPrefix.slice(0, -1) : assetPrefix : '', - scssIncludePaths, + sassOptions, } const fn = pipe(base(ctx), css(hasSupportCss, hasSupportScss, ctx)) diff --git a/packages/next/build/webpack/config/utils.ts b/packages/next/build/webpack/config/utils.ts index 9686587863517..757ee4bc9b7b3 100644 --- a/packages/next/build/webpack/config/utils.ts +++ b/packages/next/build/webpack/config/utils.ts @@ -12,7 +12,7 @@ export type ConfigurationContext = { assetPrefix: string - scssIncludePaths: string[] + sassOptions: any } export type ConfigurationFn = ( diff --git a/packages/next/next-server/server/config.ts b/packages/next/next-server/server/config.ts index ba00ccdfa54c3..2535ec0ac8e97 100644 --- a/packages/next/next-server/server/config.ts +++ b/packages/next/next-server/server/config.ts @@ -52,7 +52,7 @@ const defaultConfig: { [key: string]: any } = { reactMode: 'legacy', workerThreads: false, basePath: '', - scssIncludePaths: [], + sassOptions: {}, }, future: { excludeDefaultMomentLocales: false, diff --git a/test/integration/scss-fixtures/basic-module-include-paths/next.config.js b/test/integration/scss-fixtures/basic-module-include-paths/next.config.js index 235ad7e248bf5..e8abbc26eb6c5 100644 --- a/test/integration/scss-fixtures/basic-module-include-paths/next.config.js +++ b/test/integration/scss-fixtures/basic-module-include-paths/next.config.js @@ -2,6 +2,8 @@ const path = require('path') module.exports = { experimental: { - scssIncludePaths: [path.join(__dirname, 'styles')], + sassOptions: { + includePaths: [path.join(__dirname, 'styles')], + }, }, }