Using React-bootstrap in our NextJS (10.0.0) app and need to remove unused CSS so using purgecss for that. But all the CSS are getting removed after doing like in this https://purgecss.com/guides/next.html. And found that issue is because of CSS Modules that we are using.
Here is my postcss.config.js
module.exports = {
"plugins": [
"postcss-flexbugs-fixes",
[
"postcss-preset-env",
{
"autoprefixer": {
"flexbox": "no-2009"
},
"stage": 3,
"features": {
"custom-properties": false
}
}
],
[
'#fullhuman/postcss-purgecss',
{
content: [
'./pages/**/*.{js,jsx,ts,tsx}',
'./components/**/*.{js,jsx,ts,tsx}'
],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || [],
safelist: ["html", "body"]
}
],
]
}
Any ways to remove unused CSS?
Related
I am using react-toolbox and react-css-themr to supply theme. I create my contextTheme and supply it through ThemeProvider. Everything's seems fine. I am using webpack, the styles are exported and loaded in the attribute of my page, so there is no problem with the importing the css.
EDIT: I can clearly see the context theme is loaded to the website, as I can observe RT objects
my contextTheme file looks like this and is named contextTheme.js
export default {
RTAutocomplete: require('./assets/style/themes/autocomplete.module.css'),
RTButton: require('./assets/style/themes/button.module.css')
};
I can see custom theme in tag like this
.autocomplete-module--autocomplete--tESXbPMw {
padding: 0
}
.autocomplete-module--autocomplete--tESXbPMw .autocomplete-module--suggestions--t6ziL7OQ {
background-color: red;
border-color: blue;
border-radius: 0
}
theme provider looks like this
<ThemeProvider theme={contextTheme}>
<Router store={s} history={h}>
{ routes }
</Router>
</ThemeProvider>
resulting html element still has only default style applied, because no style is attached to it.
In case my webpack css config looks like this. I am not sure if that is relevant, but just in case.
{
test: /\.scss|\.css$/i,
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
modules: {
exportGlobals: true,
mode: "local",
auto: undefined,
localIdentName: "[name]--[local]--[hash:base64:8]",
},
sourceMap: shouldUseSourceMap,
}
},
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env",
{
// Options
},
],
],
},
},
},
],
sideEffects: true,
},
I don't know why all the style sections of my project having a gray text. Anything work normally but this make it hard to watch.
image.
My nuxt.config.ts
// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
typescript: {
shim: false,
},
modules: [
[
"#pinia/nuxt",
{
autoImports: ["defineStore"],
},
],
],
css: [
"~/assets/css/tailwind.css",
"#fortawesome/fontawesome-svg-core/styles.css",
],
build: {
postcss: {
postcssOptions: require("./postcss.config"),
},
},
});
My postcss.config.js
module.exports = {
plugins: {
"postcss-import": {},
"tailwindcss/nesting": "postcss-nesting",
tailwindcss: {},
autoprefixer: {},
...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
},
};
content of my tailwind.config
content: [
"./assets/**/*.{vue,js,css}",
"./components/**/*.{vue,js}",
"./layouts/**/*.vue",
"./pages/**/*.vue",
"./plugins/**/*.{js,ts}",
"./nuxt.config.{js,ts}",
"./app.{vue,ts,js}",
],
Have anyone encountered this problem before? please help me.
Nevermind, I installed extension language-postcss and its good
i have some color defined in my tailwind configuration like so:
module.exports = {
content: [
...
],
safelist: [
{
pattern: /(bg|border|text)-(alpine|dacia|renault|nissan|bmw|mini|opel|toyota|volkswagen|citroen|kia|peugeot|ds|lexus)(\/10)?/,
variants: ['hover', 'focus'],
},
],
theme: {
...
extend: {
...
colors: {
...
alpine: '#056EB6',
renault: '#efdf00',
dacia: '#646b52',
nissan: '#c3002f',
bmw: '#1c69d4',
mini: '#eb8802',
opel: '#f7ff14',
toyota: '#f02',
volkswagen: '#001e50',
citroen: '#9d0605',
kia: '#051520',
peugeot: '#00a3e0',
ds: '#ad0040',
lexus: '#333366',
},
...
},
},
variants: {
extend: {
display: ["group-hover"],
},
},
plugins: [
require('#tailwindcss/forms'),
require('#tailwindcss/typography'),
require('#vueform/slider/tailwind'),
],
}
As you can see, I added these colors to my safeList, everything works fine except a particular combination:
The last part of my pattern '(/10)?' seems to ignore the hover: variant
bg-alpine -> works
bg-alpine/10 -> works
hover:bg-alpine -> works
hover:bg-alpine/10 doesnt
Maybe its an issue with Tailwind ? or I'm missing something ?
I am trying to use CSS Modules for CSS styling of my ReactJs project, for this I applied ant design documentation (see here: https://pro.ant.design/docs/style), however unfortunately it doesn't work.
The problem is that I want to override the component style of ant Button and it does not get the style.
Below there is a short sample of my code:
CSS class: in MyContainer.less file:
.antButton{
:global {
.ant-btn-primary {
background-color: rgb(215, 226, 233);
border-color: #848586;
font-size: 7pt;
color: red !important;
}
}
}
code:
import React from 'react';
import { Button } from 'antd';
import 'antd/dist/antd.less';
import styles from './MyContainer.less';
const MyContainer= () => {
return (
<Button type="primary" size="small" className={styles.antButton} >Download</Button>
);
};
export default MyContainer;
I'm using Ant design (Version 4.3.0) in react (Version 16.13.1 ) with Webpack (Version 4.42.0).I also installed less-loader (Version 7.3.0) and babel-plugin-import (Version 1.13.3).
I don't know if there is any specific config of the Webpack that I am missing or the problem is somewhere else?
Finally I could handle my problem with antd, when you use css modules you have to add extra config for antd styles to work, I've found my solution in this web site:
https://www.programmersought.com/article/3690902311/ As described there if you add these configs in these order in your Webpack.config in Rule section it will work with Css modules and overriding less styles of antd components.
{
test: /\.less$/,
include: [/src/],
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
modules: {
localIdentName: "[name]__[local]___[hash:base64:5]",
},
sourceMap: true
},
},
{
loader: require.resolve('less-loader'), // compiles Less to CSS
options: { lessOptions:{javascriptEnabled: true }}
},
],
},
{
test: /\.css$/,
exclude: /node_modules|antd\.css/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
// change
modules: {
localIdentName: "[name]__[local]___[hash:base64:5]",
},
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
{
test: /\.css$/,
include: /node_modules|antd\.css/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
// change
// modules: true, // new support for css modules
// localIndetName: '[name]__[local]__[hash:base64:5]', //
},
},
{
loader: require.resolve('postcss-loader'),
options: {
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
Also you need to add babel import in your package.json:
"babel": {
"presets": [
"#babel/preset-env",
"#babel/preset-react",
"#babel/preset-typescript"
],
"plugins": [
[
"import",
{
"libraryName": "antd",
"libraryDirectory": "lib",
"style": true
}
]
]
},
and you have to set style to the wrapper div of antd Components in this way:
import React from 'react';
import { Button } from 'antd';
//import 'antd/dist/antd.less'; you don't need this line when add babel.
import styles from './MyContainer.less';
const MyContainer= () => {
return (
<div className={styles.antButton}>
<Button type="primary" size="small" >Download</Button>
</div >
);
};
export default MyContainer;
I wish it help
I am trying to use Css modules with React SSR and i have added the following webpack config .
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules|bower_components)/,
loader: "babel-loader",
},{
test:/\.(s*)css$/,
use: [
{
loader: MiniCssExtractPlugin.loader,
},
{
loader: 'css-loader',
options: {
modules: {
mode: 'local',
localIdentName: "[name]__[local]___[hash:base64:5]"
},
import: true,
importLoaders: true,
}
},
{
loader: "sass-loader",
}
],
},
]
},
this generates the following css files in the dist bundle
.Home\.module__Container___3B08 {
display: flex;
width: 600px;
height: 300px;
border: 2px solid red; }
Where as in my DOM the div has the following style
<div class="Home-module__Container___14QBF">
how do i make this correct ? and why is the webpack config different with the one in the browser
You have to add the CSS Modules configuration in .babelrc file under plugins. Then only the CSS generated will match with the one in your html.
.babelrc
"plugins": [
["react-css-modules", {
"generateScopedName": "[name]__[local]___[hash:base64:5]"
}]
],
Update :
Had to use css-modules-require-hook for server side CSS rendering and generic-names for generating hash in both client and server.
index.js
const hook = require( "css-modules-require-hook" );
const genericNames = require( "generic-names" );
const generate = genericNames( "[name]__[local]___[hash:base64:5]", {
context: process.cwd(),
});
// Scope Generator function.
hook( {
generateScopedName: ( c, path ) => {
return generate( c, path );
},
} );
webpack.config.js
const genericNames = require( "generic-names" );
const generate = genericNames( "[name]__[local]___[hash:base64:5]", {
context: process.cwd(),
});
const getLocalIdent = ( loaderContext, localIdentName, localName ) =>
generate( localName, loaderContext.resourcePath );
.....
{
loader: "css-loader",
options: {
modules: {
getLocalIdent,
},
},
},
For more, check this repo: https://github.com/ajayvarghese/react-ssr/tree/css-modules.
Note: Repo uses updated versions of babel packages.