Skip to content

CSS Modules: error when composing imported class #533

Closed
@OliverJAsh

Description

@OliverJAsh

Do you want to request a feature or report a bug? bug

What is the current behavior?
Error when composing imported class.

If the current behavior is a bug, please provide the steps to reproduce.

@value colors: './colors.css';

.foo {
    composes: text from colors;
}
/* colors.css */
.text {
    color: yellow;
}

webpack config:

module.exports = {
    entry: './src/main.css',
    output: {
        filename: './target/main.css',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                        },
                    },
                ]
            }
        ]
    }
}

Gives error:

ERROR in ./~/css-loader?{"modules":true}!./src/main.css
Module build failed: referenced class name "text" in composes not found (4:5)

  2 |
  3 | .foo {
> 4 |     composes: text from colors;
    |     ^
  5 | }
  6 |

Full test case at https://github.com/OliverJAsh/postcss-modules-values-test. After cloning:

yarn
webpack

What is the expected behavior?
No error.

If this is a feature request, what is motivation or use case for changing the behavior?

Please mention other relevant information such as your webpack version, Node.js version and Operating System.
webpack 2.5.1
css-loader 0.28.1

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions