Transform css module imports during build

[danny-andrews]

This changeset transforms css module imports as part of the build process.

Fixes #80 and #28 and possibly #84.

[danny-andrews]

@roylee0704 Getting a VersionEye error for an existing dependency.

[roylee0704]

@silvenon what do you think about this?

[nigelterry]

This fixed #28 for me.

[roylee0704]

Thanks for the PR @danny-andrews ;)

[roylee0704]

@danny-andrews Is everything working on your side? v1.1.4

[danny-andrews]

@roylee0704 Haven't pulled down the new version yet. I'll let you know when we have!

[slavab89]

For me this actually breaks (v1.1.4) My config (for Dev) is as follows (Will be happy to know what to change)

In components:

import { Row, Col } from 'react-flexbox-grid/lib/index';

Webpack:

{
  test: /\.css$/,
  use: [
    { loader: 'style-loader' }, 
    { loader: 'css-loader', options: importLoaders: 1, modules: true }, // With additional options
    { loader: 'postcss-loader' }], // With additional options
  ],
  include: './app/css', //my own css files are here
  exclude: /flexboxgrid/
},
{
  test: /\.css$/,
  use: [
    { loader: 'style-loader' },
     { loader: 'css-loader', options: modules: true }
  ],
  include: /flexboxgrid/
}

I've tried to change the import to just import { Row, Col } from 'react-flexbox-grid' and add import 'flexboxgrid/dist/flexboxgrid.css' but it doesnt help. It seems that it does create different classNames for row, col but the file itself with the rules is not present therefore no styles are actually applied.

[danny-andrews]

@slavab89 It's probably easier to add 'flexboxgrid/dist/flexboxgrid.css' to entry in your webpack config. It should end up in the same stylesheet bundle as your files (unless you do bundle splitting).

[danny-andrews]

@slavab89 Oh, it should be import 'flexboxgrid/lib/flexboxgrid.css';. It's stored in lib, not dist.

[danny-andrews]

@roylee0704 I'm sorry, I should have been more clear. This was a breaking change and should have resulted in a major version bump. I added a note to the old PR but failed to copy it over here.

[danny-andrews]

Got a fix up here.

[slavab89]

@danny-andrews I think i should be using the dist folder - same as here. Also, i dont see a lib folder in flexboxgrid (it throws an error if i try to put lib).

Also, i'm not sure why but the classNames file that webpack generates has classes such as flexboxgrid__row___1y_mg flexboxgrid__col___3RqPP while flexboxgrid/dist/flexboxgrid.css has classes like _29XjX9PJIUZbQiXFTaW15q jT1yTaKoJWIC8KeS-FuVo. I see this behaviour only when i add import 'flexboxgrid/dist/flexboxgrid.css'. If i dont add it then the flexboxgrid.css is not loaded at all. Its like its running webpack twice but with different options.

[danny-andrews]

Sorry, I misread that. You want to do: import 'react-flexbox-grid/lib/index.css';. You want to import the build css from react-flexbox-grid, not flexboxgrid. Also, fyi, I have a fix for this up here which restores backwards compatibility by making this feature opt-in.

[slavab89]

Thanks. I've added import 'react-flexbox-grid/lib/index.css'; and it required me to do 2 changes:

1. In case i didnt have a processing of react-flexbox-grid css files i would need to add it (i didnt so i had to add it)
2. I couldnt use modules because it would create a mapping for the flexboxgrid__row___1y_mg flexboxgrid__col___3RqPP classes to other hash names.

[danny-andrews]

@slavab89 Yeah, it certainly isn't ideal. I have a fix up here. Mind taking a look @roylee0704?