Ignore comment doesnt work for importing css into sass

[JakubRobotka]

Describe the bug First of all, i love your plugin. It works really good. After working with some libraries like 'leaflet' that has pure css or some libraries using less and compiled css, i found issue while importing those styles into project. It remove whole styles.

I am using webpack with sass-loader, postcss (autoprefix) and MiniCssExtractPlugin. I tryed using whitelisting and others stuff (even thought its not nice to whitelist all possible libraries like that), that works in development. But in production whitelisting doesn't works either. Even turned off removing comments from node-sass, but then all i could see is only comments for ignoring import css and empty content.

/* purgecss ignore */

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

or

/* purgecss start ignore */
@import "~leaflet/dist/leaflet.css";
/* purgecss end ignore */

even tryed to importing in separate file and ignore importing sass file.

/* purgecss start ignore */
@import "leaflet";
/* purgecss end ignore */

Nothing works. All i can think of is concat after purging my main file.

[adamhammes]

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/],

[clintongreen]

It would be awesome if it worked this way. I have to add comments in each CSS file I want to whitelist. I'd much rather whitelist the whole imported file.

[Livijn]

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

[viperfx07]

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/

[laurensgroeneveld]

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!

[mwmcode]

is it supposed to work in regular css files?

/*! purgecss start ignore */
@tailwind base;
@tailwind components;
@import "./utils.css";
@import "./main.css";
@import "./custom.css";
/*! purgecss end ignore */

@tailwind utilities;

I tried both with and without !... it's still purging those @imported css files..

Am I missing something here??

[vedmant]

I have the same issue as @mustafawm what's interesting is that it works ok on node v12 but not on node v8.

[mwmcode]

I will have to check again tomorrow, but I think I was running Node v12.14.0

What version did you test on?

[vedmant]

@mustafawm It works ok on my local where I have node v12, but fails to work according to ignore comments on node v8 on my server. I also see the difference in size of compiled css file.

[mwmcode]

@vedmant I tried different Node versions (10, 12, 13) and the issue is still there on all :\

[nghiepdev]

+1 The issue is still there on all.

[chrispage1]

+1 Also experiencing this!

[MaximVanhove]

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";

[kyashrathore]

I had same issue I was having Purgecss plugin in Webpack config file and was also having a postcss.config.js, removing Purgecss from Webpack config and put in postcss.config.js worked.

[dhazeley]

I am having the same issue trying to whitelist ant design (antd) css files with the following

/*! purgecss start ignore */

@import '~antd/dist/antd.css';

/*! purgecss end ignore */

[afzalsayed96]

@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.

[riccardogioratoatoms]

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

[techouse]

Same here 😢

[Naokimi]

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

[kevin700brands]

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 👍