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

modules configuration is very confusing. Could it be simplified? #328

Open
dagda1 opened this issue Oct 17, 2020 · 4 comments
Open

modules configuration is very confusing. Could it be simplified? #328

dagda1 opened this issue Oct 17, 2020 · 4 comments

Comments

@dagda1
Copy link

dagda1 commented Oct 17, 2020

I am using version 3.1.8 and had great trouble getting a css file to avoid getting hashed by the module code.

I have a transition.css.

My config was this:

      postcss({
        extract: true,
        modules: true,
        use: ['sass'],
      }),

I had to log this code to work it out even though I read #292 #296

      const autoModules = options.autoModules !== false && options.onlyModules !== true;   // true
      const isAutoModule = autoModules && isModuleFile(_this.id);                          // false
      const supportModules = autoModules ? isAutoModule : options.modules;      // finally false

I ended up eventually with this

      postcss({
        extract: true,
        modules: false,
        autoModules: true,
        use: ['sass'],
      }),

It never occurred to me that modules: false would be the answer or autoModules would not apply to everything.

Should there not just be 1 boolean field and that is it? { modules: boolean }

I don't know the history and apologies if this comes across rude as this is not my intent.

@katywings
Copy link
Contributor

I am the author of said changes and I see it the same as you ^^, having multiple configs which override each other always will result in complexity. My changes fixed issues for some users, but as we now see, resulted in new questions. We really should think about how we can make a module config which is obvious for as many users as possible. Then we can do it as an official breaking change with a major release...

About your config: did you ever try to just do it like this? 😅

postcss({
        extract: true,
        use: ['sass'],
      }),

autoModules, which enables modules for prefixed files, already is enabled by default.

@elpddev
Copy link

elpddev commented Jun 21, 2021

@dagda1 Thank you. This helped us. Maybe also consider including in the issue name "automodules not working?" so it help others find this solution.

@dagda1
Copy link
Author

dagda1 commented Jun 21, 2021

@elpddev I think rather than change the title of this issue, I think the API could be more obvious. What do we think would make sense as an API?

@elpddev
Copy link

elpddev commented Jun 24, 2021

@dagda1 I came to this issue because I fell on case that every css was considered css module, not only module.css.

Regarding the API, maybe those varitaions could make it more clear?

  1. cssModule: boolean (true/false) cssModulePattern: regex
    or
  2. cssModule: boolean/regex // true, false, pattern
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
4 participants