Plugin not working in develop

[lomoien]

Hello,
Thank you for this useful plugin. Unfortunately it doesn't seem to work for me. I'm currently still working on my page, so I'm not running in production mode. I've set "enable: true," // "enable: 'true'," in the gatsby-config.js, but it doesn't work for me. I can't find any error message which would help me resolve this problem. Is this plugin still running on latest versions?

[stldo]

Hi! Thanks for reporting. I've not checked if it is working fine with Gatsby v4 yet. I'll try to have a look into it this week. Meanwhile, could you please share your gatsby-config.js content, and your Gatsby version?

[lomoien]

Hey, thanks for the quick reply! Happy to see that this is still maintained actively :) Here's my gatsby-config.js file.
Gatsby version: gatsby: ^4.0.2 => 4.1.0

  siteMetadata: {
    siteUrl: "",
    title: "Portfolio",
    },
  },
  plugins: [
    "gatsby-plugin-image",
    {
      resolve: "gatsby-plugin-google-analytics",
      options: {
        trackingId: "",
      },
    },
    "gatsby-plugin-react-helmet",
    "gatsby-plugin-sitemap",
    {
      resolve: "gatsby-plugin-manifest",
      options: {
        icon: "src/images/icon.png",
      },
    },
    {
      resolve: `gatsby-plugin-sharp`,
      options: {
        defaults: {
          formats: [`auto`, `webp`],
          placeholder: `blurred`,
          quality: 100,
          breakpoints: [750, 1080, 1366, 1920],
          backgroundColor: `transparent`,
          tracedSVGOptions: {},
          blurredOptions: {},
          jpgOptions: {},
          pngOptions: {},
          webpOptions: {},
          avifOptions: {},
        }
      }
    },
    "gatsby-transformer-sharp",
    {
      resolve: "gatsby-source-filesystem",
      options: {
        name: "images",
        path: "./src/images/",
      },
      __key: "images",
    },
    `gatsby-transformer-json`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: "JSON",
        path: `./src/content/`,
      },
    },
    {
      resolve: `gatsby-plugin-minify-classnames`,
      options: {
        dictionary: 'bcdfghjklmnpqrstvwxyzBCDFGHJKLMNPQRSTVWXYZ0123456789',
        //enable: process.env.NODE_ENV === 'production',
        enable: true,
        prefix: '',
        sufix: ''
      },
    },
  ],
};```

[stldo]

I did test the plugin on v4, and it seems to be working fine on development. Could you please clear the Gatsby cache and test the plugin again?

[lomoien]

I cleared the Gatsby cache, but it still wont work for me :/ I don't know if I'm doing anything wrong or if it's another plugin that makes it not work..

[stldo]

I've made some changes to the code, please update to the latest version and check if it's working. Everything seems to be working fine here with Gatsby v4. If it is still not working on development, could you please share a small repository reproducing the issue?

[lomoien]

Thanks for your work! I created a fresh new Gatsby project, without any plugins and added gatsby-plugin-minify-classnames (installed it via npm and added it to the gatsby-config file, setting enable to true). It still doesn't work for me..
I import the CSS file via "import '../../styles.css'" and add classes via '<div className="name"'. This should work right? I don't know what I'm doing wrong..

[stldo]

Actually, this plugin only works with CSS Modules. You should import it like import * as styles from ../../styles.module.css and use class names like <div className={styles.name}/>. The plugin seems to be working fine, so I'll close this issue, but if you believe that there's a bug, please let me know and I'll reopen this issue.

[lomoien]

Oh I understand, I knew there's something important I was missing... Yes, with CSS modules, it works great! Sorry for misunderstanding and wasting your time..
Thank you for this useful plugin!