Weird dependency conflict with css-loader and its composes functionality.

[rozzzly]

I discovered a bug due to a conflict between css-loader and postcss-loader.

ERROR in ./~/css-loader?{"modules":true,"importLoaders":1,"localIdentName":"[local]_[hash:base64:8]"}!./~/postcss-loader?{"parser":"postcss-scss"}!./src/common/assets/typography2.css
Module build failed: Error: No PostCSS Config found in: /mnt/c/Users/rozzzly/Projects/resume.me/src/common/assets
    at /mnt/c/Users/rozzzly/Projects/resume.me/node_modules/postcss-load-config/index.js:51:26
 @ ./~/css-loader?{"modules":true,"importLoaders":1,"localIdentName":"[local]_[hash:base64:8]"}!./~/postcss-loader?{"parser":"postcss-scss"}!./src/common/modul
es/blog/components/PostExcerpt/styles.css 3:10-274 18:36-300
 @ ./src/common/modules/blog/components/PostExcerpt/styles.css
 @ ./src/common/modules/blog/components/PostExcerpt/index.tsx
 @ ./src/common/modules/blog/pages/TaggedPage/index.tsx
 @ ./src/common/modules/blog/routes.ts
 @ ./src/common/routes/index.ts
 @ ./src/client/router.tsx
 @ ./src/client/index.ts
 @ multi react-hot-loader/patch webpack-hot-middleware/client?path=http://localhost:3001/__webpack_hmr ./src/common/assets ./src/client

now before you reply telling me to get my config setup right, please keep reading.

Here's the relevant slice of my webpack config:

{
  test: /\.s?css$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'isopropyl-style-loader', // ignore this. Just my fork of `isomorphic-style-loader`
      options: {                        // that's not so buggy with SSR and HMR. Plain old
        inline: true                    // `style-loader` produces the same result
      }
    },
    {
      loader: 'css-loader',
      options: {
        modules: true,
        importLoaders: 1,
        localIdentName: '[local]_[hash:base64:8]'
      }
    },
    {
      loader: 'postcss-loader',
      options: {
        parser: 'postcss-scss',
        plugins: (): any[] => [
          //require('postcss-modules'),
          require('postcss-shared-options').default,
          require('postcss-nesting'),
          require('postcss-calc'),
          require('postcss-css-variables'),
          require('postcss-utilities')
        ]
      }
    }
  ]
}

I've read like 100 issues across this repo/css-loader/css-modules's plugins/etc. I have no doubt that this is unrelated to my config.
Essentially my directory structure looks like this:

/
/assets
/assets/index.js
/assets/Bar.css
/assets/typography.css
/components
/components/Foo
/components/Foo/index.js
/components/Foo/styles.css

In /components/Foo/styles.css I was not able to do composes: bar from '../../assets/Bar.css'. However, composes: bar from '../../assets/typography.css' works (assuming I had a class named .Barin that file as well.) For the life of me, I couldn't figure it out. Copy and paste the exact same code from one file into another and it works...so long as the file was namedtypography.css`.

After much head scratching, and a fair deal of foul words, I figured out why one file was working, while the other wasn't.

Enter /assets/index.js, I was importing global things like my css reset, and fonts from this file, hence why typography.css worked but Bar.css wouldn't (it wasn't imported in /assets/index.js. So long story short, the file containing the class being composed from must be loaded manually from JS.

I should also note that you need to either restart WDS, or resave both the fixed /assets/index.js and then /components/Foo/styles.css in order for hot-reload to recompile both and get things working.

The error message is not-counter intuitive. My interpretation is that css-loader loads up the /assets/Foo.css file to make the composes transformation, then tries to apply postcss to it, but doesn't properly hand off the config. If that file has already been loaded by postcss-loader however, things appear to work just fine. I don't know the internals of either well enough to judge where changes would need to be made, so I'm posting this here, but will also be linking to this from another issue in css-loader. Hopefully the two teams can collaborate and figure this out. If you need a full reproduction rep, just let me know and I'll whip one up. Thanks guys (and gals) keep up the awesome work!

[michael-ciniawsky]

ERROR in .//css-loader?{"modules":true,"importLoaders":1,"localIdentName":"[local]_[hash:base64:8]"}!.//postcss-loader?{"parser":"postcss-scss"}

!./~/postcss-loader?{"parser":"postcss-scss" => plugins? <= }

@rozzzly Your plugins are missing in the query, that happend (bug) in webpack versions < v2.2.1 with so called 'complex options' ({Function}|| require()), so either update to latest webpack in case your version is < v2.2.1 or use an options prop called ident

webpack.confg.js

{
  loader: 'postcss-loader',
  options: {
    ident: 'postcss', // <= this line
    parser: '...',
    plugins: () => [...plugins]
  }
}

⚠️ Note that postcss-scss does not compile any SASS Syntax :)

If you still have any regressions feel free to reopen 😛