coreCss not importing correctly

[thrberglund]

EDIT: sorry, looks like I simply had to enable css modules and everything worked despite using a really old version of css-loader. Please resolve or delete this issue if it's expected that I need to add css-module handling to my config.

When importing the ColorPicker I get the following error:

Google seemed to indicate that it might be an issue with using old css-loader version, see: https://github.com/facebook/create-react-app/issues/11800

With that in mind, I tried hacking index.js and added the old syntax, ie

import * as coreCss from '../core.module.css';
//import coreCss from '../core.module.css';

With those changes, it now built without any errors.

Does this indicate that you are missing a dependency for css-loader?

Apologies if I'm missing something and this issue is on my side.

[hxf31891]

@thrberglund I will check this out now, CSS has long been an issue with this project.

Can you give me some info on your env? Are you using Next or Vite?

[thrberglund]

@hxf31891 We are using webpack. The relevant code in our webpack config file looked something like this:

module: {
    rules: [
        {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
        },
    ],
},

The solution was to enable modules, so at first I did this:

module: {
    rules: [
        {
            test: /\.css$/,
            use: [
               'style-loader'
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                    },
                },
            ],
        },
    ],
},

HOWEVER, while it fixed the color picker, this now caused issues with importing normal css files. So the final version (hopefully) now handles .css and .module.css differently.

module: {
    rules: [
        {
            test: /\.module\.css$/,
            use: [
                 'style-loader',
                {
                    loader: 'css-loader',
                    options: {
                        modules: true,
                    },
                },
            ],
        },
        {
            test: /^((?!\.module).)*\.css$/,
            use: [ 'style-loader', 'css-loader'],
        },
    ],
},

This seems to work so far. That said, I don't feel like I should have to make all these changes just to use a color picker package, so if you are able to fix it up then that would be great :)

EDIT: for anyone that miught stumble across my post when researching an issue, here's a better way of writing the non-module rules:

test: /\.css$/,
exclude: /\.module\.css$/,

[thrberglund]

I thought my fix above was enough, but after trying to use it, I'm getting several other issues. Other webpack builds are failing with the same issue, the vite tests fail with "unknown file extension", storybook was initially failing with the same module has no export and when I tried to fix it, it's now saying that the module build failed due to missing semicolon etc.

All the issues are related to this module.core.css file though and it's essentially just different varieties of the same issue.

I'm trying to understand and fix up all the configs to get this thing finally fully working, but it's very frustrating and I've never had any similar issue with the multitude of other packages we are using. If it's possible to rewrite your handling to not have all these dependencies, then that would be amazing. I'm just about ready to throw my hands in the air and write my own custom color picker instead. Which is a shame, because I quite like it.

EDIT: I think I've managed to fix the various configs. Fingers crossed.