purgecss: Ignore comment doesnt work for importing css into sass

add ! after /*

These works on webpack 4

/*! purgecss start ignore */
/*! purgecss end ignore */

I read on cssnano docs how to preserve the comments https://cssnano.co/optimisations/discardcomments/

Had the same issue, tried various proposed solutions and in the end removing the .css is what helped solve it

Hey @JakubRobotka, I also have a project using leaflet and purgecss. What worked for me was to use the whitelistPatterns options, with these two specific patterns:

        whitelistPatterns: [/leaflet/, /marker/],

EDIT: I thought I tested it properly, but when I rolled this out to production it didn’t work. The solution of @viperfx07 above (adding an exclamation mark) does work.

I guess the takeway is to not test and deploy on Friday 😛.

I ran into the same issue today. It was solved by omitting the .css extension from the filename when importing. In my case I was importing CSS from the tippy library:

This works:

// app.scss

/* purgecss start ignore */
@import "~tippy.js/dist/tippy";
@import "~tippy.js/themes/light";
/* purgecss end ignore */

This doesn’t:

// app.scss

/* purgecss start ignore */
@import "~tippy.js/dist/tippy.css";
@import "~tippy.js/themes/light.css";
/* purgecss end ignore */

I’m not sure it’s an issue with PurgeCSS, since the ignore block works fine (if I put a rule in it between the imports, that rule is correctly ignored). Maybe it has something to do with how Webpack or Sass resolves imports based on the file type. Either way, hope this helps you too!

Same here 😢

I am having the same issue. But the file I am trying to import doesn’t have a consistent prefix making the whitelistPatterns unusable.

I found out that css files can not be ignored, but sass files can. Issue can be fixed by creating a sass file with the css content.

So instead of

@import "~package/dist/package.css";

Import your own file

@import "vendor/package.scss";

Or import the sass file of the package

@import "~package/src/package.scss";

Still having this issue @Ffloriel can you reopen this issue?

@dhazeley This is because it is not necessary that the imported antd.css would end up exactly between the comments when css is compiled. In fact it is quite possible that it would be in a separate vendor.css file. You can check this by disabling purge css and inspecting the built css.

The only solution left is to either use a combination of whitelistPatterns and whitelistPatternsChildren options to see if you could whitelist it completely. Or you might want to remove purgecss and check what Ant Design recommends for managing CSS size.

Had the same issue sometimes it work, sometimes it doesn’t.

/* purgecss start ignore */
/* purgecss end ignore */

Package.json I used:

scripts": {
    "start": "npm-run-all -p watch:css start:react",
    "build": "npm-run-all build:css build:react ",
    "start:react": "react-scripts start",
    "build:react": "react-scripts build",
    "test": "react-scripts test --verbose",
    "eject": "react-scripts eject",
    "lint:ts": "tslint 'src/**/*.{ts,tsx,js}'",
    "build:css": "postcss src/styles/tailwind.css -o src/styles/main.css --env production",
    "watch:css": "postcss src/styles/tailwind.css -o src/styles/main.css --watch"
  },

postcss.config.js

module.exports = {
plugins: [
  require("postcss-import"),
  require("tailwindcss"),
  require("postcss-nested"),
  process.env.NODE_ENV === "production" && require("autoprefixer"),
  process.env.NODE_ENV === "production" &&
    require("@fullhuman/postcss-purgecss")({
      content: ["./src/**/*.tsx", "./src/**/*.ts", "./public/index.html"],
      defaultExtractor: (content) => content.match(/[\w-:/]+(?<!:)/g) || [],
    }),
],
};

I hope good people can help me on this 👍