debugging when fonts are not being purged

[happysalada]

Hi, thank you for the package!

I am running postcss and webpack together. I was hoping to use this package. It looks like purgefonts is not used in my pipeline even though I added to postcss. My postcss config is

module.exports = ({ mode }) => ({
  plugins: [
    require("postcss-import"),
    require("tailwindcss")("./tailwind.config.js"),
    require("autoprefixer"),
    ...(mode === "production" ? [
      purgecss,
      require('postcss-purgefonts')({}),
      require("cssnano")
    ] : []),
  ],
});

(purgecss is just a custom purgecss config

I also have the following webpack config

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");

const OUTPUT_PATH = path.resolve(__dirname, "../../priv/static");

module.exports = {
  entry: {
    app: ["./js/app.js", "./css/app.css"],
    "factsheet-nav": "./js/factsheet-nav.js",
    "email-validation": "./js/email-validation.js",
    tailwind: "./css/tailwind.css",
    factsheet: "./js/factsheet.js",
    dashboard: "./js/dashboard.js",
    "resources-index": "./js/resources-index.js",

    // product
    "product-new": "./js/product/new.js",

    "settlement-contract-new": "./js/settlement-contract/new.js",

    "password-reset-new": "./js/password-reset/new.js",
    "password-reset-edit": "./js/password-reset/edit.js",

    "fxww-payment": "./js/fxww-payment.js",
  },
  output: {
    path: OUTPUT_PATH,
    filename: "js/[name].js",
    chunkFilename: "js/[name].chunk.js",
    libraryTarget: "umd",
    library: "[name]",
  },
  externals: {
    jquery: "jQuery",
    moment: "moment",
  },
  resolve: {
    extensions: [".js"],
    modules: ["deps", "node_modules"],
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: [/node_modules/],
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"],
          plugins: [
            "@babel/plugin-transform-runtime",
            "@babel/plugin-proposal-object-rest-spread",
          ],
        },
      },
      {
        test: /tailwind\.css$/,
        use: [
          {
            loader: MiniCssExtractPlugin.loader,
            options: {publicPath: ''}
          },
          { loader: "css-loader", options: { importLoaders: 1 } },
          "postcss-loader",
        ],
      },
      {
        test: /\.css$/,
        exclude: [/tailwind/],
        use: [
          MiniCssExtractPlugin.loader,
          { loader: "css-loader", options: { importLoaders: 1 } },
        ],
      },
      {
        test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[\da-z]+)?$/,
        loader: 'file-loader',
        options: {
          name: '/fonts/[name].[ext]',
        },
      }
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      // Options similar to the same options in webpackOptions.output
      // both options are optional
      filename: "./css/[name].css",
      chunkFilename: "./css/[id].css",
    }),
    new CopyWebpackPlugin({ patterns: [{ from: "./static", to: "./" }] }),
  ],
};

Is there a way to debug why the fonts are not being purged? I'm also wondering if maybe the webpack font file loader is preventing this plugin from being run. My fonts are originally in css/webfonts. The file loader is putting them in /fonts. I'm guessing that is why the purgefonts can't find them.

[ericpaulbishop]

The location that purgecss will look for your fonts is the location specified in your CSS (which you didn't include in your bug report above). Make sure that the font path specified in your initial CSS files (before any processing by postcss) is valid.

One good way to debug (I don't know your exact setup, so I can't offer more specific advice) is to run postcss without webpack, and see if that works. Then after confirming that works, figure out how to make sure that webpack is loading the proper font files. If that doesn't work, then it's a problem with postcss/plugin configuration (or a bug! please report more details if it is).

Without knowing more, that's the most I can say to help.

[happysalada]

First of all, thanks a lot for taking time to read this!

Here is the inside of the font-awesome.css file

 @font-face {
   font-family: 'Font Awesome 5 Free';
   font-style: normal;
   font-weight: 400;
   font-display: auto;
   src: url("/fonts/fa-regular-400.eot");
   src: url("/fonts/fa-regular-400.eot?#iefix") format("embedded-opentype"),
        url("/fonts/fa-regular-400.woff2") format("woff2"),
        url("/fonts/fa-regular-400.woff") format("woff"),
        url("/fonts/fa-regular-400.ttf") format("truetype"),
        url("/fonts/fa-regular-400.svg#fontawesome") format("svg"); }

Running postcss with the following npx postcss css -d postcss I see that an empty fonts directory is being created. I'm guessing that the fonts are not being found properly.

For information here is my directory layout

/css/font-awesome.css
/fonts/*.woff
postcss.config.js

the content of the font-awesome.css file is the one I pasted above.

Perhaps I have to use relative path in the css? Or change the to option in the plugin config.