Add config sample with mini-css

[inoyakaigor]

I had moved to this package from original Jimdo/typings-for-css-modules-loader and got an error

 Module Error (from ../node_modules/@teamsupercell/typings-for-css-modules-loader/src/index.js):
    Unterminated string literal. (3:7)
      1 | declare namespace IndexStylModule {
      2 |   export interface IIndexStyl {
    > 3 |     ';
        |       ^
      4 | var exports = ___CSS_LOADER_API_IMPORT___(false);
      5 | // Module
      6 | exports.push([module.id, ': string;

My loaders config was

const loaders = [
    {
        loader: MiniCssExtractPlugin.loader,
        options: {…},
    },
    {
        loader: '@teamsupercell/typings-for-css-modules-loader',
        options: {…}
    },
    {
        loader: 'css-loader',
        options: {…}
    }
]

I spend a day to find a solution and the trick was in the order of loaders. typings-for-css-modules-loader should be last in order:

const loaders = [
    {
        loader: '@teamsupercell/typings-for-css-modules-loader',
        options: {…}
    },
    {
        loader: MiniCssExtractPlugin.loader,
        options: {…},
    },
    {
        loader: 'css-loader',
        options: {…}
    }
]

Please add in readme this solution.

[Obi-Dann]

It should be configured like that:

const loaders = [
    {
        loader: MiniCssExtractPlugin.loader,
        options: {…},
    },
    {
        loader: '@teamsupercell/typings-for-css-modules-loader',
        options: {…}
    },
    {
        loader: 'css-loader',
        options: {…}
    }
]

It works fine in our config and I wonder why it does not work for you folks. Would you be able to provide the full list of options for all 3 loaders? That might help finding the issue

[inoyakaigor]

Now my config looks like this

{
    test: /\.styl$/,
    use: [
        {
            loader: '@teamsupercell/typings-for-css-modules-loader',
            options: {
                formatter: 'none'
            }
        },
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                esModule: true,
            },
        },
        {
            loader: 'css-loader',
            options: {
                esModule: true,
                localsConvention: 'camelCase',
                modules: {
                    localIdentName: '[folder]-[local]__[hash:base64:5]'
                }
            }
        }
        'stylus-loader',
    ]
},
{
    test: /\.css$/,
    use: [
        {
            loader: '@teamsupercell/typings-for-css-modules-loader',
            options: {
                formatter: 'none'
            }
        },
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                esModule: true,
            },
        },
        {
            loader: 'css-loader',
            options: {
                esModule: true
            }
        }
    ]
},

[Obi-Dann]

Ah, thanks for that @inoyakaigor. I think it's because of esModule - it looks like a new config option (for me) that I am not sure is currently supported. Going to double check what happens if it's enabled!

[Obi-Dann]

@inoyakaigor I can't reproduce the error you're getting. Tried both - running MiniCssExtractPlugin.loader before and after typings-for-css-modules-loader with esModule both enabled and disabled. Would you be able help with providing a minimal reproducible example?

[inoyakaigor]

@DanNSam hmm… it is strange. Anyway I will try to reproduce but a little bit later. Maybe this week.

[inoyakaigor]

@DanNSam I did it.
In short issue in option formatter: 'none'.
Repo to reproduction inoyakaigor/typings-fail-reproduction

Ran under Node 12.16.1