Skip to content
This repository was archived by the owner on Oct 30, 2020. It is now read-only.
This repository was archived by the owner on Oct 30, 2020. It is now read-only.

make typings-for-css-modules-loader compatible with css-loader >= 1.0.0 + webpack 4 #77

Open
Open
make typings-for-css-modules-loader compatible with css-loader >= 1.0.0 + webpack 4#77
@piscis

Description

@piscis
piscis
opened on Nov 12, 2018

I'm trying to integrate typings-for-css-modules-loader into a webpack 4 build together with sass-loader. I noticed that my build works with css-loader but of course no typings get generated.

How ever when I replace css-loader with typings-for-css-modules-loader typings get generated but I end up with errors down the line in style-loader that my sass files are invalid. (see below)

Here are my storybook 4 webpack configs:

working webpack config:

const pluginConf = [
  {
    loader: MiniCssExtractPlugin.loader,
  },
  {
    loader: 'css-loader',
    options: {
      sourceMap: true,
      root: path.resolve(__dirname, '..', 'src'),
    }
  },
  {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [
        autoprefixer({
          'browsers': ['last 2 versions', 'ie >= 10'],
        }),
      ],
      sourceMap: true,
    },
  },
  {
    loader: 'resolve-url-loader'
  },
  {
      loader: "sass-loader",
      options:
      {
          sourceMap: true,
          modules: true,
          importLoaders: 1,
          localIdentName: '[name]__[local]___[hash:base64:20]'
      }
  }
];

// .....

defaultConfig.module.rules.push({
    test: /\.(sa|sc|c)ss$/,
    use: pluginConf,
    include: path.resolve(__dirname, "../src/app"),
    exclude: [
      path.resolve(__dirname, "../node_modules")
	]
});

none working webpack config:

const pluginConf = [
  {
    loader: MiniCssExtractPlugin.loader,
  },
  {
    loader: 'typings-for-css-modules-loader',
    options:
    {
        importLoaders: 1,
        modules: true,
        namedExport: true,
        camelCase: true,
        sourceMap: true,
        localIdentName: '[name]_[local][hash:base64:5]',
        banner: "// *** Generated File - Do not Edit ***"
    }
  },
  {
    loader: 'postcss-loader',
    options: {
      ident: 'postcss',
      plugins: () => [
        autoprefixer({
          'browsers': ['last 2 versions', 'ie >= 10'],
        }),
      ],
      sourceMap: true,
    },
  },
  {
    loader: 'resolve-url-loader'
  },
  {
      loader: "sass-loader",
      options:
      {
          sourceMap: true,
          modules: true,
          importLoaders: 1,
          localIdentName: '[name]__[local]___[hash:base64:20]'
      }
  }
];

// .....

defaultConfig.module.rules.push({
    test: /\.(sa|sc|c)ss$/,
    use: pluginConf,
    include: path.resolve(__dirname, "../src/app"),
    exclude: [
      path.resolve(__dirname, "../node_modules")
     ]
});

**Stacktrace: (and many more) **

ERROR in ./src/app/components/Base/Headline/styles.sass (./node_modules/css-loader??ref--10-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js!./node_modules/mini-css-extract-plugin/dist/loader.js!./node_modules/typings-for-css-modules-loader/lib??ref--12-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js??ref--12-4!./src/app/components/Base/Headline/styles.sass)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

  text-transform: uppercase
              ^
      Invalid CSS after "module.exports": expected selector, was '= {"headline":"styl'
      in /path/to/project/src/app/components/Base/Headline/styles.sass (line 2, column 16)
 @ ./src/app/components/Base/Headline/styles.sass 2:14-554 21:1-42:3 22:19-559
 @ ./src/app/components/Base/Headline/index.tsx
 @ ./src/app/components/Base/index.ts
 @ ./src/app/stories/Base/Headline.stories.tsx
 @ ./src/app/stories sync \.stories\.(js|tsx|ts|jsx)$
 @ ./.storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/config/polyfills.js ./node_modules/@storybook/core/dist/server/config/globals.js ./.storybook/config.js ./node_modules/webpack-hot-middleware/client.js?reload=true

I noticed that starting with css-loader 1.x are some breaking changes.
for example:

  • remove minimize option, use postcss-loader with cssnano or use optimize-cssnano-plugin plugin
  • remove module option, use modules option instead
  • remove camelcase option, use camelCase option instead
  • remove root option, use postcss-loader with postcss-url plugin
  • remove alias option, use resolve.alias feature or use postcss-loader with postcss-url plugin
  • update postcss to 6 version
  • minimum require nodejs version is 6.9
  • minimum require webpack version is 4

package.json

{
  "name": "the-project-name",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "@material-ui/core": "^3.4.0",
    "@material-ui/icons": "^3.0.1",
    "async": "^2.6.1",
    "axios": "^0.18.0",
    "babel-polyfill": "^6.26.0",
    "chroma-js": "^1.4.0",
    "classnames": "^2.2.6",
    "core-js": "^2.5.7",
    "formik": "^1.2.0",
    "global": "^4.3.2",
    "immutable": "^3.8.2",
    "lodash": "^4.17.11",
    "material-design-icons": "^3.0.1",
    "mobx": "^5.6.0",
    "mobx-react": "^5.3.6",
    "mobx-state-tree": "^3.7.1",
    "raf": "^3.4.1",
    "react": "^16.6.1",
    "react-dom": "^16.6.1",
    "react-resize-detector": "^3.2.0",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-select": "^2.1.1",
    "spinkit": "^1.2.5",
    "yup": "^0.26.6"
  },
  "devDependencies": {
    "@babel/core": "7.1.0",
    "@svgr/webpack": "2.4.1",
    "@types/jest": "23.3.9",
    "@types/node": "10.12.5",
    "@types/react": "16.7.3",
    "@types/react-dom": "16.0.9",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "9.0.0",
    "babel-jest": "23.6.0",
    "babel-loader": "8.0.4",
    "babel-plugin-named-asset-import": "^0.2.3",
    "babel-preset-react-app": "^6.1.0",
    "bfj": "6.1.1",
    "case-sensitive-paths-webpack-plugin": "2.1.2",
    "chalk": "2.4.1",
    "css-loader": "1.0.0",
    "dotenv": "6.0.0",
    "dotenv-expand": "4.2.0",
    "eslint": "5.6.0",
    "eslint-config-react-app": "^3.0.5",
    "eslint-loader": "2.1.1",
    "eslint-plugin-flowtype": "2.50.1",
    "eslint-plugin-import": "2.14.0",
    "eslint-plugin-jsx-a11y": "6.1.2",
    "eslint-plugin-react": "7.11.1",
    "file-loader": "2.0.0",
    "fork-ts-checker-webpack-plugin-alt": "0.4.14",
    "fs-extra": "7.0.0",
    "html-webpack-plugin": "4.0.0-alpha.2",
    "identity-obj-proxy": "3.0.0",
    "jest": "23.6.0",
    "jest-pnp-resolver": "1.0.1",
    "jest-resolve": "23.6.0",
    "mini-css-extract-plugin": "0.4.3",
    "optimize-css-assets-webpack-plugin": "5.0.1",
    "pnp-webpack-plugin": "1.1.0",
    "postcss-flexbugs-fixes": "4.1.0",
    "postcss-loader": "3.0.0",
    "postcss-preset-env": "6.0.6",
    "postcss-safe-parser": "4.0.1",
    "react": "^16.6.1",
    "react-app-polyfill": "^0.1.3",
    "react-dev-utils": "^6.1.1",
    "react-dom": "^16.6.1",
    "resolve": "1.8.1",
    "sass-loader": "7.1.0",
    "style-loader": "0.23.0",
    "terser-webpack-plugin": "1.1.0",
    "typescript": "3.1.6",
    "url-loader": "1.1.1",
    "webpack": "4.19.1",
    "webpack-dev-server": "3.1.9",
    "webpack-manifest-plugin": "2.0.4",
    "workbox-webpack-plugin": "3.6.3",
    "@babel/polyfill": "^7.0.0",
    "@storybook/addon-a11y": "^4.0.4",
    "@storybook/addon-actions": "^4.0.4",
    "@storybook/addon-backgrounds": "^4.0.4",
    "@storybook/addon-centered": "^4.0.4",
    "@storybook/addon-events": "^4.0.4",
    "@storybook/addon-info": "^4.0.4",
    "@storybook/addon-jest": "^4.0.4",
    "@storybook/addon-knobs": "^4.0.4",
    "@storybook/addon-links": "^4.0.4",
    "@storybook/addon-notes": "^4.0.4",
    "@storybook/addon-options": "^4.0.4",
    "@storybook/addon-storyshots": "^4.0.4",
    "@storybook/addon-viewport": "^4.0.4",
    "@storybook/addons": "^4.0.4",
    "@storybook/client-logger": "^4.0.4",
    "@storybook/react": "^4.0.4",
    "@types/async": "^2.0.50",
    "@types/classnames": "^2.2.6",
    "@types/enzyme": "^3.1.15",
    "@types/lodash": "^4.14.118",
    "@types/react-resize-detector": "^3.1.0",
    "@types/react-router": "^4.4.1",
    "@types/react-router-dom": "^4.3.1",
    "@types/react-select": "^2.0.6",
    "@types/react-swipeable": "^4.2.1",
    "@types/react-test-renderer": "^16.0.3",
    "@types/storybook__react": "^4.0.0",
    "@types/yup": "^0.26.1",
    "autoprefixer": "^9.3.1",
    "awesome-typescript-loader": "^5.2.1",
    "axios-mock-adapter": "^1.15.0",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-jest": "^23.2.0",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "babel-runtime": "^6.26.0",
    "cache-loader": "^1.2.5",
    "canvas": "^2.1.0",
    "deploy-to-git": "^0.1.5",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.7.0",
    "enzyme-to-json": "^3.3.4",
    "http-parser-js": "^0.5.0",
    "http-proxy-middleware": "^0.19.0",
    "imports-loader": "^0.8.0",
    "install": "^0.12.2",
    "node-sass": "^4.10.0",
    "normalize.css": "^8.0.1",
    "npm": "^6.4.1",
    "npm-check": "^5.9.0",
    "object-assign": "4.1.1",
    "promise": "^8.0.2",
    "react-scripts": "^2.1.1",
    "react-scripts-ts": "^4.0.8",
    "react-test-renderer": "^16.6.1",
    "resolve-url-loader": "^3.0.0",
    "rimraf": "^2.6.2",
    "source-map-explorer": "^1.5.0",
    "source-map-loader": "^0.2.1",
    "sw-precache-webpack-plugin": "^0.11.5",
    "thread-loader": "^1.2.0",
    "ts-jest": "^23.10.4",
    "ts-loader": "^5.3.0",
    "tslint": "^5.11.0",
    "tslint-config-prettier": "^1.10.0",
    "tslint-react": "^3.6.0",
    "typescript-babel-jest": "^1.0.5",
    "typings-for-css-modules-loader": "^1.7.0",
    "whatwg-fetch": "^3.0.0",
    "worker-loader": "^2.0.0"
  }
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions