anantoghosh / gatsby-plugin-purgecss Goto Github PK

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.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• chore(deps): update jest monorepo to v29 (major) (@types/jest, jest, ts-jest)
• chore(deps): update yarn to v4
• fix(deps): update dependency merge-anything to v6
• fix(deps): update dependency purgecss to v6

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update yarn to v3.8.4
• chore(deps): update actions/cache action to v4
• chore(deps): update actions/checkout action to v4
• chore(deps): update actions/setup-node action to v4
• chore(deps): update dependency node to v20 (node, @types/node)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

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.

• I have verified that this is not a purgecss issue.

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.

• I have removed all personal information.

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.

• I have verified that this is not a purgecss issue.

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

• I have removed all personal information.

Expected behavior
Support latest gatsby version as a peer dependency

Additional information
n/a

Version 3.8.0 of less was just published.

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.

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:

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);
}

• I have verified that this is not a purgecss issue.

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

• I have verified that this is not a purgecss issue.

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

• I have removed all personal information.

Expected behavior
For the plugin to be properly installed and purge css on production