Optimization doesn't work as expected

[frabanca]

Hi @kenmueller . I've just made this steps:

1. npm run npm i next-optimized-classnames
2. edited next.config.js as follow:

const path = require('path');
const withPWA = require('next-pwa');
module.exports = withPWA(require('next-optimized-classnames')({
  trailingSlash: false,
  reactStrictMode: true,
  distDir: 'build',
  crossOrigin: 'anonymous',
  production: process.env.NODE_ENV === 'production',
  sassOptions: {
    includePaths: [path.join(__dirname, 'styles')]
  },
  pwa: {
    dest: 'public',
    disable: process.env.NODE_ENV === 'development'
  },
  }
}));

3. Run npm run build (wich actually runs next build)
4. Run npm run start

The expected output is the minified class names, but I still see the same class names.

My package.json:

"dependencies": {
    "bootstrap": "^4.6.0",
    "next": "10.0.9",
    "next-optimized-classnames": "^1.0.1",
    "next-pwa": "^5.0.6",
    "nextjs-sitemap-generator": "^1.3.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "sass": "^1.32.8",
  },

Am I making some mistake?

[kenmueller]

Looks like Next.js updated and their webpack config is slightly different. I'm updating the package to reflect their changes, it should be done by tomorrow!

[frabanca]

Looks like Next.js updated and their webpack config is slightly different. I'm updating the package to reflect their changes, it should be done by tomorrow!

Super! Thank your for your reply! 👍🏻

[kenmueller]

Just fixed it. Let me know if it works for you!

[frabanca]

Hi @kenmueller , thanks for your quick fix!

I've tested on the same environment posted above. The results are better: it works for some style classes, but not for all of them. Here you can find a screenshot of the inspected-webpage.

Seems like it worked on the css classes coming from "style.module.scss" but not for the others, such as:

• styles coming from external props
• styles coming from external libraries such as Bootstrap

I didn't had time to inspect the project's code, so I have no idea on how to solve this, yet. I think that the aim of the project should be to parse every kind of style classes, regardless of their "type".

What do you think about it?

[shivamragnar]

@kenmueller @frabanca Any luck on the external libraries classnames ? I am using SwiperJs and i want to obfuscate the classnames there.