fix(react): apply postcss config from apps to their lib dependencies (#…

…7265) Fixes #7040
nrwl · Oct 8, 2021 · a8bcd27 · a8bcd27
1 parent 4b9c00e
commit a8bcd27
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 40 deletions.
diff --git a/packages/react/plugins/storybook/index.ts b/packages/react/plugins/storybook/index.ts
@@ -74,7 +74,12 @@ export const webpack = async (
   // ESM build for modern browsers.
   const baseWebpackConfig = mergeWebpack([
     getBaseWebpackPartial(builderOptions, esm, isScriptOptimizeOn),
-    getStylesPartial(options.configDir, builderOptions, extractCss),
+    getStylesPartial(
+      options.workspaceRoot,
+      options.configDir,
+      builderOptions,
+      extractCss
+    ),
   ]);
 
   // run it through the React customizations

diff --git a/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts b/packages/storybook/src/executors/build-storybook/build-storybook.impl.ts
@@ -57,6 +57,7 @@ function storybookOptionMapper(
     ...builderOptions,
     mode: 'static',
     outputDir: builderOptions.outputPath,
+    workspaceRoot: context.root,
     configDir: storybookConfig,
     ...frameworkOptions,
     frameworkPresets: [...(frameworkOptions.frameworkPresets || [])],

diff --git a/packages/storybook/src/executors/storybook/storybook.impl.ts b/packages/storybook/src/executors/storybook/storybook.impl.ts
@@ -111,6 +111,7 @@ function storybookOptionMapper(
   const optionsWithFramework = {
     ...builderOptions,
     mode: 'dev',
+    workspaceRoot: context.root,
     configDir: storybookConfig,
     ...frameworkOptions,
     frameworkPresets: [...(frameworkOptions.frameworkPresets || [])],

diff --git a/packages/web/src/executors/build/build.impl.ts b/packages/web/src/executors/build/build.impl.ts
@@ -90,6 +90,7 @@ function getWebpackConfigs(
     // ESM build for modern browsers.
     getWebConfig(
       context.root,
+      projectRoot,
       sourceRoot,
       options,
       true,
@@ -100,6 +101,7 @@ function getWebpackConfigs(
     isScriptOptimizeOn && buildBrowserFeatures.isDifferentialLoadingNeeded()
       ? getWebConfig(
           context.root,
+          projectRoot,
           sourceRoot,
           options,
           false,

diff --git a/packages/web/src/executors/dev-server/dev-server.impl.ts b/packages/web/src/executors/dev-server/dev-server.impl.ts
@@ -46,14 +46,16 @@ export default async function* devServerExecutor(
   context: ExecutorContext
 ) {
   const { webpack } = require('../../webpack/entry');
-  const sourceRoot = context.workspace.projects[context.projectName].sourceRoot;
+  const { root: projectRoot, sourceRoot } =
+    context.workspace.projects[context.projectName];
   const buildOptions = normalizeWebBuildOptions(
     getBuildOptions(serveOptions, context),
     context.root,
     sourceRoot
   );
   let webpackConfig = getDevServerConfig(
     context.root,
+    projectRoot,
     sourceRoot,
     buildOptions,
     serveOptions

diff --git a/packages/web/src/utils/devserver.config.ts b/packages/web/src/utils/devserver.config.ts
@@ -13,21 +13,23 @@ import { OptimizationOptions } from './types';
 import { readFileSync } from 'fs-extra';
 
 export function getDevServerConfig(
-  root: string,
+  workspaceRoot: string,
+  projectRoot: string,
   sourceRoot: string,
   buildOptions: WebBuildBuilderOptions,
   serveOptions: WebDevServerOptions
 ) {
   const webpackConfig = getWebConfig(
-    root,
+    workspaceRoot,
+    projectRoot,
     sourceRoot,
     buildOptions,
     true, // Don't need to support legacy browsers for dev.
     false
   );
 
   (webpackConfig as any).devServer = getDevServerPartial(
-    root,
+    workspaceRoot,
     serveOptions,
     buildOptions
   );

diff --git a/packages/web/src/utils/third-party/cli-files/models/webpack-configs/common.ts b/packages/web/src/utils/third-party/cli-files/models/webpack-configs/common.ts
@@ -54,7 +54,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
   } = require('../../../../../webpack/entry');
   const { ContextReplacementPlugin, debug } = webpack;
 
-  const { root, projectRoot, buildOptions, tsConfig } = wco;
+  const { root, projectRoot, sourceRoot, buildOptions, tsConfig } = wco;
   const { styles: stylesOptimization, scripts: scriptsOptimization } =
     buildOptions.optimization;
   const {
@@ -226,7 +226,7 @@ export function getCommonConfig(wco: WebpackConfigOptions): Configuration {
           sourceMap: scriptsSourceMap,
           filename: `${path.basename(bundleName)}${hash}.js`,
           scripts: script.paths,
-          basePath: projectRoot,
+          basePath: sourceRoot,
         })
       );
     });

diff --git a/packages/web/src/utils/web.config.ts b/packages/web/src/utils/web.config.ts
@@ -2,7 +2,8 @@
 import { getBrowserConfig } from './third-party/cli-files/models/webpack-configs/browser';
 import { getCommonConfig } from './third-party/cli-files/models/webpack-configs/common';
 import { getStylesConfig } from './third-party/cli-files/models/webpack-configs/styles';
-import { basename, resolve, posix } from 'path';
+import * as path from 'path';
+import { basename, posix, resolve } from 'path';
 import { WebBuildBuilderOptions } from '../executors/build/build.impl';
 import { convertBuildOptions } from './normalize';
 import { readTsConfig } from '@nrwl/workspace/src/utilities/typescript';
@@ -12,15 +13,23 @@ import { IndexHtmlWebpackPlugin } from './third-party/cli-files/plugins/index-ht
 import { generateEntryPoints } from './third-party/cli-files/utilities/package-chunk-sort';
 import { ScriptTarget } from 'typescript';
 import { getHashDigest, interpolateName } from 'loader-utils';
-import postcssImports = require('postcss-import');
-import * as path from 'path';
 import { sassImplementation } from './sass';
+import postcssImports = require('postcss-import');
 
 // TODO(jack): Remove this in Nx 13
 type Configuration = any;
 
+// PostCSS options depend on the webpack loader, but we need to set the `config` path as a string due to this check:
+// https://github.com/webpack-contrib/postcss-loader/blob/0d342b1/src/utils.js#L36
+interface PostcssOptions {
+  (loader: any): any;
+
+  config?: string;
+}
+
 export function getWebConfig(
-  root,
+  workspaceRoot,
+  projectRoot,
   sourceRoot,
   options: WebBuildBuilderOptions,
   esm?: boolean,
@@ -40,8 +49,9 @@ export function getWebConfig(
     tsConfig.options.target = ScriptTarget.ES5;
   }
   const wco: any = {
-    root,
-    projectRoot: resolve(root, sourceRoot),
+    root: workspaceRoot,
+    projectRoot: resolve(workspaceRoot, projectRoot),
+    sourceRoot: resolve(workspaceRoot, sourceRoot),
     buildOptions: convertBuildOptions(options),
     esm,
     console,
@@ -62,7 +72,12 @@ export function getWebConfig(
       esm,
       isScriptOptimizeOn
     ),
-    getStylesPartial(wco.root, wco.buildOptions, options.extractCss),
+    getStylesPartial(
+      wco.root,
+      wco.projectRoot,
+      wco.buildOptions,
+      options.extractCss
+    ),
     getCommonPartial(wco),
     getBrowserPartial(wco, options, isScriptOptimizeOn),
   ]);
@@ -142,7 +157,8 @@ function getCommonPartial(wco: any): Configuration {
 }
 
 export function getStylesPartial(
-  root: string,
+  workspaceRoot: string,
+  projectRoot: string,
   options: any,
   extractCss: boolean
 ): Configuration {
@@ -154,11 +170,11 @@ export function getStylesPartial(
   if (options?.stylePreprocessorOptions?.includePaths?.length > 0) {
     options.stylePreprocessorOptions.includePaths.forEach(
       (includePath: string) =>
-        includePaths.push(path.resolve(root, includePath))
+        includePaths.push(path.resolve(workspaceRoot, includePath))
     );
   }
 
-  const partial = getStylesConfig(root, options, includePaths);
+  const partial = getStylesConfig(workspaceRoot, options, includePaths);
   const rules = partial.module.rules.map((rule) => {
     if (!Array.isArray(rule.use)) {
       return rule;
@@ -184,6 +200,29 @@ export function getStylesPartial(
     },
     importLoaders: 1,
   };
+  const postcssOptions: PostcssOptions = (loader) => ({
+    plugins: [
+      postcssImports({
+        addModulesDirectories: includePaths,
+        resolve: (url: string) => (url.startsWith('~') ? url.substr(1) : url),
+        load: (filename: string) => {
+          return new Promise<string>((resolve, reject) => {
+            loader.fs.readFile(filename, (err: Error, data: Buffer) => {
+              if (err) {
+                reject(err);
+
+                return;
+              }
+
+              const content = data.toString();
+              resolve(content);
+            });
+          });
+        },
+      }),
+    ],
+  });
+  postcssOptions.config = projectRoot;
 
   const commonLoaders = [
     {
@@ -199,29 +238,7 @@ export function getStylesPartial(
       loader: require.resolve('postcss-loader'),
       options: {
         implementation: require('postcss'),
-        postcssOptions: (loader) => ({
-          plugins: [
-            postcssImports({
-              addModulesDirectories: includePaths,
-              resolve: (url: string) =>
-                url.startsWith('~') ? url.substr(1) : url,
-              load: (filename: string) => {
-                return new Promise<string>((resolve, reject) => {
-                  loader.fs.readFile(filename, (err: Error, data: Buffer) => {
-                    if (err) {
-                      reject(err);
-
-                      return;
-                    }
-
-                    const content = data.toString();
-                    resolve(content);
-                  });
-                });
-              },
-            }),
-          ],
-        }),
+        postcssOptions: postcssOptions,
       },
     },
   ];