Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS Modules: error when composing imported class #533

Closed
OliverJAsh opened this issue May 16, 2017 · 1 comment
Closed

CSS Modules: error when composing imported class #533

OliverJAsh opened this issue May 16, 2017 · 1 comment

Comments

@OliverJAsh
Copy link
Contributor

OliverJAsh commented May 16, 2017

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

@OliverJAsh
Copy link
Contributor Author

After more digging:

  • when the class name you're composing with is the same as the class name you're composing from, you get error Module build failed: referenced class name "from" in composes not found
  • when the class name is not the same, you get error Module build failed: referenced class name "COMPOSED_CLASS_NAME" in composes not found, where COMPOSED_CLASS_NAME is the composed class name.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants