CSS-Modules + Ant-design

[fede-rodes]

Hi Nathan,

I just started playing with CSS Modules, and was wondering if it's possible to use it along with ant-design (https://ant.design/). Ant is written in less, so not sure if this an issue... Below I copied my package.json, when I try to run my app using both CSS-Modules and ant design, it gets stuck at 'Processing fields with nathantried:css...' Any thoughts?

Thanks for your time and hard work :)

Here is my package.json

{
  "name": "fulbacho",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "lint": "eslint .",
    "pretest": "npm run lint --silent"
  },
  "dependencies": {
    "antd": "^2.6.0",
    "babel-runtime": "^6.20.0",
    "bcrypt": "^0.8.7",
    "classnames": "^2.2.5",
    "immutability-helper": "^2.0.0",
    "less": "^2.7.2",
    "meteor-node-stubs": "^0.2.3",
    "moment": "^2.17.0",
    "normalize.css": "^4.1.1",
    "react": "^15.3.2",
    "react-addons-css-transition-group": "^15.3.2",
    "react-addons-pure-render-mixin": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-mounter": "^1.2.0",
    "react-redux": "^5.0.2",
    "react-router": "^3.0.1",
    "react-spinjs": "^3.0.0",
    "react-tap-event-plugin": "^2.0.1",
    "react-toolbox": "^1.3.4",
    "react-waypoint": "^4.1.0",
    "redux": "^3.6.0",
    "redux-logger": "^2.7.4",
    "redux-thunk": "^2.2.0",
    "underscore": "^1.8.3"
  },
  "eslintConfig": {
    "plugins": [
      "meteor"
    ],
    "extends": [
      "airbnb",
      "plugin:meteor/recommended"
    ],
    "rules": {
      "max-len": 0,
      "import/no-unresolved": 0,
      "no-underscore-dangle": [
        "error",
        {
          "allow": [
            "_id",
            "_ensureIndex",
            "_verifyEmailToken",
            "_resetPasswordToken",
            "_name"
          ]
        }
      ]
    }
  },
  "devDependencies": {
    "autoprefixer": "^6.3.5",
    "babel-eslint": "^7.0.0",
    "babel-plugin-import": "^1.1.0",
    "babel-preset-stage-1": "^6.16.0",
    "deep-freeze": "0.0.1",
    "eslint": "^2.10.2",
    "eslint-config-airbnb": "^9.0.1",
    "eslint-plugin-import": "^1.8.0",
    "eslint-plugin-jsx-a11y": "^1.2.0",
    "eslint-plugin-meteor": "^3.5.2",
    "eslint-plugin-react": "^5.1.1",
    "expect": "^1.20.2",
    "node-sass": "^3.4.2",
    "postcss-reporter": "^1.3.3",
    "redux-devtools": "^3.3.2",
    "redux-devtools-dock-monitor": "^1.1.1",
    "redux-devtools-log-monitor": "^1.2.0",
    "stylelint": "^5.2.1"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {},
      "stylelint": {
        "rules": {
          "selector-class-pattern": "[a-z]+"
        }
      },
      "postcss-reporter": {
        "clearMessages": true
      }
    }
  },
  "cssModules": {
    "extensions": [
      "scss",
      "less",
      "css"
    ],
    "enableSassCompilation": ["scss"],
    "enableLessCompilation": ["less"],
    "passthroughPaths": [
      "node_modules/antd"
    ],
    "globalVariables": [],
    "ignorePaths": [
      "node_modules/node-sass/test",
      "node_modules/doiuse/test",
      "node_modules/css-tokenize/test",
      "node_modules/convert-source-map/test",
      "node_modules/less/test"
    ]
  }
}

[akanix42]

I think it should work (I don't see why not)... can you post a reproduction repo so I can take a look using your set up?

[fede-rodes]

Hey @nathantreid many thanks for your quick reply :)

Here is the repo: https://github.com/fede-rodes/css-modules-ant-design

you'll need to run: 'meteor --settings settings-dev.json' after installing the NPM dependencies. In my case, it get stuck processing the files :(

[akanix42]

I haven't yet looked into what exactly is causing the failures, but I was able to get the app running with the following ignore paths:

"ignorePaths": [
  "node_modules/.*/(examples|docs|test|tests)/",
  "node_modules/antd/lib/.*\\.less"
]

The first path expression deals with issues caused by a few of the react- packages including their docs, examples, tests, etc in the npm package. This has caused a lot of failures for a lot of people, so I'm considering making it a default setting; in this case it causes Meteor to crash (but you never got that far because the antd/lib folder caused my plugin to get stuck processing files. Note that if you use this expression you can remove the other ignore path expressions that you currently have.

I'll have to look into why the antd .less files are causing the endless processing.

[fede-rodes]

Awesome! I can go from there :)

I'll let you know if I get some improvements.

Thanks

[fede-rodes]

BTW: it's probably a good idea to ignore node modules by default, because it's pretty disconcerting when you get those error on the console. I remember that I tried the package 3 or 4 times before getting it to work due to those errors. So, I think that would be of great help for the package to be more widely used :)

[fede-rodes]

Hey @nathantreid,

I'm closing the issue since Ant + CSS-Modules is working great for me :)

Here is an example repo in case someone wants to take a look at the package.json config: https://github.com/fede-rodes/pickupgames

Thanks!