eels / next-purge-css-modules Goto Github PK

I get this warning when installing with pnpm

 WARN  Issues with peer dependencies found
next-purge-css-modules 1.1.0
  └── ✕ unmet peer next@">= 11.0.0 < 13.0.0": found 13.4.2

next 13.4.2

Expected Behavior

• I took a screenshot of the CSS loaded before using next-purge-css-modules
• I installed and added the dependency to my Next config:

...
const bundleAnalyzer = require('@next/bundle-analyzer')
const withBundleAnalyzer = bundleAnalyzer({
  enabled: process.env.ANALYZE_BUNDLE === 'true',
})

const withPurgeCSSModules = require('next-purge-css-modules')
const purgeConfig = {
  content: path.join(__dirname, 'src/**/*.{js,jsx,ts,tsx}'),
  enableDevPurge: true,
  safelist: ['body', 'html'],
};

module.export = withPurgeCSSModules(purgeConfig, withBundleAnalyzer({
  basePath: '',
  rewrites: () => [
    ...

• I redeploy/rebuild the app with the pushed changes
• On the Network tab of chrome dev tools, I should see smaller CSS requests
• The coverage tab of chrome dev tools should not list a lot of unused css

Actual Behavior

• On the Network tab of chrome dev tools the CSS requests have exactly the same size
• The coverage tab of chrome dev tools list a lot of unused css
• The content of folder .next/static/css/ is exactly the same before and after adding next-purge-css-modules

Specifications

• Version:
  • [email protected]
  • [email protected] with app router
• Platform: Ubuntu 22.04.3 LTS

I am using TypeScript and a css-in-js library ([email protected]) so basically everything has .ts or .tsx file extension, so `purgeConfig.content' seems fine.

Also I already have some webpack config !

  webpack(config, { dev, isServer }) {
    if (dev && !isServer) {
      const originalEntry = config.entry
      config.entry = async () => {
        const wdrPath = path.resolve(getDirName(), './scripts/wdyr.ts')
        const entries = await originalEntry()

        if (entries['main.js'] && !entries['main.js'].includes(wdrPath)) {
          entries['main.js'].push(wdrPath)
        }
        return entries
      }
    }
    // see https://github.com/Automattic/mongoose/issues/13402#issuecomment-1548826056
    Object.assign(config.resolve.alias, {
      '@mongodb-js/zstd': false,
      '@aws-sdk/credential-providers': false,
      'snappy': false,
      'aws4': false,
      'mongodb-client-encryption': false,
      'kerberos': false,
      'supports-color': false
    })
    return config
  },

Expected Behavior

• Should remove unused css classes, even if they are assigned to an unused variable

Actual Behavior

• Doesn't remove CSS, nor the variable

Steps to Reproduce the Problem

1. import a module.css file
2. assign css class from that module to a variable
3. don't ever use that variable again

CodeSandbox Link / Code Snippets

import styles from './Grid.module.css';

const fooStyle = styles.foo; // unused

export const MyComponent = () => <div></div>;

As soon as you use the exported component, the css will be bundled

Specifications

• Version: 1.1.0
• Platform: Node 18.2.0, Windows 11, next 12.3.1
• Subsystem: