Postcss plugins not applied

[khusseini]

I am trying to optimize the generated CSS files from my Vue3 + Typescript + Vite project. The project is based on https://github.com/wuruoyun/vue-component-lib-starter and I am trying to get postcss-combine-media-query and postcss-combine-duplicated-selectors to work.

This is my vite.config.ts:

const path = require("path");
const { defineConfig } = require("vite");
import vue from "@vitejs/plugin-vue";

const packageName = "complib-faasaf-io";

module.exports = defineConfig({
  plugins: [vue()], // to process SFC
  css: {
    postcss: {
      plugins: [
        require("postcss-combine-media-query"),
        require("postcss-combine-duplicated-selectors"),
        require("postcss-prettify"),
      ],
    },
  },
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: packageName,
      formats: ["es"], // adding 'umd' requires globals set to every external module
      fileName: (format) => `${packageName}.${format}.js`,
    },
    rollupOptions: {
      // external modules won't be bundled into your library
      external: ["vue"], // not every external has a global
      output: {
        // disable warning on src/index.ts using both default and named export
        exports: "named",
        // Provide global variables to use in the UMD build
        // for externalized deps (not useful if 'umd' is not in lib.formats)
        globals: {
          vue: "Vue",
        },
      },
    },
    emptyOutDir: false, // to retain the types folder generated by tsc
  },
});

Can anyone spot what I am doing wrong?

[UDPATE]: It seems that the plugins are applied, however I have to run postcss another time after the build process. Does postcss only run after each scss file has been parsed? I am confused to how this is implemented in vite.

[aaronstezycki]

I've also just diagnosed this issue with vite and postcss-preset-env. Has there been any fix or work around for this?

[aaronstezycki]

@khusseini Strange, did this also occur on your production builds? It has for me. Vite should run PostCSS after it builds anyway 🤷🏻‍♂️

How did you run it after vite? via a npm script?

[khusseini]

@aaronstezycki I'm also confused on how PostCSS is executed in Vite. So to be able to run the plugins I have mentioned above I need to run postcss via npm script, or standalone. I have had the problem for dev and production builds.

[aaronstezycki]

Ok I just figured out my issue, and im kicking myself for not having caught it sooner. It should work, and fire postcss as soon as vite builds.

Vite does automatically pull in a postcss.config.js file and that will do anything you want postcss to do for you, so above change your vite.config.js to (remove the CSS part):

const path = require("path");
const { defineConfig } = require("vite");
import vue from "@vitejs/plugin-vue";

const packageName = "complib-faasaf-io";

module.exports = defineConfig({
  plugins: [vue()], // to process SFC
  build: {
    lib: {
      entry: path.resolve(__dirname, "src/index.ts"),
      name: packageName,
      formats: ["es"], // adding 'umd' requires globals set to every external module
      fileName: (format) => `${packageName}.${format}.js`,
    },
    rollupOptions: {
      // external modules won't be bundled into your library
      external: ["vue"], // not every external has a global
      output: {
        // disable warning on src/index.ts using both default and named export
        exports: "named",
        // Provide global variables to use in the UMD build
        // for externalized deps (not useful if 'umd' is not in lib.formats)
        globals: {
          vue: "Vue",
        },
      },
    },
    emptyOutDir: false, // to retain the types folder generated by tsc
  },
});

and then create a postcss.config.js:

module.exports = () => {
  return {
    plugins: [
      require('autoprefixer')(),
      require("postcss-combine-media-query"),
      require("postcss-combine-duplicated-selectors"),
      require("postcss-prettify"),
    ],
  };
};

Try that and see if it then starts building correctly.

[khusseini]

Thank you @aaronstezycki, I will try it as soon as I can, however it could take a couple of weeks (too swamped with work related tasks :( )
I'll mark your comment as an answer though already.

[tereshhhchenko]

Thanks @aaronstezycki! Removing css entry in Vite config worked for me

[Tajcore]

I had a similar issue, the problem I was facing is that when I added vite and tailwind support (moving away from webpack) my existing project was still using cjs but the configuration I had for vite and tailwind was using esm, so I had fully converted my project to esm standards

[sameerdash2]

I had the opposite issue: vite would not recognize a standalone postcss.config.js; it needed PostCSS to be configured inside vite.config.ts.

I think it has to do with ESM modules. Vite only recognizes postcss.config.js if it's in CJS format.

So a postcss.config.js in ESM format does not work (even with the css entry removed from vite config):

// postcss.config.js
// ESM module. does not work.
import purgecss from '@fullhuman/postcss-purgecss';

export const plugins = [
  purgecss({
    content: [
      './index.html',
      './src/**/*.{vue,js,ts}'
    ],
    variables: true,
    safelist: {
      // Keep leaflet classes
      standard: [/leaflet-/]
    }
  })
];

what does work is including the postcss config inside of vite.config.{js,ts}:

// vite.config.ts
import {fileURLToPath, URL} from 'node:url';

import {defineConfig} from 'vite';
import purgecss from '@fullhuman/postcss-purgecss';

// https://vitejs.dev/config/
export default defineConfig({
  ...
  css: {
    postcss: {
      plugins: [
        purgecss({
          content: [
            './index.html',
            './src/**/*.{vue,js,ts}'
          ],
          variables: true,
          safelist: {
            // Keep leaflet classes
            standard: [/leaflet-/]
          }
        })
      ]
    }
  }
});

Given that vite has deprecated CJS, it looks like the only option now is to embed the config in vite.config.ts.