From c8141b3862d530a4bef819a6f21270aca0d84b6c Mon Sep 17 00:00:00 2001 From: Daniil Samoylov Date: Mon, 16 Sep 2019 22:34:47 +1200 Subject: [PATCH 1/4] Add required `modules` option for `css-loader` to examples --- README.md | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 5d1cbcb..8f6bef6 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,10 @@ module.exports = { use: [ "style-loader", "@teamsupercell/typings-for-css-modules-loader", - "css-loader" + { + loader: "css-loader", + options: { modules: true } + } ] } ] @@ -59,7 +62,10 @@ module.exports = { "// autogenerated by typings-for-css-modules-loader. \n// Please do not change this file!" } }, - "css-loader" + { + loader: "css-loader", + options: { modules: true } + } ] } ] @@ -84,7 +90,10 @@ module.exports = { formatter: "prettier" } }, - "css-loader" + { + loader: "css-loader", + options: { modules: true } + } ] } ] @@ -110,7 +119,10 @@ module.exports = { eol: "\r\n" } }, - "css-loader" + { + loader: "css-loader", + options: { modules: true } + } ] } ] From 0c03f83b2bc20e06f6c8c14d804dd05ca69aa2c5 Mon Sep 17 00:00:00 2001 From: Daniil Samoylov Date: Mon, 16 Sep 2019 22:44:25 +1200 Subject: [PATCH 2/4] Add instructions upgrading from v1 to the readme --- README.md | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/README.md b/README.md index 8f6bef6..cfb885c 100644 --- a/README.md +++ b/README.md @@ -179,6 +179,47 @@ console.log(locals.someOtherClass); ![typed-css-modules](https://cloud.githubusercontent.com/assets/749171/16340497/c1cb6888-3a28-11e6-919b-f2f51a282bba.gif) +## Upgrade from v1: +- Update webpack config + - This package no longer replaces `css-loader`, but it has to be added alongside `css-loader`: + - `css-loader` is no longer a peer dependency due to the change above + - `css-loader` will need to be configured to output CSS Modules (e.g. `options: { modules: true; }`) +```diff +module.exports = { + module: { + rules: [ + { + test: /\.css$/i, + use: [ + "style-loader", + { + loader: "@teamsupercell/typings-for-css-modules-loader", + options: { + // pass all the options for `css-loader` to `css-loader`, eg. +- namedExport: true, +- modules: true + } + }, ++ { ++ loader: "css-loader", ++ options: { ++ namedExport: true, ++ modules: true ++ } ++ }, + ] + } + ] + } +}; +``` +- Ensure all the typescript files import styles as default +```diff +- import * as styles from './styles.css'; ++ import styles from './styles.css'; +``` +- Add `allowSyntheticDefaultImports` TypeScript compiler option if there are type errors related to default imports + ## Support As the loader just acts as an intermediary it can handle all kind of css preprocessors (`sass`, `scss`, `stylus`, `less`, ...). From 3ab05e0322479edb14303b5d8ed0ae25bf3f2e5f Mon Sep 17 00:00:00 2001 From: Daniil Samoylov Date: Mon, 16 Sep 2019 22:59:05 +1200 Subject: [PATCH 3/4] Remove `css-loader` from peer dependencies --- package.json | 3 --- 1 file changed, 3 deletions(-) diff --git a/package.json b/package.json index 7179485..2bff3ef 100644 --- a/package.json +++ b/package.json @@ -34,9 +34,6 @@ "typescript": "^3.5.3", "webpack": "^4.39.1" }, - "peerDependencies": { - "css-loader": ">=0.28.11" - }, "optionalDependencies": { "prettier": "*" }, From c68422176447d10eb772534ef7ecb20119e2a02d Mon Sep 17 00:00:00 2001 From: Daniil Samoylov Date: Tue, 17 Sep 2019 20:20:59 +1200 Subject: [PATCH 4/4] Remove namedExport options since it's invalid in css-loader 3.0 --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index cfb885c..af17630 100644 --- a/README.md +++ b/README.md @@ -203,7 +203,6 @@ module.exports = { + { + loader: "css-loader", + options: { -+ namedExport: true, + modules: true + } + },