eels / next-purge-css-modules Goto Github PK
View Code? Open in Web Editor NEWEasily remove unused css-module code in your Next.js application
Home Page: https://www.npmjs.com/package/next-purge-css-modules
License: MIT License
Easily remove unused css-module code in your Next.js application
Home Page: https://www.npmjs.com/package/next-purge-css-modules
License: MIT License
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
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
next-purge-css-modules
...
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: () => [
...
.next/static/css/
is exactly the same before and after adding next-purge-css-modules
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
},
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.