I have a next.js site I am building that uses a specific text as below,
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
theme: {
extend: {
fontFamily: {
sans: ['SFMono-Regular', 'Menlo', ...defaultTheme.fontFamily.sans],
},
colors: {
// indigo: '#7D00FF',
blue: '#51B1E8',
red: '#FF0E00',
},
},
},
plugins: [
require('#tailwindcss/ui'),
]
}
For some reason the text style is being purged when it is deployed to Vercel. This is the purge css config.
module.exports = {
plugins: [
"postcss-import",
"tailwindcss",
"autoprefixer"
]
};
const purgecss = [
"#fullhuman/postcss-purgecss",
{
content: [
'./pages/**/**/*.{js,jsx,ts,tsx}',
'./pages/**/*.{js,jsx,ts,tsx}',
'./pages/*.{js,jsx,ts,tsx}',
'./components/**/**/*.{js,jsx,ts,tsx}',
'./components/**/*.{js,jsx,ts,tsx}',
'./components/*.{js,jsx,ts,tsx}',
],
defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
}
];
module.exports = {
plugins: [
"postcss-import",
"tailwindcss",
"autoprefixer",
...(process.env.NODE_ENV === "production" ? [purgecss] : [])
]
};
What is going on?
Thanks in advance,
I was able to solve this by adding html and body to the safelist in settings.
const purgecss = require('#fullhuman/postcss-purgecss')({
// Specify the paths to all of the template files in your project
content: [
// './src/**/*.html',
'./pages/**/*.vue',
'./layouts/**/*.vue',
'./components/**/*.vue'
],
safelist: ['html', 'body'],
// Include any special characters you're using in this regular expression
defaultExtractor: content => content.match(/[A-Za-z0-9-_:/]+/g) || []
})
Be careful which version of purgecss you have (check package.json):
There was a change from whitelistPatterns to safelist which took me some time to find out
I have this set in my Vue project:
module.exports = {
content: [
"./src/**/*.vue",
],
safelist: [
"body",
"html",
"img",
"a",
"g-image",
"g-image--lazy",
"g-image--loaded",
/-(leave|enter|appear)(|-(to|from|active))$/,
/^(?!(|.*?:)cursor-move).+-move$/,
/^router-link(|-exact)-active$/,
/data-v-.*/,
],
extractors: [
{
extractor: (content) => content.match(/[A-z0-9-:\\/]+/g),
extensions: ["vue"],
},
],
}
Depending on the version of PurgeCSS you are on, (mine was on: v3.1.3), the safelist is used for exclusion pattern, in older versions you might have to use whitelist instead.
Related
I'm working on a React project with Vite and Styled components. For better class names, I use the plugin vite-plugin-babel-macros, which works. But it displays the file name inside the class, which I'd like to hide, so from:
<h1 class="Homepage__H1-sc-1el87d5-0 frwzme"></h1>
to:
<h1 class="H1-sc-1el87d5-0 frwzme"></h1>
With create-react-app I have a file babel-plugin-macros.config.js where I add this code:
const config = {
fileName: false,
displayName: true,
meaninglessFileNames: ["index", "styles"],
}
But this does not work. I tried to add this in my vite.config.ts, but same problem:
export default defineConfig({
plugins: [
react({
babel: {
plugins: [
[
"babel-plugin-styled-components",
{
fileName: false,
displayName: true,
meaninglessFileNames: ["index", "styles"],
},
],
],
},
}),
macrosPlugin(),
],
})
Thanks for your help!
I am using in my next js application Cypress and Jest. Running jest --coverage i get an error:
STACK: Error: Duplicate plugin / preset detected.
If you 'd like to use two separate instances of a plugin,
they need separate names, e.g.
plugins: [
['some-plugin', {}],
['some-plugin', {}, 'some unique name'],
]
This is my .babelrc file:
{
"presets": ["next/babel"],
"plugins": ["istanbul"]
}
Who faced with the same issue and how to solve it to get the coverage?
I found the solution that helped to solve the problem.
I had to add the env variable to the .babelrc
{
"env": {
"component": {
"plugins": [
"istanbul"
]
}
}
}
Then add it to cypress.config.js
const { defineConfig } = require('cypress');
const { devServer } = require('#cypress/webpack-dev-server');
const webpackConfig = require('./config/cypress.webpack.config.js');
const codeCoverageTask = require('#cypress/code-coverage/task');
module.exports = defineConfig({
viewportWidth: 1000,
viewportHeight: 660,
video: false,
env: {
BABEL_ENV: 'component',
},
component: {
devServer(devServerConfig) {
return devServer({
...devServerConfig,
framework: 'react',
webpackConfig,
});
},
specPattern: 'src/**/*.cy.{js,ts,jsx,tsx}',
setupNodeEvents(on, config) {
codeCoverageTask(on, config);
return config;
},
},
});
(4:3) Nested CSS was detected, but CSS nesting has not been configured correctly.
Please enable a CSS nesting plugin before Tailwind in your configuration.
See how here: https://tailwindcss.com/docs/using-with-preprocessors#nesting
My postcss.config.js file:
plugins: [
"postcss-import",
"tailwindcss/nesting",
"tailwindcss",
"autoprefixer",
],
};
I tried to write it down like this:
plugins: {
"postcss-import": {},
"tailwindcss/nesting": {},
tailwindcss: {},
autoprefixer: {},
},
};
and like this:
plugins: [
require("postcss-import"),
require("tailwindcss/nesting"),
require("tailwindcss"),
require("autoprefixer"),
],
};
Github repo with this project: https://github.com/frkam/test-app
When I try to use nesting, i get this:enter image description here
As Ed Lucas mentioned above CRA5 does not allow to override postcss.config
But at the moment you can use something like craco
An Example you can find in Felipe Zavan comment
This works for me. So I hope it will be helpful :)
My craco.config
module.exports = {
style: {
postcss: {
loaderOptions: (postcssLoaderOptions) => {
postcssLoaderOptions.postcssOptions.plugins = [
require('tailwindcss/nesting'),
require('tailwindcss'),
require('postcss-mixins'),
'postcss-flexbugs-fixes',
[
'postcss-preset-env',
{
autoprefixer: {
flexbox: 'no-2009',
},
stage: 0,
},
],
]
return postcssLoaderOptions
},
},
},
}
I'm using nextjs. I'm using sass For style layout. All styles are named with *.module.scss, and they are placed in the components folder and its subfolders and not in the styles folder mentioned by the nextjs document. I don't know how to config this situation in next.config.js. Content of my next.config.js is now:
const withPlugins = require("next-compose-plugins");
const nextTranslate = require("next-translate");
const withPWA = require("next-pwa");
const withBundleAnalyzer = require("#next/bundle-analyzer")({
enabled: process.env.ANALYZE === "true",
});
// next.js configuration
const nextConfig = {
images: {
domains: ['ibexcdn.com'],
},
};
module.exports = withPlugins(
[
[
nextTranslate,
{
webpack: (config, { isServer, webpack }) => {
return config;
},
},
],
withBundleAnalyzer,
[
withPWA,
{
pwa: {
disable: process.env.NODE_ENV === "development",
dest: 'public',
runtimeCaching: [
{
urlPattern: /.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
handler: 'NetworkFirst',
options: {
cacheName: 'static-font-assets',
expiration: {
maxEntries: 4,
maxAgeSeconds: 7 * 24 * 60 * 60 // 7 days
}
}
}
]
},
},
],
],
nextConfig,
);
I have a project using ReactJS, Webpack, TailwindCSS, and when I run the build command, the CSS file built is TOO BIG:
Here is my postcss.config.js
const tailwindcss = require("tailwindcss");
module.exports = {
plugins: [
tailwindcss,
require("autoprefixer"),
require("cssnano")({
preset: "default",
}),
],
};
And here is my tailwind.config.js:
module.exports = {
purge: ["./src/**/*.{js,jsx,ts,tsx,vue}"],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
colors: {
greenLight: "#1db954",
greyDark: "#121212",
greyLight: "#282828",
greyLighter: "#282828",
backgroundLight: "rgba(40,40,40,0.4)",
},
fontFamily: {
custom: ["Circular Spotify Tx T Black"],
},
container: {
screens: {
mobile: "23rem",
},
},
},
},
variants: {
extend: {},
},
plugins: [],
};
And this is ```webpack.config.js
I have searched a lot, but can not figure it out! Thanks.