Skip to content

Commit

Permalink
feat(react): add support for css modules (nrwl#2349)
Browse files Browse the repository at this point in the history 
Closes nrwl#1744
  • Loading branch information
@jaysoo
jaysoo committed Jan 20, 2020
1 parent f7590cd commit 1132d9e
Show file tree
Hide file tree
Showing 7 changed files with 106 additions and 14 deletions.
2 changes: 2 additions & 0 deletions e2e/utils.ts
View file
Expand Up @@ -274,6 +274,8 @@ export function copyMissingPackages(): void {
'istanbul-instrumenter-loader',
'semver',

'css-loader',
'css-modules-typescript-loader',
'mime',
'less',
'send',
Expand Down
22 changes: 22 additions & 0 deletions e2e/web.test.ts
View file
Expand Up @@ -98,5 +98,27 @@ forEachCli(currentCLIName => {
expect(e2eResults).toContain('All specs passed!');
}
});

it('should support CSS modules', () => {
ensureProject();
const appName = uniq('app');

runCLI(`generate @nrwl/web:app ${appName} --no-interactive`);
updateFile(
`apps/${appName}/src/app/app.module.css`,
'.foo { color: red; }'
);
const mainPath = `apps/${appName}/src/app/app.element.ts`;
const content = readFile(mainPath);
updateFile(
mainPath,
`import styles from './app.module.css';\n${content}`
);

if (supportUi()) {
const e2eResults = runCLI(`e2e ${appName}-e2e`);
expect(e2eResults).toContain('All specs passed!');
}
});
});
});
2 changes: 2 additions & 0 deletions package.json
View file
Expand Up @@ -114,6 +114,8 @@
"copy-webpack-plugin": "5.1.1",
"core-js": "^2.6.9",
"cosmiconfig": "^4.0.0",
"css-loader": "3.4.2",
"css-modules-typescript-loader": "4.0.0",
"cypress": "3.4.1",
"cz-conventional-changelog": "^3.0.2",
"cz-customizable": "^6.2.0",
Expand Down
4 changes: 3 additions & 1 deletion packages/web/package.json
View file
Expand Up @@ -61,6 +61,8 @@
"clean-css": "4.2.1",
"copy-webpack-plugin": "5.1.1",
"core-js": "^3.2.1",
"css-loader": "3.4.2",
"css-modules-typescript-loader": "4.0.0",
"file-loader": "4.2.0",
"find-cache-dir": "3.0.0",
"fork-ts-checker-webpack-plugin": "^3.1.1",
Expand Down Expand Up @@ -107,7 +109,7 @@
"terser-webpack-plugin": "2.3.1",
"ts-loader": "5.4.5",
"tsconfig-paths-webpack-plugin": "3.2.0",
"webpack": "4.39.2",
"webpack": "4.41.2",
"webpack-dev-middleware": "3.7.0",
"webpack-merge": "4.2.1",
"webpack-sources": "1.4.3",
Expand Down
12 changes: 0 additions & 12 deletions packages/web/src/utils/web.config.spec.ts
View file
Expand Up @@ -61,18 +61,6 @@ describe('getWebConfig', () => {
expect(result.resolve.mainFields).toContain('browser');
});

it('should use the style-loader to load styles', () => {
const result = getWebPartial(root, sourceRoot, input, logger, false, false);
expect(
result.module.rules.find(rule => rule.test.test('styles.css')).use[0]
.loader
).toEqual('style-loader');
expect(
result.module.rules.find(rule => rule.test.test('styles.scss')).use[0]
.loader
).toEqual('style-loader');
});

