Feature Request: Add support for the exportLocalsConvention modules option

[kintz09]

Correct me if I'm wrong, but it doesn't seem that this preset accepts any parameters to customize the css modules options.

Could this package be extended to allow css module options to be passed to the css-loader for the .module.css test case?

For my projects, I use the exportLocalsConvention option with value camelCase to convert any kebab classes to camelCase. Here's an example of the entry in my addons array:

{
      name: "@storybook/preset-scss",
      options: {
        cssLoaderOptions: {
          modules: {
            auto: true,
            exportLocalsConvention: "camelCase",
          },
        },
      }
    },

FWIW, I did fork this repository, add the exportLocalsConvention option to test locally. I get an error about invalid options object.

Here's my modified index.js file. Note the only things changed is the addition of the exportLocalsConvention module option.

const css_regex = '/\\.css$/'

module.exports = {
  webpackFinal(config = {}, options = {}) {
  const cssRule = config.module.rules.find(_ => _ && _.test && _.test.toString() === css_regex)


  return {
    ...config,
    module: {
      ...config.module,
      rules: [
        ...config.module.rules.filter(_ => _ && _.test && _.test.toString() !== css_regex),
        {
          ...cssRule,
          exclude: /\.module\.css$/,
        },
        {
          ...cssRule,
          test: /\.module\.css$/,
          use: cssRule.use.map(_ => {
            if (_ && _.loader && _.loader.match(/[\/\\]css-loader/g)) {
              return {
                ..._,
                options: {
                  ..._.options,
                  modules: {
                    localIdentName: "[name]__[local]__[hash:base64:5]",
                    exportLocalsConvention: "camelCase",
                  }
                }
              }
            }

            return _
          })
        }
      ]
    }
  }
}
}

[Negan1911]

I will be able to take a look at this the weekend, probably modify the options to pass the options you need!

[kintz09]

@Negan1911 Did you get a chance to look into this over the weekend? Thanks in advanced!

[Negan1911]

@kintz09 can you try to update to 1.1.0 and use the following as options:

{
  modules: {
    auto: true,
    exportLocalsConvention: "camelCase",
  }
}

[kintz09]

@Negan1911 Are you using Storybook with webpack v4 or v5 on your side? It would also be helpful to know which version of css-loader you have installed in your project.

After updating storybook-css-modules-preset package to version 1.1.0, I'm running into an error with the options object that I haven't seen before:
- options has an unknown property 'presetsList'. .

I'm not sure where this is coming from, as Its not in my options object nor do I see it in the code for this package. Here's my entry in main.js:

module.exports = {
 stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
 addons: [
   {
     name: "storybook-css-modules-preset",
     options: {
       modules: {
         auto: true,
       }
     }
   },
   {
     name: "@storybook/preset-scss",
     options: {
       cssLoaderOptions: {
         modules: {
           auto: true,
           exportLocalsConvention: "camelCase",
         },
       },
     },
   },
   "@storybook/addon-links",
   "@storybook/addon-essentials",
 ],
}

[Negan1911]

I'll have to investigate further, right now I'm not using this plugin anymore

[kintz09]

@Negan1911 FWIW, I just upgraded my project by opting into @storybook/builder-webpack5 and I was able to get css modules working the way I need without this plugin. When using this package (storybook-css-modules-preset), I still get the presetList error.

I used the following webpackFinal function to get css modules for css files working the way I described in this issue:

  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // get index of css rule
    const ruleCssIndex = config.module.rules.findIndex(
      (rule) => rule.test.toString() === "/\\.css$/"
    );

    // map over the 'use' array of the css rule and set the 'module' options
    config.module.rules[ruleCssIndex].use.map((item) => {
      if (item.loader && item.loader.includes("/css-loader/")) {

        item.options.modules = {
          auto: true,
          exportLocalsConvention: "camelCase",
          localIdentName:
            configType === "PRODUCTION"
              ? "[local]__[hash:base64:5]"
              : "[name]__[local]__[hash:base64:5]",
        };
      };

      return item;
    });

    // Return the altered config
    return config;
  },

[Negan1911]

I had to revert my changes, i'll take a look at this as soon as I can

[alex-major-digital]

Hi guys, was there any update on this?