Handle dependency messages

bradlc commented 3 years ago

This pull requests adds support for PostCSS dependency messages, which are used by plugins to register file dependencies. Documentation: https://github.com/postcss/postcss/blob/main/docs/guidelines/runner.md#3-dependencies

Note that there is also a dir-dependency message type but I am not sure how/if Stencil can support this.

dtaalbers commented 3 years ago

Can we get this PR merged @claviska? I'd like to see the official Tailwind CSS support for Stencil JS. I believe they are waiting for this PR to be merged. Would be awesome if we can get this going!

claviska commented 3 years ago

@dtaalbers I no longer have any affiliation with Stencil or the company that maintains it.

dtaalbers commented 3 years ago

@claviska Oh thats my bad. Sorry to bother you!

adamwathan commented 3 years ago

Just a follow-up from someone else on the Tailwind team — Stencil won't work properly out of the box with the JIT engine until it supports both dependency and dir-dependency messages, so even if this is merged we will still need to figure out dir-dependency support.

snaptopixel commented 2 years ago

FYI, here's a local dev process that is working well for me (admittedly with a specific use case) which allows JIT and HMR

Prerequisites

Don't use shadow dom (Use Tailwind globally)
Don't use Stencil to build your PostCSS
Do use www output target in Stencil
Tailwind
Add an npm script to build Tailwind to the www directory or wherever Stencil outputs your files (NODE_ENV is required for TW to pick up changes to tsx files)
```
NODE_ENV=development  tailwindcss -i ./src/site.pcss -o ./www/site.css --watch
```

Config should have something like this

mode: 'jit',
purge: ['./src/**/*.html', './src/**/*.{ts,tsx}'],

Stencil

Config should look something like this, note the empty: false and globalStyle properties:

import { Config } from '@stencil/core'
export const config: Config = {
globalStyle: 'www/site.css',
outputTargets: [
  {
    type: 'www',
    empty: false,
    serviceWorker: null,
  },
],
}

index.html

Make sure you <link to the stylesheet that Stencil creates/copies, it will be in the www/build dir, don't use the one Tailwind generates.

How it works

Tailwind is in watch mode and will recompile when you change your main pcss file, tsx files or the tailwind config
Once the tailwind output is written to disk Stencil sees the change (to the globalStyle file) and copies the file (into the build dir) and updates the browser
🎉

splitinfinities commented 2 years ago

Hey thanks @adamwathan for the direction! I'm going to do some research on dir-dependency and what we need to get it shipped.

splitinfinities commented 2 years ago

Prereleased v2.1.0-0 and added https://github.com/ionic-team/stencil-postcss/issues/38 to investigate the dir-dependency messages. I'd love to get Tailwind's v2 JIT working within a Shadow DOM context and across the board. If anyone has tips or tricks to help get us there, I'd really appreciate it!

stencil-community / stencil-postcss