From dbc3eb52e10fd9091d0082872e7fbfa40256e2c3 Mon Sep 17 00:00:00 2001 From: Erik Munson Date: Thu, 21 Nov 2019 16:47:03 -0800 Subject: [PATCH] feat(core): add support for CSS modules to dev server + lib build (#7650) --- .gitignore | 1 + app/scripts/modules/core/package.json | 3 +- app/scripts/modules/core/webpack.config.js | 15 +++ package.json | 2 + webpack.config.js | 16 +++ yarn.lock | 129 ++++++++++++++++++++- 6 files changed, 163 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index e8407ca3f0a..2c8bf9d659d 100644 --- a/.gitignore +++ b/.gitignore @@ -33,6 +33,7 @@ lib/ transpiled/ app/scripts/modules/core/src/styleguide/public/ yarn-error.log +*.css.d.ts # Test Results test-results.xml diff --git a/app/scripts/modules/core/package.json b/app/scripts/modules/core/package.json index bf14ee6657b..e397721b52f 100644 --- a/app/scripts/modules/core/package.json +++ b/app/scripts/modules/core/package.json @@ -5,7 +5,8 @@ "typings": "lib/index.d.ts", "scripts": { "clean": "../../../../node_modules/rimraf/bin.js lib", - "lib": "npm run clean && ../../../../node_modules/typescript/bin/tsc && node ../../../../node_modules/webpack/bin/webpack.js", + "lib": "npm run clean && npm run css-types && ../../../../node_modules/typescript/bin/tsc && node ../../../../node_modules/webpack/bin/webpack.js", + "css-types": "../../../../node_modules/typed-css-modules/lib/cli.js --p **/*.module.css src", "prepublishOnly": "npm run lib" } } diff --git a/app/scripts/modules/core/webpack.config.js b/app/scripts/modules/core/webpack.config.js index 461381b466b..4d22b011e04 100644 --- a/app/scripts/modules/core/webpack.config.js +++ b/app/scripts/modules/core/webpack.config.js @@ -91,8 +91,23 @@ module.exports = { }, { test: /\.css$/, + exclude: /\.module\.css$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }], }, + { + test: /\.module\.css$/i, + use: [ + { loader: 'style-loader' }, + { + loader: 'css-loader', + options: { + modules: true, + localIdentName: '[name]__[local]--[hash:base64:8]', + }, + }, + { loader: 'postcss-loader' }, + ], + }, { test: /\.html$/, exclude: exclusionPattern, diff --git a/package.json b/package.json index 1fcb6412f6d..b76b4da0679 100644 --- a/package.json +++ b/package.json @@ -196,6 +196,8 @@ "tslint-eslint-rules": "^5.3.1", "tslint-loader": "^3.6.0", "tslint-react": "^3.6.0", + "typed-css-modules": "^0.6.3", + "typed-css-modules-loader": "^0.0.18", "typescript": "~3.4.0", "url-loader": "1.1.2", "wait-on": "^3.2.0", diff --git a/webpack.config.js b/webpack.config.js index 29cd635b0d6..1924213a515 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -144,8 +144,24 @@ function configure(env, webpackOpts) { }, { test: /\.css$/, + exclude: /\.module\.css$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }], }, + { + test: /\.module\.css$/i, + use: [ + { loader: 'style-loader' }, + { + loader: 'css-loader', + options: { + modules: true, + localIdentName: '[name]__[local]--[hash:base64:8]', + }, + }, + { loader: 'typed-css-modules-loader' }, + { loader: 'postcss-loader' }, + ], + }, { test: /\.html$/, use: [{ loader: 'ngtemplate-loader?relativeTo=' + path.resolve(__dirname) + '/' }, { loader: 'html-loader' }], diff --git a/yarn.lock b/yarn.lock index dc2fc64a617..1787466f8f7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -152,6 +152,13 @@ resolved "https://registry.yarnpkg.com/@types/commonmark/-/commonmark-0.27.0.tgz#48e68555bc9d17a6901f3741f4f01a990e3e3d35" integrity sha512-YXJ3f7C6epX698cV4pzqW1K11gzlQGrOqw/8CHTTzirpKmxgP0/afzczicOs9PV0ae11VCoRe7yJ21l/g1PQYA== +"@types/css-modules-loader-core@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@types/css-modules-loader-core/-/css-modules-loader-core-1.1.0.tgz#67af15aa16603ac2ffc1d3a7f08547ac809c3005" + integrity sha512-LMbyf7THPqLCPHIXAj79v9Pa193MeOHgp1fBFRR6s6VvEVHUFIcM5bc/WttslOf+lao4TURNN1X1zfW5wr2CHQ== + dependencies: + postcss "7.x.x" + "@types/d3-array@*": version "1.2.0" resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-1.2.0.tgz#9b1fc3202fc1a9f7da0f2873bd38b443137a9d34" @@ -2608,6 +2615,11 @@ camelcase@^5.0.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.0.0.tgz#03295527d58bd3cd4aa75363f35b2e8d97be2f42" integrity sha512-faqwZqnWxbxn+F1d399ygeamQNy3lPp/H9H6rNrqYh4FSVCtcY+3cub1MxA8o9mDd55mM8Aghuu/kuyYA6VTsA== +camelcase@^5.3.1: + version "5.3.1" + resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320" + integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== + caniuse-api@^1.5.2: version "1.6.1" resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-1.6.1.tgz#b534e7c734c4f81ec5fbe8aca2ad24354b962c6c" @@ -2803,6 +2815,25 @@ chokidar@^2.0.4: optionalDependencies: fsevents "^1.2.7" +chokidar@^2.1.2: + version "2.1.8" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.1.8.tgz#804b3a7b6a99358c3c5c61e71d8728f041cff917" + integrity sha512-ZmZUazfOzf0Nve7duiCKD23PFSCs4JPoYyccjUFF3aQkQadqBhfzhjkwBH2mNOG9cTBwhamM37EIsIkZw3nRgg== + dependencies: + anymatch "^2.0.0" + async-each "^1.0.1" + braces "^2.3.2" + glob-parent "^3.1.0" + inherits "^2.0.3" + is-binary-path "^1.0.0" + is-glob "^4.0.0" + normalize-path "^3.0.0" + path-is-absolute "^1.0.0" + readdirp "^2.2.1" + upath "^1.1.1" + optionalDependencies: + fsevents "^1.2.7" + chownr@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.0.1.tgz#e2a75042a9551908bebd25b8523d5f9769d79181" @@ -3491,6 +3522,18 @@ css-loader@2.1.0: postcss-value-parser "^3.3.0" schema-utils "^1.0.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" + integrity sha1-WQhmgpShvs0mGuCkziGwtVHyHRY= + dependencies: + icss-replace-symbols "1.1.0" + postcss "6.0.1" + postcss-modules-extract-imports "1.1.0" + postcss-modules-local-by-default "1.2.0" + postcss-modules-scope "1.1.0" + postcss-modules-values "1.3.0" + css-parse@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-2.0.0.tgz#a468ee667c16d81ccf05c58c38d2a97c780dbfd4" @@ -6449,7 +6492,7 @@ iconv-lite@^0.4.24, iconv-lite@^0.4.5, iconv-lite@~0.4.13: dependencies: safer-buffer ">= 2.1.2 < 3" -icss-replace-symbols@^1.1.0: +icss-replace-symbols@1.1.0, icss-replace-symbols@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/icss-replace-symbols/-/icss-replace-symbols-1.1.0.tgz#06ea6f83679a7749e386cfe1fe812ae5db223ded" integrity sha1-Bupvg2ead0njhs/h/oEq5dsiPe0= @@ -7047,6 +7090,11 @@ is-symbol@^1.0.2: dependencies: has-symbols "^1.0.0" +is-there@^4.4.2: + version "4.4.4" + resolved "https://registry.yarnpkg.com/is-there/-/is-there-4.4.4.tgz#9bc1a093fe56d378be97b822eed763606ab4d337" + integrity sha512-WbEGbR5i/vSLJ/cc72kVCoM0RvKWmtmPpRXriNlhsredolym2aSTHZA02IzvDR5ewmwD0V6e9S3s9aHs6Ygw5A== + is-typedarray@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-typedarray/-/is-typedarray-1.0.0.tgz#e479c80858df0c1b11ddda6940f96011fcda4a9a" @@ -9488,6 +9536,13 @@ postcss-minify-selectors@^2.0.4: postcss "^5.0.14" postcss-selector-parser "^2.0.0" +postcss-modules-extract-imports@1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz#b614c9720be6816eaee35fb3a5faa1dba6a05ddb" + integrity sha1-thTJcgvmgW6u41+zpfqh26agXds= + dependencies: + postcss "^6.0.1" + postcss-modules-extract-imports@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz#818719a1ae1da325f9832446b01136eeb493cd7e" @@ -9495,6 +9550,14 @@ postcss-modules-extract-imports@^2.0.0: dependencies: postcss "^7.0.5" +postcss-modules-local-by-default@1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069" + integrity sha1-99gMOYxaOT+nlkRmvRlQCn1hwGk= + dependencies: + css-selector-tokenizer "^0.7.0" + postcss "^6.0.1" + postcss-modules-local-by-default@^2.0.3: version "2.0.5" resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-2.0.5.tgz#7f387f68f5555598068e4d6d1ea0b7d6fa984272" @@ -9504,6 +9567,14 @@ postcss-modules-local-by-default@^2.0.3: postcss "^7.0.6" postcss-value-parser "^3.3.1" +postcss-modules-scope@1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90" + integrity sha1-1upkmUx5+XtipytCb75gVqGUu5A= + dependencies: + css-selector-tokenizer "^0.7.0" + postcss "^6.0.1" + postcss-modules-scope@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-2.0.1.tgz#2c0f2394cde4cd09147db054c68917e38f6d43a4" @@ -9512,6 +9583,14 @@ postcss-modules-scope@^2.0.0: css-selector-tokenizer "^0.7.0" postcss "^7.0.6" +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" + integrity sha1-7P+p1+GSUYOJ9CrQ6D9yrsRW6iA= + dependencies: + icss-replace-symbols "^1.1.0" + postcss "^6.0.1" + postcss-modules-values@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-2.0.0.tgz#479b46dc0c5ca3dc7fa5270851836b9ec7152f64" @@ -9623,6 +9702,24 @@ postcss-zindex@^2.0.1: postcss "^5.0.4" uniqs "^2.0.0" +postcss@6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.1.tgz#000dbd1f8eef217aa368b9a212c5fc40b2a8f3f2" + integrity sha1-AA29H47vIXqjaLmiEsX8QLKo8/I= + dependencies: + chalk "^1.1.3" + source-map "^0.5.6" + supports-color "^3.2.3" + +postcss@7.x.x: + version "7.0.23" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.23.tgz#9f9759fad661b15964f3cfc3140f66f1e05eadc1" + integrity sha512-hOlMf3ouRIFXD+j2VJecwssTwbvsPGJVMzupptg+85WA+i7MwyrydmQAgY3R+m0Bc0exunhbJmijy8u8+vufuQ== + dependencies: + chalk "^2.4.2" + source-map "^0.6.1" + supports-color "^6.1.0" + postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.8, postcss@^5.2.16, postcss@^5.2.5: version "5.2.17" resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.17.tgz#cf4f597b864d65c8a492b2eabe9d706c879c388b" @@ -12345,6 +12442,29 @@ type-is@~1.6.15, type-is@~1.6.16: media-typer "0.3.0" mime-types "~2.1.18" +typed-css-modules-loader@^0.0.18: + version "0.0.18" + resolved "https://registry.yarnpkg.com/typed-css-modules-loader/-/typed-css-modules-loader-0.0.18.tgz#ee4e9b30f6819e19434b40e37064ae36f7679113" + integrity sha512-w7RK5CeycywiqsXIvmWN/vPEs6aSKs39bsfvqJDfRhpbzBbBu+Isat/Qm833S3z5nNHlkhRmVCDiwODQjS/Yxg== + dependencies: + loader-utils "^1.1.0" + typed-css-modules "^0.6.2" + +typed-css-modules@^0.6.2, typed-css-modules@^0.6.3: + version "0.6.3" + resolved "https://registry.yarnpkg.com/typed-css-modules/-/typed-css-modules-0.6.3.tgz#c539504d979022432fcea17dff1e264e702528b7" + integrity sha512-p1JYq628LZLxg6IFZEGwBF+rFbWMwz4AyplAsriyFWKDXdShQNAljrjt4qFO9GvvjmNdsuUMmiQji/MVZHu7JQ== + dependencies: + "@types/css-modules-loader-core" "^1.1.0" + camelcase "^5.3.1" + chalk "^2.1.0" + chokidar "^2.1.2" + css-modules-loader-core "^1.1.0" + glob "^7.1.2" + is-there "^4.4.2" + mkdirp "^0.5.1" + yargs "^12.0.5" + typed-styles@^0.0.7: version "0.0.7" resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9" @@ -12508,6 +12628,11 @@ upath@^1.0.0, upath@^1.0.5, upath@^1.1.0: resolved "https://registry.yarnpkg.com/upath/-/upath-1.1.0.tgz#35256597e46a581db4793d0ce47fa9aebfc9fabd" integrity sha512-bzpH/oBhoS/QI/YtbkqCg6VEiPYjSZtrHQM6/QnJS6OL9pKUFLqb3aFh4Scvwm45+7iAgiMkLhSbaZxUqmrprw== +upath@^1.1.1: + version "1.2.0" + resolved "https://registry.yarnpkg.com/upath/-/upath-1.2.0.tgz#8f66dbcd55a883acdae4408af8b035a5044c1894" + integrity sha512-aZwGpamFO61g3OlfT7OQCHqhGnW43ieH9WZeP7QxN/G/jS4jfqUkZxoryvJgVPEcrl5NL/ggHsSmLMHuH64Lhg== + upper-case@^1.1.1: version "1.1.3" resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598" @@ -13207,7 +13332,7 @@ yargs@12.0.2: y18n "^3.2.1 || ^4.0.0" yargs-parser "^10.1.0" -yargs@^12.0.4: +yargs@^12.0.4, yargs@^12.0.5: version "12.0.5" resolved "https://registry.yarnpkg.com/yargs/-/yargs-12.0.5.tgz#05f5997b609647b64f66b81e3b4b10a368e7ad13" integrity sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw==