anantoghosh / gatsby-plugin-purgecss Goto Github PK
View Code? Open in Web Editor NEWGatsby plugin for purgecss. Removes unused css/sass/less/stylus. Supports tailwind, bootstrap, bulma etc.
Gatsby plugin for purgecss. Removes unused css/sass/less/stylus. Supports tailwind, bootstrap, bulma etc.
Is your feature request related to a problem? Please describe.
The plugin log a lot of content, logging service have a log size.
Describe the solution you'd like
A simpler option used to disable large printing in console
This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.
These updates are awaiting their schedule. Click on a checkbox to get an update now.
@types/jest
, jest
, ts-jest
)These updates have all been created already. Click a checkbox below to force a retry/rebase of any.
node
, @types/node
).circleci/config.yml
.github/workflows/node.js.yml
actions/checkout v3
actions/setup-node v3
actions/cache v3
.node-version
node 18
package.json
yarn 3.3.1
packages/gatsby-plugin-purgecss/package.json
fs-extra ^11.1.0
loader-utils ^3.2.1
merge-anything ^5.1.4
purgecss ^4.1.3
@release-it/conventional-changelog ^8.0.0
@types/fs-extra ^11.0.0
@types/jest ^27.5.2
@types/loader-utils ^2.0.3
@types/node ^18.11.18
@types/webpack ^5.28.0
@typescript-eslint/eslint-plugin ^8.0.0
coveralls ^3.1.1
eslint ^9.0.0
eslint-config-good-code ^1.1.0
eslint-plugin-sonarjs ^1.0.0
eslint-plugin-unicorn ^55.0.0
execa ^9.0.0
gatsby ^5.3.3
jest ^27.5.1
release-it ^17.0.0
ts-jest ^27.1.5
ts-node ^10.9.1
typescript ^5.0.0
gatsby ^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0
packages/test_build/package.json
gatsby ^5.3.3
gatsby-plugin-less ^7.3.0
gatsby-plugin-sass ^6.3.1
gatsby-plugin-stylus ^5.3.0
less ^4.1.3
react ^18.2.0
react-dom ^18.2.0
sass ^1.57.1
Verify if it is a postcss bug
First verify that gatsby-plugin-purgecss is working by setting the option printRejected: true
which will print out the list of removed selectors.
If the plugin is working, but the css is not getting purged as you would have hoped then it's very likely a purgecss issue. File for purgecss related bugs here https://github.com/FullHuman/purgecss/issues.
Describe the bug
Please provide clearer documentation on the content option. I have read through the section on it and googled regex patterns but cannot quite understand what the snippet of code below is doing or how it works. I need to modify this so that css from npm packages like bootstrap is not removed from my site, but cannot figure out how to change this code to get that to work and what each part of the code means. It would be very helpful if you dissected the code and provided explanations of each part, for example what /**/ does, what (*.d) does, what {ts,js} does, etc.
content: [
path.join(process.cwd(), 'src/**/!(.d).{ts,js,jsx,tsx}'),
path.join(process.cwd(), 'anotherFolder/!(.d).{ts,js,jsx,tsx}')
];
To Reproduce
Add npm packages such as bootstrap to a site that uses purgecss and it will not work correctly because the css in the package will be removed.
Configs
content: [
path.join(process.cwd(), 'src/**/!(.d).{ts,js,jsx,tsx}'),
path.join(process.cwd(), 'anotherFolder/!(.d).{ts,js,jsx,tsx}')
];
Please remove any personal information present in the files.
Expected behavior
CSS from bootstrap and other npm packages is not purged
Additional information
N/A
This plugin is not compatible.
Is it possible to upgrade it ( myself ) to work correctly for Gatsby v4. Or is this already planned.
I have found that ignore
and purgeOnly
options work with gatsby develop
but are ignored with gastby build
.
If I check the removed selectors everything looks fine, exactly the same happens in develop and build, but in the latter finally all the CSS is purged ignoring the restrictions.
gatsby-plugin-purgecss: Only processing...
gatsby: 2.24.9
gatsby-plugin-less: 4.0.6
gatsby-plugin-sass: 2.3.17
gatsby-plugin-purgecss: 5.0.0
The gatsby-plugin-purgecss
configuration is right after gatsby-plugin-less
Is your feature request related to a problem? Please describe.
purgecss
will purge all classes from themes (other than the current project directory).
For example, a theme can have a file ArticleTemplate.js
that includes Tailwind classes. These classes will be purged by gatsby-plugin-purgecss
.
Describe the solution you'd like
gatsby-plugin-purgecss
will recursively check all Gatsby themes/plugins before purging css.
This would provide the best user experience as well as the expected behavior as Gatsby themes are going to be a big part of Gatsby in the future.
Describe alternatives you've considered
When registering gatsby-plugin-purgecss
, I think an extra option of include
can be helpful. Something like this:
module.exports = {
plugins: [
{
resolve: "gatsby-plugin-purgecss",
options: {
include: [require("my-gatsby-theme-1"), require("my-gatsby-theme-2")]
}
}
]
}
With this, purgecss
will also check these directory before purging the classes.
I have a gatsby-theme
project and I'm using tailwindui
for designing UI elements.
After enabling gatsby-plugin-purgecss
, the design is crashed. PurgeCss removed tailwindui
style completely.
gatsby-config.js
....
return {
plugins: [
`gatsby-plugin-postcss`,
{
resolve: `gatsby-plugin-purgecss`,
options: {
printRejected: true,
develop: false,
tailwind: true,
}
}
]
}
...
post.config.js
const config = require("./tailwind.config");
module.exports = () => ({
plugins: [require("tailwindcss")(config)],
});
tailwind.config.js
module.exports = {
theme: {
extend: {},
},
variants: {},
plugins: [
require('@tailwindcss/ui')
],
};
Is your feature request related to a problem? Please describe.
I am not quite sure if this is a bug or intended behaviour. When running this plugin with develop: true
the css is purged which helps to keep the development environment act like production. But code changes like adding new classes to a component will not rerun purgecss. Therefore I need to restart gatsby develop
to see the changes when using new classes.
Describe the solution you'd like
it would be great to use purgecss during development and still see all changes resulting from new classes right away.
Verify if it is a postcss bug
First verify that gatsby-plugin-purgecss is working by setting the option printRejected: true
which will print out the list of removed selectors.
If the plugin is working, but the css is not getting purged as you would have hoped then it's very likely a purgecss issue. File for purgecss related bugs here https://github.com/FullHuman/purgecss/issues.
Describe the bug
Gatsby 5 is out, but gatsby-plugin-purgecss only supports gatsby@"^2.0.0 || ^3.0.0 || ^4.0.0"
To Reproduce
Sample package.json to repro:
"name": "test",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"gatsby-plugin-purgecss": "^6.1.2",
"gatsby": "^5.1.0"
}
}
Error with npm:
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/gatsby
npm ERR! gatsby@"^5.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer gatsby@"^2.0.0 || ^3.0.0 || ^4.0.0" from [email protected]
npm ERR! node_modules/gatsby-plugin-purgecss
npm ERR! gatsby-plugin-purgecss@"^6.1.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Configs
Expected behavior
Support latest gatsby version as a peer dependency
Additional information
n/a
Branch | Build failing 🚨 |
---|---|
Dependency | less |
Current Version | 3.7.1 |
Type | devDependency |
This version is covered by your current version range and after updating it in your project the build failed.
less is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.
There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.
Your Greenkeeper Bot 🌴
I added MDX and noticed some Tailwind classes were being incorrectly purged from my MDX files. Looking at the source I see that the Tailwind extractor only applies to these extensions:
gatsby-plugin-purgecss/src/gatsby-node.js
Line 54 in c1be249
Would it be possible to generalize it a bit, ideally so it respects the content
option? (I had already updated that to include mdx
extension types).
It seems that the warning
Tailwind is not purging unused styles because no template paths have been provided.
If you have manually configured PurgeCSS outside of Tailwind or are deliberately not
removing unused styles, set `purge: false` in your Tailwind config file to silence
this warning.
keeps coming when running gatsby build
.
Not sure how to provide the template path.
Thanks for creating this!
I use TailwindCSS + PurgeCSS with Gatsby via a custom setup in gatsby-node.js
. It works just fine, but it would be nice to hide the implementation details in a plugin like this one.
However, I notice in the docs that this plugin cannot be used with postcss because:
gatsby-plugin-purgecss
is executed before postcss loader
Is there a reason for this order? If possible, it would be useful to run purgecss after postcss to allow TailwindCSS or other setups that require postcss to run first.
There was a previous ticket that was similar, but not was closed because it had a slightly different problem.
I want Purgecss to run run against the rendered html, not against the jsx components. I have a CMS that sends classes from a color swatch picker. I don't want to whitelist all of them, my css file can go from 40kb up to 2020kb.
Having the option to parse the final rendered html instead would make this easy, but I'm guessing the final html isn't ready at the point the css file is being prepared?
Hi,
Would you consider adding support for TypeScript ?
I have this message when I'm trying to use the plugin in a .tsx file :
TS7016: Could not find a declaration file for module 'gatsby-plugin-breadcrumb/'. '****/node_modules/gatsby-plugin-breadcrumb/index.js' implicitly has an 'any' type. Try 'npm i --save-dev @types/gatsby-plugin-breadcrumb' if it exists or add a new declaration (.d.ts) file containing 'declare module 'gatsby-plugin-breadcrumb/';'
Thanks
What's the problem?
I also use reactstrap with Gatsbyjs and your plugin and would like to continue using it. Unfortunately the CSS classes are removed from reactstrap. Give you a solution or can you add a feature that takes third party react elements into account?
Describe the solution you'd like
An automatic detection of CSS that detects third party react elements or a feature like tailwind: true
I am using a Loadable component. That components has some elements that use css selectors. But as this component is Loadable gatsby-plugin-purgecss
removes the selectors inside that component.
Is there a way to solve this issue ?
There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.
File: renovate.json
Error type: Invalid JSON (parsing failed)
Message: Syntax error: expecting end of expression or separator near ue
"pack
Hee there,
i'm trying to use clsx to do some logic for dynamicly building the classes based on the props of a component. The classes are all bootstrap classes that are added and formed by clsx.
am i correct in assuming purgecss only reads the actually added names in className
attributes in the js files? and not also the dynamically created ones inside a component or using clsx?
i currently have a button component like this
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
const Button = ({ color, outline, size, component, href, children, className, ...rest }) => {
const Component = component || href !== undefined ? 'a' : 'button';
return (
<Component
href={href}
className={clsx(
'btn',
{
[`btn-${outline ? 'outline-' : ''}${color}`]: color,
[`btn-${size}`]: ['sm', 'lg'].includes(size),
},
className,
)}
{...rest}
>
{children}
</Component>
);
};
Button.propTypes = {
children: PropTypes.any.isRequired,
className: PropTypes.string,
color: PropTypes.oneOf(['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', 'link']),
component: PropTypes.any,
href: PropTypes.string,
size: PropTypes.oneOf(['sm', 'md', 'lg']),
outline: PropTypes.bool,
};
Button.defaultProps = {
className: undefined,
color: 'primary',
component: undefined,
href: undefined,
size: 'md',
outline: false,
};
export default Button;
when i use this in a page component like this
<Button size="lg" color="secondary" type="button">
click me
</Button>
it purges all button classes defined by bootstrap. Is there a way of fixing this without the need to whitelist everything that breaks?
Let's say that we have the fallowing code
import React from 'react'
import classnames from 'classnames'
import '@material/button/mdc-button.scss'
const Button = ({ raised, unelevated, outlined, dense, className, children }) => (
<button
className={classnames('mdc-button', className, {
'mdc-button--raised': raised,
'mdc-button--unelevated': unelevated,
'mdc-button--outlined': outlined,
'mdc-button--dense': dense
})}
>
{children}
</button>
)
export default Button
Expected behavior
If in my app I only use <Button>
and <Button raised>
, mdc-button
and mdc-button--raised
should be kept, but mdc-button--unelevated
, mdc-button--outlined
and mdc-button--dense
should be discarded.
Current behavior
All css classes mentioned above are kept.
Possible solution
Use the server side rendered html to determine exactly what css classes are being used and which are not. Inside gatsby-ssr.js
you can get the html, but I do not know how to get the css.
If it helps here is a snippet that would get the body component of the html .
const { renderToString } = require('react-dom/server');
exports.replaceRenderer = ({ bodyComponent }) => {
const bodyHTML = renderToString(bodyComponent);
}
Describe the bug
Custom purgeCSSOptions.content override is not applied (because it always uses default value).
Line with bug - permalink
void new Purgecss()
.purge({
...options.purgeCSSOptions,
css: [{ raw: source }],
content: [path.src],
})
content: [path.src]
will always override same property from options.purgeCSSOptions
To Reproduce
Try to use purgeCSSOptions.content override.
Expected behavior
Custom purgeCSSOptions.content override is working.
Describe the bug
since purgecss is now included in tailwind, className
styles appear to be purged if purge
object is present in tailwind.config.js
even if the purge
object is empty {}
To Reproduce
"gatsby": "^2.24.79",
"gatsby-plugin-postcss": "^3.0.3",
"gatsby-plugin-purgecss": "^5.0.0",
"tailwindcss": "^1.9.4"
Expected behavior
tailwind styles in className
should not be purged
Additional information
This may just be a case of adding documentation to ensure the purge: {}
object is not present on the tailwind config when using gatsby-plugin-purgecss
Tailwind does actually give a warning suggesting this
warn - Tailwind is not purging unused styles because no template paths have been provided.
warn - If you have manually configured PurgeCSS outside of Tailwind or are deliberately not removing unused styles, set `purge: false` in your Tailwind config
warn - https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
basically set purge: false
in tailwind.config.js
if using gatsby-plugin-purgecss
should fix it I think
Is your feature request related to a problem? Please describe.
I noticed that purge-css is only running during on gatsby build
. It would be really awesome to have the possibility to run this using gatsby develop
. It may be extremely complicated to implement, but maybe i'm missing something here
Describe the solution you'd like
If a change is happening the code during running the gatsby develop
, gatsby picks up that change and reloads the page in the browser.It would be really nice if purgecss could run before the site is delivered
Describe alternatives you've considered
Additional context
Please close this issue if this is already implemented, i was not seeing any sign in the code for this, but again, maybe i'm missing something
Verify if it is a postcss bug
Describe the bug
Error: /Users/venkateshs/bhava/apps/portfolio2018/node_modules/gatsby-plugin-purgecss/node_modules/fs-extra/lib/mkdirs/make-dir.j s:86
} catch {
^
SyntaxError: Unexpected token {
To Reproduce
Installed the plugin
Added it to the last of my plugin list
ran gatsby build
Configs
As mentioned in the documentation
Expected behavior
For the plugin to be properly installed and purge css on production
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.