How to integrate PostCSS

[natemoo-re]

How to integrate PostCSS

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

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

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

[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]

Added a note about PostCSS using .cjs in f369f5e.