Module based and non-module based CSS preprocessors should be configured with the same options

[hbj]

Description

When working with React, module-based (e.g. .module.less) and non-module based (e.g. .less) CSS preprocessors use different options. If I take the example of LESS, we have the following differences:

• the build configuration option stylePreprocessorOptions only works with .less files
• to import files from node_modules we have to use the ~package/path/to/file format in .module.less and package/path/to/file (without ~) in .less files
• .less files are configured with support for JS (option javascriptEnabled: true) while .module.less aren't

The objective is to have both configurations use the same preprocessor options.

Motivation

This change would solve the following issues (non exhaustive list, these are things I faced):

• we have to use different import formats in the same project based on file type which is confusing
• module files don't support extending the include paths with stylePreprocessorOptions.includePaths
• in the case of LESS, we can't import libraries that use JS in module files
• we can't share code between module and non module files if it uses any of the incompatible options, e.g. imports files from node_modules

Concrete example

I use ant design in my React project and I want to be able to adapt its theme and use its LESS variables in my code, so I have the following setup (all files are under apps/my-app/src):

variables.less

@import 'antd/lib/style/themes/default.less';

@primary-color: green;

styles.less

@import './variables.less';

@import 'antd/lib/style/index.less';
@import 'antd/lib/style/components.less';

app/app.module.less

@import '../variables.less';

.app {
  color: @text-color; // ant design variable
}

This setup doesn't work for different reasons:

1. app/app.module.less imports variables.less which imports ant design files from node_modules but uses the non-tilde format, so it will fail (if I add the tilde then the styles.less file will fail to compile because it needs the non-tilde format) => so variables.less can't be imported by both types of files
2. the file antd/lib/style/themes/default.less imported by variables.less uses JS so it will fail to compile if we make the import in app/app.module.less work as module files don't support JS

I'm currently working around the issues with a custom webpack file:

const reactWebpack = require('@nrwl/react/plugins/webpack');
const { resolve } = require('path');

module.exports = (config) => {
  config = reactWebpack(config);

  const lessModulesLoader = config.module.rules[1].oneOf[2].use[2];

  lessModulesLoader.options = {
    javascriptEnabled: true,
    paths: [resolve(__dirname, 'node_modules')],
  };

  return config;
};

But it would be very helpful if we could just configure the preprocessors through stylePreprocessorOptions and have both module and non-module preprocessors behave the same.

Suggested Implementation

One possible implementation would be to have the web plugin (which is the base of the react plugin) use the stylePreprocessorOptions configuration option and prepare all preprocessor configurations accordingly, then the react plugin could get these configs and use them directly without modification.

Alternate Implementations

Another option would be to centralise all preprocessors configuration (module and non-module) in the web plugin and make them use the same options.

[jaysoo]

This will be fixed in the next Nx release (12.6).

[hbj]

@jaysoo this has been only partially fixed. Here are the outstanding issues:

• By default, module and non-module configs use different syntaxes for importing files from 'node_modules' (one needs a ~ at the start and the other not). I have to add "includePaths": ["node_modules"] to stylePreprocessorOptions to make both work without the ~.
• The non-module LESS configuration has the option javascriptEnabled set to true while it's not set for the module configuration.

It would really make sense to make both use the exact same options because it happens often that we import non-module files from module files, so they must work the same way otherwise importing would be impossible.

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.