describe('without differential loading', () => {
describe('polyfills', () => {
it('should set the polyfills entry', () => {
Expand Down
24 changes: 23 additions & 1 deletion packages/web/src/utils/web.config.ts
View file
Expand Up @@ -106,7 +106,7 @@ function getCommonPartial(wco: any): Configuration {

function getStylesPartial(wco: any): Configuration {
const partial = getStylesConfig(wco);
partial.module.rules = partial.module.rules.map(rule => {
const rules = partial.module.rules.map(rule => {
if (!Array.isArray(rule.use)) {
return rule;
}
Expand All @@ -123,6 +123,28 @@ function getStylesPartial(wco: any): Configuration {
});
return rule;
});
partial.module.rules = [
{
test: /\.css$|\.scss$|\.sass$|\.less$|\.styl$/,
oneOf: [
{
test: /\.module\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-modules-typescript-loader' },
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1
}
}
]
},
...rules
]
}
];
return partial;
}

Expand Down
54 changes: 54 additions & 0 deletions yarn.lock
View file
Expand Up @@ -8257,6 +8257,24 @@ css-loader@3.2.0, css-loader@^3.0.0:
postcss-value-parser "^4.0.0"
schema-utils "^2.0.0"

css-loader@3.4.2:
version "3.4.2"
resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-3.4.2.tgz#d3fdb3358b43f233b78501c5ed7b1c6da6133202"
integrity sha512-jYq4zdZT0oS0Iykt+fqnzVLRIeiPWhka+7BqPn+oSIpWJAHak5tmB/WZrJ2a21JhCeFyNnnlroSl8c+MtVndzA==
dependencies:
camelcase "^5.3.1"
cssesc "^3.0.0"
icss-utils "^4.1.1"
loader-utils "^1.2.3"
normalize-path "^3.0.0"
postcss "^7.0.23"
postcss-modules-extract-imports "^2.0.0"
postcss-modules-local-by-default "^3.0.2"
postcss-modules-scope "^2.1.1"
postcss-modules-values "^3.0.0"
postcss-value-parser "^4.0.2"
schema-utils "^2.6.0"

css-modules-loader-core@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz#5908668294a1becd261ae0a4ce21b0b551f21d16"
Expand All @@ -8269,6 +8287,14 @@ css-modules-loader-core@^1.1.0:
postcss-modules-scope "1.1.0"
postcss-modules-values "1.3.0"

css-modules-typescript-loader@4.0.0:
version "4.0.0"
resolved "https://registry.yarnpkg.com/css-modules-typescript-loader/-/css-modules-typescript-loader-4.0.0.tgz#17c0924107f45c7d9998fb59be5c59d6398aac5c"
integrity sha512-K6ii0+kt2i3sHN+VKTWdF728x+N4PFitsjE8aldUO+N98XlZhanJYIEZrnh4FMTZzDvOjyBialU0LnkCSeeUig==
dependencies:
line-diff "^2.0.1"
loader-utils "^1.2.3"

css-parse@1.7.x:
version "1.7.0"
resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-1.7.0.tgz#321f6cf73782a6ff751111390fc05e2c657d8c9b"
Expand Down Expand Up @@ -13515,6 +13541,11 @@ less@^3.8.0:
request "^2.83.0"
source-map "~0.6.0"

levdist@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/levdist/-/levdist-1.0.0.tgz#91d7a3044964f2ccc421a0477cac827fe75c5718"
integrity sha1-kdejBElk8szEIaBHfKyCf+dcVxg=

leven@^3.1.0:
version "3.1.0"
resolved "https://registry.yarnpkg.com/leven/-/leven-3.1.0.tgz#77891de834064cccba82ae7842bb6b14a13ed7f2"
Expand Down Expand Up @@ -13548,6 +13579,13 @@ lightercollective@^0.3.0:
resolved "https://registry.yarnpkg.com/lightercollective/-/lightercollective-0.3.0.tgz#1f07638642ec645d70bdb69ab2777676f35a28f0"
integrity sha512-RFOLSUVvwdK3xA0P8o6G7QGXLIyy1L2qv5caEI7zXN5ciaEjbAriRF182kbsoJ1S1TgvpyGcN485fMky6qxOPw==

line-diff@^2.0.1:
version "2.1.0"
resolved "https://registry.yarnpkg.com/line-diff/-/line-diff-2.1.0.tgz#4c407100471b4ebe1617bf37e877554a67abaa08"
integrity sha512-EciuZHwQfFG5ITBdIjN+zyJtcJXRVgbDSxtv6sz8BBf16rw4iGRO28AwIDVlNSoKlpDzp1UzRti54j3wBlU9Fw==
dependencies:
levdist "^1.0.0"

lines-and-columns@^1.1.6:
version "1.1.6"
resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
Expand Down Expand Up @@ -16330,6 +16368,14 @@ postcss-modules-scope@^2.1.0:
postcss "^7.0.6"
postcss-selector-parser "^6.0.0"

postcss-modules-scope@^2.1.1:
version "2.1.1"
resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.1.1.tgz#33d4fc946602eb5e9355c4165d68a10727689dba"
integrity sha512-OXRUPecnHCg8b9xWvldG/jUpRIGPNRka0r4D4j0ESUU2/5IOnpsjfPPmDprM3Ih8CgZ8FXjWqaniK5v4rWt3oQ==
dependencies:
postcss "^7.0.6"
postcss-selector-parser "^6.0.0"

postcss-modules-values@1.3.0, postcss-modules-values@^1.3.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
Expand Down Expand Up @@ -18439,6 +18485,14 @@ schema-utils@^2.4.1:
ajv "^6.10.2"
ajv-keywords "^3.4.1"

schema-utils@^2.6.0:
version "2.6.4"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.4.tgz#a27efbf6e4e78689d91872ee3ccfa57d7bdd0f53"
integrity sha512-VNjcaUxVnEeun6B2fiiUDjXXBtD4ZSH7pdbfIu1pOFwgptDPLMo/z9jr4sUfsjFVPqDCEin/F7IYlq7/E6yDbQ==
dependencies:
ajv "^6.10.2"
ajv-keywords "^3.4.1"

schema-utils@^2.6.1:
version "2.6.1"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.1.tgz#eb78f0b945c7bcfa2082b3565e8db3548011dc4f"
Expand Down

0 comments on commit 1132d9e

Please sign in to comment.