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.

Sign up for GitHub

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

Jump to bottom

Order problem #555

Open
alexander-akait opened this issue Jul 23, 2020 · 3 comments
Open

Order problem #555

alexander-akait opened this issue Jul 23, 2020 · 3 comments

Comments

@alexander-akait
Copy link
Member

Expected Behavior

After dynamically importing component, which composes css class, that an already present component also composes, the existing component should preserve its styles.

Screenshot from 2020-04-06 11 22 27

Actual Behavior

After dynamically importing component B, components C styles get overriden.

Screenshot from 2020-04-06 11 22 52

Code

// index.module.css

.test {
    background-color: red;
    padding: 30px;
}

// b.module.css

.test2 {
    composes: test from '../index.module.css';
    background-color: blue;
}

// c.moodule.css

.test3 {
    composes: test from '../index.module.css';
    background-color: green;
}

Result:

<head>
    <link rel="stylesheet" type="text/css" href="chunk-2.css">
    <script charset="utf-8" src="2.main.js"></script>
    <link rel="stylesheet" type="text/css" href="chunk-1.css">
    <script charset="utf-8" src="1.main.js"></script>
</head>
// chunk-2.css

._2D6NmF3oNXamuyZ2z-z6-2 {
  background-color: red;
  padding: 30px;
}

._2vSpwQvfEWT-h3qiyUMFPO {
  background-color: green;
}
// chunk-1.css

._2D6NmF3oNXamuyZ2z-z6-2 {
  background-color: red;
  padding: 30px;
}

._3IkLTxcAE-k8TWXxjYQrik {
  background-color: blue;
}

Webpack config:

// webpack.config.js
...
    module: {
        rules: [
            {
                test: /\.module\.css$/i,
                use: [
                    { loader: MiniCssExtractPlugin.loader },
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true,
                            importLoaders: 1,
                        },
                    },
                ],
            },
        ],
    },
...

How Do We Reproduce?

For reproduction, see this minimal repo:
https://github.com/OHUSAR/css-modules-chunk-specificity-bug

Originally posted by @OHUSAR in webpack-contrib/css-loader#997 (comment)
@alexander-akait alexander-akait mentioned this issue Jul 23, 2020
Open
@alexander-akait alexander-akait mentioned this issue Aug 6, 2020
Closed
@tf tf mentioned this issue Aug 20, 2020
Closed
@barak007
Copy link
Contributor

When trying to solve this issue maybe take a look at #530

Also the real problem is that css order should not depended only on import order because it can create cases that you cant satisfy all constraints.

x.js imports a.css then b.css
y.js imports b.css then a.css
z.js imports x.js and y.js

@Chimochikhin
Copy link

Any news?

@alexander-akait alexander-akait mentioned this issue Jan 10, 2024
Closed
@OliverJAsh OliverJAsh mentioned this issue May 28, 2024
Closed
@OliverJAsh
Copy link

I made a proposal in css-loader: webpack-contrib/css-loader#1602

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@OliverJAsh @barak007 @alexander-akait @Chimochikhin