docs(README): add note about compose when imports are disabled

[kud]

Gosh, I spent so much time understanding why I was able to compose a class with an internal class but not an external class in my css moduled style files.

I wanted to disable "import" because I didn't want that people use "@import" in the css files and wanted them make it importing via javascript like this:

import '~/styles/index.css'
import styles from './index.css'

BUT disabling "import" option makes unavailable the fact to import external class in css-modules composes feature.

😒😒😒😒

[jsf-clabot]

All committers have signed the CLA.

[codecov]

Codecov Report

Merging #517 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff           @@
##           master    #517   +/-   ##
======================================
  Coverage    98.6%   98.6%           
======================================
  Files          10      10           
  Lines         359     359           
  Branches       81      81           
======================================
  Hits          354     354           
  Misses          5       5

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update de4356b...623b4f7. Read the comment docs.

[michael-ciniawsky]

@kud I need to investigate into this and why, tbh I also thought it just disables @import resolving 😒

[kud]

For the moment, I was able to

.class {
  composes: otherClass
}

but not

.class {
  composes: otherClass from 'other.css'
}

when import: false.

---

Oh and by the way, is it normal that you can do:

.otherClass {}

.class {
  composes: otherClass
}

but not:

.class {
  composes: otherClass
}

.otherClass {}

?

---

Attached, my webpack.config.babel.js

import path from 'path'
import webpack from 'webpack'
// import autoprefixer from 'autoprefixer'
import customMedia from 'postcss-custom-media'
import HtmlWebpackPlugin from 'html-webpack-plugin'

import config from './config.json'

const SRC_DIR = path.resolve(__dirname, 'src')
const DIST_DIR = path.resolve(__dirname, 'dist')

const noop = () => {}

const postCssLoader = {
    loader: 'postcss-loader',
    options: {
      plugins: [
        // autoprefixer(), unneeded for the moment
        customMedia({
          extensions: {
            "--mobile": "(max-width: 375px)",
            "--mobile-only": "(max-width: 375px)",
            "--tablet": "(max-width: 1024px)",
            "--tablet-only": "(min-width: 376px) and (max-width: 1024px)",
            "--desktop": "(min-width: 1025px)",
            "--desktop-only": "(min-width: 1025px)",
          }
        })
      ]
    }
  }

export default (env) => {
  return {
    // the source
    entry: [
      'react-hot-loader/patch',
      `${SRC_DIR}/index.js`,
    ],

    // the destination
    output: {
      path: DIST_DIR,
      filename: env === 'prod' ? 'index.[hash].js' : 'index.js',
      publicPath: '/'
    },

    resolve: {
      alias: {
        '~': `${SRC_DIR}`, // thanks to that, we can use import xxx from '~/file'
      }
    },

    // plugins
    plugins: [
      new HtmlWebpackPlugin({
        template: 'src/index.html'
      }),

      new webpack.DefinePlugin({
        API_URL: JSON.stringify(config.API_URL),
        'process.env': {
          'NODE_ENV': env === 'prod' ? JSON.stringify('production') : JSON.stringify('development')
        }
      }),

      env === 'prod' ?
        new webpack.optimize.UglifyJsPlugin({
          mangle: {
            screw_ie8: true,
            keep_fnames: true,
          },
          compress: {
            screw_ie8: true,
            warnings: false,
          },
          comments: false
        }) :
        noop,
    ],

    // what will be used for each type of code
    module: {
      rules: [
        // javascript
        {
          test: /\.jsx?$/,
          exclude: /node_modules/,
          loader: 'babel-loader',
        },

        // files
        {
          test: /\.(png|woff|woff2|eot|ttf|svg)$/,
          use: {
            loader: 'url-loader',
            options: {
              limit: 100000
            }
          }
        },

        // styles
        {
          test: /\.css$/,
          exclude: [path.resolve(__dirname, 'src', 'components'), path.resolve(__dirname, 'src', 'pages')],
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader',
              options: {
                modules: false,
                importLoaders: 1,
                import: true
              }
            },
            postCssLoader
          ]
        },

        {
          test: /\.css$/,
          include: [path.resolve(__dirname, 'src', 'components'), path.resolve(__dirname, 'src', 'pages')],
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader',
              options: {
                modules: true,
                importLoaders: 1,
                localIdentName: env === 'prod' ? '[name]--[local]___[hash:base64:5]' : '[path][name]--[local]___[hash:base64:5]',
                import: true
              }
            },
            postCssLoader
          ]
        },

        // images
        {
          test: /.*\.(gif|png|jpe?g|svg)$/i,
          use: [
            {
              loader: 'file-loader'
            },
            {
              loader: 'image-webpack-loader',
              options: {
                gifsicle: {
                  interlaced: false,
                },
                optipng: {
                  optimizationLevel: env === 'prod' ? 7 : 1,
                },
                pngquant: {
                  quality: '65-90',
                  speed: 4
                },
                mozjpeg: {
                  progressive: true,
                  quality: 65
                }
              }
            }
          ]
        }
      ]
    },
  }
}

[michael-ciniawsky]

CSS Modules use a format called ICSS (Intermediate CSS) :import, :export basically a JSON Blob

{
   "className": "dfbzreur474"
   ...
}

For the first, I will check that out, I assumed that composes actually loads the file independently, modularizes it and you can compose it then (external aswell, like you mentioned)

For the second, it is 'correct' in the current plugin order used by css-loader the .otherClass {} isn't available (parsed) when the compose looks up the ICSS representation #403

We will remove CSS Modules from css-loader with the next major release and release CSS Modules as 'normal' PostCSS Plugin usable with postcss-loader as opt-in and better configuration for the important parts of modules 😛 but it's WIP atm

[kud]

Okay, thank you for your feedback. It makes sense not to have css modules in css-loader but in a postcss as plugin. Yes. :)

[michael-ciniawsky]

I will merge this, when I have certainty of what is really going on :)

[michael-ciniawsky]

Ooops... 😛

[kud]

Thank you @michael-ciniawsky, It'll maybe help some people before you remove css modules from here or patch it.

[michael-ciniawsky]

@kud Thx again 👍