Does not work with tailwind jit mode

[neurodynamic]

🐛 bug report

Parcel 2 works with tailwind in "regular" (non-jit) mode. I decided to try jit mode by adding mode: "jit" to my tailwind.config.js file and suddenly started seeing this error:

@parcel/transformer-postcss: ENOENT: no such file or directory, stat 'project_root/assets/css/app.css

🎛 Configuration (.babelrc, package.json, cli command)

Running parcel with this command:

parcel watch js/app.ts css/*.sass --dist-dir ../priv/static

// .babelrc
{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ]
}

// .postcssrc
{
  "plugins": {
    "tailwindcss": {},
    "autoprefixer": {}
  }
}

// tailwind.config.js
module.exports = {
  mode: 'jit', // Adding this line triggers the error
  purge: [
    '../lib/**/*.ex',
    '../lib/**/*.leex',
    '../lib/**/*.slimleex',
    '../lib/**/*.slime',
    '../lib/**/*.live',
    '../lib/**/*.eex',
    './js/**/*.js'
  ],
  darkMode: false, // or 'media' or 'class'
  variants: {
    extend: {},
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}

// devDependencies
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-typescript": "^7.13.0",
    "@parcel/transformer-sass": "^2.0.0-beta.2",
    "@tailwindcss/forms": "^0.3.2",
    "autoprefixer": "^10.2.5",
    "node-sass": "^4.13.1",
    "parcel": "^2.0.0-beta.2",
    "parcel-plugin-stdin": "^0.1.1",
    "postcss": "^8.2.12",
    "postcss-modules": "^3.2.2",
    "sass": "^1.32.12",
    "tailwindcss": "^2.1.1"
  }

🤔 Expected Behavior

Compilation should succeed like it does when jit mode is off.

😯 Current Behavior

Parcel shows the error above, which makes it seem like it starts looking for an app.css file instead of the app.sass file that it was finding successfully when not using jit mode. That said, when I manually converted my app.sass file to a regular .css file, it produced this error instead:

@parcel/transformer-css: Cannot read property 'start' of undefined

Just like the app.sass file, running it on the app.css file worked fine as soon as I disabled jit mode.

💁 Possible Solution

No idea

🔦 Context

Parcel 2 with Tailwind has been adding a huge amount of time to my compilation times (15-20 seconds on a very young project with very little front-end code). It sounds like it's not uncommon for tailwind to add to build times like this, so I was hoping to use jit mode to get build times back to a few hundred milliseconds.

🌍 Your Environment

Software	Version(s)
Parcel	2.0.0-beta.2
Node	14.5.0
npm	7.6.0
Operating System	macOS 11.3.1

[devongovett]

This is more of an issue with how Tailwind's JIT works than with Parcel. We're working with the Tailwind team to resolve this. tailwindlabs/tailwindcss#3951

[devongovett]

This should be fixed once #6299 is merged and Tailwind is updated to use the new dir-dependency messages.

[neurodynamic]

@devongovett The Cannot read property 'start' of undefined error when running with an app.css file seems to be resolved in JIT mode, but I'm still seeing the same @parcel/transformer-postcss: ENOENT: no such file or directory, stat 'project_root/assets/css/app.css error with Tailwind at 2.2.2, parcel at 2.0.0-nightly.726 and @parcel/transformer-sass at 2.0.0-nightly.728 when trying to compile with my original app.sass file instead of an app.css file.

[devongovett]

Do you have a reproduction? I was using JIT mode with Parcel nightly just yesterday and it was working well for me.

[neurodynamic]

@devongovett This setup may look a bit weird because I've extracted it from the Phoenix project where I'm seeing the error, but it produces the error when you run npm run watch: https:/neurodynamic/tailwind_jit_fail_example

[neurodynamic]

@devongovett I took out a bunch of extra code and packages and stuff to simplify the reproduction. The new example is pared down to tailwind and sass: https:/neurodynamic/tailwind_jit_fail_example

Works fine with JIT mode off or if I comment out the @tailwind lines in app.sass, but with JIT mode on and the @tailwind lines uncommented, same ENOENT: no such file or directory issue as before.

[m-w-d-d]

Just a note that I'm experiencing the same issue here. A very simple Parcel 2/Tailwind set up in jit mode works absolutely fine but adding require('@tailwindcss/forms'), to my tailwind config file causes a:

🚨 Build failed.
@parcel/transformer-css: Cannot read properties of undefined (reading 'start')

@neurodynamic - did you ever find a solution to this?

[neurodynamic]

@m-w-d-d Nope, I ended up switching to esbuild.

[fuwaneko]

@devongovett with the most recent stable versions of Parcel 2 and Tailwind 3 this bug still exists. I debugged parcel build and this is what I found. Repo to reproduce: link.

@parcel/transformer-postcss: ENOENT: no such file or directory, stat '<path>/parcel-tailwind-bug/index.css'

• works fine with plain CSS
• works fine with Stylus
• doesn't work with SASS, I believe real culprit here is @parcel/transform-sass passing wrong arguments to the postcss transformer
• config.hydrated passed to postcss.process in PostCSSTransformer.js contains from and to equal to non-existent file (index.css in case of repro repo) which is what causes ENOENT when Tailwind plugin tries to read from that file in the process of setting up changes tracking for its own hot reload
• forcing from and to to empty like so

config.hydrated.from = '';
config.hydrated.to = '';
let {
  messages,
  root
} = await postcss(plugins).process(program, config.hydrated);

• fixes the issue and Parcel's hot reload still works, even when changing SCSS files. Tailwind also recompiles files properly.

NB: JIT is the only option in Tailwind 3, so no way to turn it off anymore, reasonable alternative until this is fixed is to use separate Tailwind build that produces CSS and just use that CSS directly in Parcel build.