Dark mode "class" strategy doesn't work with CSS Modules and @apply

[tosuke]

Describe the problem:

Dark Mode in 'class' strategy doesn't work with CSS Modules and @apply. css-loader renames .dark selectors given by tailwind.

Link to a minimal reproduction:

https://github.com/tosuke-lab/miniature-octo-umbrella

[tosuke]

Workaround

Suppress renaming of .dark selectors.
If you use css-loader, you can use getLocalIdent to suppress renaming.

{
  loader: 'css-loader',
  options: {
    module: {
      getLocalIdent: (_context, _localIdentName, localName) => {
        if (localName === "dark") return "dark";
      },
    }
  }
}

[trm217]

The workaround would still break certain aspects of the application tough. What we want is to get a tailwind utility with the dark:prefix to not be resolved to .dark when in a css-module but instead to be resolved to :global(dark). If someone choses to use a .dark class in his code, it should still be able to resolve regardless of tailwind‘s presence.

[mehdi-mashayekhi]

Workaround

Suppress renaming of .dark selectors.
If you use css-loader, you can use getLocalIdent to suppress renaming.

{
  loader: 'css-loader',
  options: {
    module: {
      getLocalIdent: (_context, _localIdentName, localName) => {
        if (localName === "dark") return "dark";
      },
    }
  }
}

how ? please help for use this config in nextjs project

[phuctm97]

Any idea for fixing this issue yet?

[trm217]

As said above, while there is a workaround, there is no way to "fix" it without breaking other aspects of the PostCSS process.

[adamwathan]

No plans to spend time on this one unfortunately, I would recommend just writing the CSS a bit more manually when in a CSS module (same way you had to with apply for hover and stuff in Tailwind 1):

.foo {
  @apply p-8;
  @apply bg-gray-100 text-gray-900;
}

:global(.dark) .foo {
  @apply bg-gray-900 text-gray-100;
}

I'd be open to reviewing a PR if someone has an idea for making this work but no plans to work on this myself.

[yayvery]

@tosuke @phuctm97 here is my solution: #3109 (comment)

[KyleRoss]

@webtinax I'm late to the party here but I was able to get this working without it being too hacky in Next.js v12 using a portion of @tosuke's answer. It may work in older Next.js versions, but I haven't tried it.

next.config.js

module.exports = {
  webpack: config => {
    // Find the base rule that contains nested rules (which contains css-loader)
    const rules = config.module.rules.find(r => !!r.oneOf);

    // Interate over the found rules
    rules.oneOf.forEach(loaders => {
      // Focus on the the loaders that have an array of `use` statements
      if(Array.isArray(loaders.use)) {
        // Iterate over each of the loaders
        loaders.use.forEach(l => {
          // Only focus on loaders that are an object and have a `loader` property set to `css-loader`
          if(typeof l !== 'string' && typeof l.loader === 'string' && /(?<!post)css-loader/.test(l.loader)) {
            // If there are no module options originally set, skip this loader
            if(!l.options.modules) return;
            const { getLocalIdent, ...others } = l.options.modules;

            // Create a new options object with the `getLocalIdent` property set to a function
            l.options = {
              ...l.options,
              modules: {
                ...others,
                getLocalIdent: (ctx, localIdentName, localName) => {
                  // If the class name is `dark`, return it instead of hashing it
                  if(localName === 'dark') return localName;
                  // Otherwise, call the original function and return the value
                  return getLocalIdent(ctx, localIdentName, localName);
                }
              }
            };
          }
        });
      }
    });

    return config;
  }
};

[egorderg]

I've had some errors with the solution from @KyleRoss .
I needed to pass also the options parameter to the default getLocalIdent.

module.exports = {
  webpack: config => {
    // Find the base rule that contains nested rules (which contains css-loader)
    const rules = config.module.rules.find(r => !!r.oneOf);

    // Interate over the found rules
    rules.oneOf.forEach(loaders => {
      // Focus on the the loaders that have an array of `use` statements
      if(Array.isArray(loaders.use)) {
        // Iterate over each of the loaders
        loaders.use.forEach(l => {
          // Only focus on loaders that are an object and have a `loader` property set to `css-loader`
          if(typeof l !== 'string' && typeof l.loader === 'string' && /(?<!post)css-loader/.test(l.loader)) {
            // If there are no module options originally set, skip this loader
            if(!l.options.modules) return;
            const { getLocalIdent, ...others } = l.options.modules;

            // Create a new options object with the `getLocalIdent` property set to a function
            l.options = {
              ...l.options,
              modules: {
                ...others,
                getLocalIdent: (ctx, localIdentName, localName, options) => {
                  // If the class name is `dark`, return it instead of hashing it
                  if(localName === 'dark') return localName;
                  // Otherwise, call the original function and return the value
                  return getLocalIdent(ctx, localIdentName, localName, options);
                }
              }
            };
          }
        });
      }
    });

    return config;
  }
};

[ali4heydari]

Here is my config for storybook:

.storybook/main.js

// .storybook/main.js

module.exports = {
 // other configs...
  webpackFinal: async (config) => {
   // other configs...
   
   
    // Iterate over the rules
    config.module.rules.forEach((loaders) => {
      // Focus on the the loaders that have an array of `use` statements
      if (Array.isArray(loaders.use)) {
        // Iterate over each of the loaders
        loaders.use.forEach((l) => {
          // Only focus on loaders that are an object and have a `loader` property set to `css-loader`
          if (
            typeof l !== 'string' &&
            typeof l.loader === 'string' &&
            /(?<!post)css-loader/.test(l.loader)
          ) {
            // If there are no module options originally set, skip this loader
            if (!l.options.modules) return;
            const { getLocalIdent, ...others } = l.options.modules;

            // Create a new options object with the `getLocalIdent` property set to a function
            l.options = {
              ...l.options,
              modules: {
                ...others,
                getLocalIdent: (ctx, localIdentName, localName) => {
                  if (localName === 'dark') return localName;
                  return null;
                },
              },
            };
          }
        });
      }
    });

    return config;
  },
};

[danon]

The fact that both dark: variant is suggested in documentation, as well as @apply is suggested in documentation suggests these two should work together.

When you have two features in a library, people will want to use them together.

There is no reason this shouldn't be added to library, other the the fact that there are "no plans".

[sullyAL]

No plans to spend time on this one unfortunately, I would recommend just writing the CSS a bit more manually when in a CSS module (same way you had to with apply for hover and stuff in Tailwind 1):

.foo {
  @apply p-8;
  @apply bg-gray-100 text-gray-900;
}

:global(.dark) .foo {
  @apply bg-gray-900 text-gray-100;
}

I'd be open to reviewing a PR if someone has an idea for making this work but no plans to work on this myself.

Actually if you're using scss or less (pretty common nowadays) this is very easy and straight forward, I guess no need for "hacky" workaround at all

[danon]

This here is the typical "tailwind" negligence. They brag about "Rapidly build modern websites" in their website, and then refuse to listen to actual developers describing actual needs.

[sullyAL]

This here is the typical "tailwind" negligence. They brag about "Rapidly build modern websites" in their website, and then refuse to listen to actual developers describing actual needs.

Yeah I agree on this one , this needs described on their documentation. I did wasted couple of hours checking why this wasn't working on the first place. Probably just adding to their documentation the :global approach will be enough for now