Skip to content

Commit

Permalink
feat(core): add support for CSS modules to dev server + lib build (#7650
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
Erik Munson committed Nov 22, 2019
1 parent 4b31104 commit dbc3eb5
Show file tree
Hide file tree
Showing 6 changed files with 163 additions and 3 deletions.
1 change: 1 addition & 0 deletions .gitignore
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ lib/
transpiled/
app/scripts/modules/core/src/styleguide/public/
yarn-error.log
*.css.d.ts

# Test Results
test-results.xml
Expand Down
3 changes: 2 additions & 1 deletion app/scripts/modules/core/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
15 changes: 15 additions & 0 deletions app/scripts/modules/core/webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
16 changes: 16 additions & 0 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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' }],
Expand Down
129 changes: 127 additions & 2 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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=
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -9488,13 +9536,28 @@ 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"
integrity sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==
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"
Expand All @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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==
Expand Down

0 comments on commit dbc3eb5

Please sign in to comment.