Handle dependency messages

[bradlc]

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]

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]

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

[dtaalbers]

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

[adamwathan]

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]

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]

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]

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!