iTranslated by AI

The content below is an AI-generated translation. This is an experimental feature, and may contain errors. View original article
📦

A Tale of Struggles with Parcel + TailwindCSS (+ Simpacker)

に公開
PostCSS
parcel
失敗談
tech

Note
I got so stuck while working on this that I lost track of what was what,
so the following description might contain some misunderstandings 😭

TL;DR

  • The status of Parcel + PostCSS 8 is not very good.
  • parcel-plugin-bundle-manifest, which is required for simpacker, does not support Parcel 2 (parcel@next / parcel@nightly).
  • Parcel + postcss-import does not work well.
    • Parcel 2 + postcss-import is fine.
  • Conclusion: You need to downgrade related packages to the PostCSS 7 compatible state and then run yarn parcel build with Parcel + TailwindCSS without using postcss-import.

Origin

This issue occurred when I tried to add TailwindCSS + PostCSS to the environment I created in my previous article, "Creating a Rails6 + Simpacker + Parcel environment with rails new under docker-compose."

root:/app# yarn parcel build --out-dir public/packs --public-url /packs app/assets/stylesheets/**.css
yarn run v1.22.5
🚨  /app/app/assets/stylesheets/application.css:undefined:undefined: PostCSS plugin tailwindcss requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

It's not working 😇
I had been stuck with this error before, so I initially thought it was something similar.

Parcel + PostCSS 8 is not in a very good state. But...

PostCSS 8 for end users says to use Parcel 2 (parcel@nightly):

However, parcel-plugin-bundle-manifest, which is required for simpacker in this environment, hasn't been updated in 2 years and does not support Parcel 2 (parcel@next / parcel@nightly).

I want to switch to Parcel 2 but I can't 😇

Parcel + postcss-import doesn't work well

For details, please refer to the last comment in the ISSUE below, but it also says that since it's fixed in Parcel 2, you should use Parcel 2.
But I can't switch 😇

Since parcel-plugin-bundle-manifest itself isn't such a large plugin,
I could have written a plugin that works with Parcel 2 myself
and switched to Parcel 2,
but this time my heart was already starting to break,
so I decided to revert the related packages to their PostCSS 7 compatible versions...

The final package.json looks like this:

  "devDependencies": {
    "parcel-bundler": "^1.12.4",
    "parcel-plugin-bundle-manifest": "^0.2.0",
    "postcss": "^8.1.10",
    "postcss-cli": "^8.3.0",
    "postcss-modules": "^3.2.2",
    "postcss-nested": "^4.2.3",
    "tailwindcss": "^1.8.12"
  }

postcss and postcss-cli are kept as they are since they support both 8 and 7.
Actually, I feel like I could even remove them... (I'm losing the energy to check anymore).
For other packages, I reverted them to versions before PostCSS 8 support while checking the Releases for each package.

Also, regarding css-import, I saw a comment in the following ISSUE saying
"If you want to use Parcel + TailwindCSS, do it without using css-import!",
so I decided to follow that.

So I removed css-import, and the .postcssrc prepared for Parcel became the following:
.postcssrc

{
  "modules": true,
  "plugins": {
    "tailwindcss": {},
    "postcss-nested": {}
  }
}

Then, prepare the CSS to bring in TailwindCSS...
app/assets/stylesheets/tailwindcss.css

@tailwind base;
@tailwind components;
@tailwind utilities;

Now, let's try to build.

root:/app# yarn parcel build --out-dir public/packs --public-url /packs app/assets/stylesheets/**.css
yarn run v1.22.5
⠹ Building tailwindcss.css...
✨  Built in 103.98s.

public/packs/tailwindcss.css        ⚠️  1.73 MB    99.11s
public/packs/tailwindcss.css.map     558.54 KB     342ms
📦 PackageManifestPlugin
✓ bundle : tailwindcss.css => /packs/tailwindcss.css
📄 manifest : /app/public/packs/parcel-manifest.json
🖊 update manifest file
Done in 113.24s.

public/packs/tailwindcss.css

/* ! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height: ...(omitted below)

public/packs/parcel-manifest.json

{
  "tailwindcss.css": "/packs/tailwindcss.css"
}

It's done! That's a relief.
By the way, if you're going to use the full TailwindCSS, you could just pull it from a CDN, but I was planning on customizing it later, so please forgive the fact that the example above looks like it should just use a CDN.

The steps taken this time are included in the following repository.
https://github.com/JUNKI555/rails_erb_practice02

Sigh, this is really tough...
It's also said that Parcel gets difficult once you start introducing TypeScript,
so if you're using Simpacker, it might be better to just go with webpack honestly.

It makes me want to try going without a module bundler... (whisper)

References:

Discussion