How to integrate PostCSS

[equinusocio]

Hello, I'm trying to enable PostCSS but the configuration file (postcss.config.js) inside the project root is not recognized.

I'm also trying to integrate PostCSS by using the official snowpack plugin, but it doesn't seem to work. I've created both snowpack.config.json and postcss.config.js.

EDIT: It seems that only .postcssrc file is recognised.

[natemoo-re]

I definitely want this to be super simple out of the box! In this case I think it might be because Microsite uses "type": "module" in a project's package.json file. PostCSS only picks up on CJS, so try postcss.config.cjs?

Microsite automatically uses the official Snowpack plugin if it picks up on a PostCSS configuration file (via cosmiconfig). Custom snowpack.config.js files is something I want to add for the next release, though.

[pterblgh]

I can confirm that PostCSS works completely fine if someone renames the default postcss.config.js file to postcss.config.cjs - actually the same goes to tailwind.config.js as well.

There's one thing I haven't found a solution yet. Tailwind CSS provides a way to remove unused CSS classes from the final built CSS using purge-css under the hood. Even if providing NODE_ENV=production option for the npm run build command for some reason PostCSS/Tailwind does not pick up this config thus at the end of the process the CSS file emitted is not "tree-shaked" and not even minified - which should be the default behaviour for Tailwind if NODE_ENV is set to production as far as I know.

This is how my postcss.config.cjs file looks like:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

And here is what's in the tailwind.config.cjs file:

module.exports = {
 // This should instruct Tailwind to purge CSS based on these files
  purge: ['./src/**/*.tsx'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

Will take another look later, my guess is that NODE_ENV=production does not propagate correctly from the command line to Tailwind through @snowpack/plugin-postcss - but again, this is just a guess.

[equinusocio]

I can confirm, using postcss.config.cjs instead of postcss.config.js works as expected. I think this should be mentioned inside the doc because using .cjs it's not so popular yet.

[natemoo-re]

I'll definitely update the docs to mention this! Certainly on the bleeding edge of ESM in Node here.

As for Tailwind and PurgeCSS, I'll see if I can get it working and add an example to the project. I have a suspicion it's a hidden side-effect of the multi-stage build that happens in the background.

[natemoo-re]

Added a note about PostCSS using .cjs in f369f5e.

[natemoo-re]

I added a working Tailwind example in cadd0a5. Since Tailwind doesn't currently support a tailwind.config.cjs file (I'm planning to make a PR to fix this), you need to actually require the config from postcss.config.cjs and then pass it to the tailwindcss plugin. Not ideal, but it works for now. Once Tailwind supports a .cjs config file this should be much easier.