feat: add option to set cssPath to false

[younho9]

resolve #543

If use cssPath: false option, tailwindcss path is unknown so Vite HMR is not available.

[atinux]

Breaking the HMR is actually quite bad in term of DX 😬

Having an empty css file like we discussed in #543 keep the HMR working right?

[younho9]

@atinux I created an empty.css and modified to inject it global CSS. The empty.css must be injected globally for vite to track module changes.

[younho9]

// @atinux ping?

[atinux]

Not sure to understand your answer @younho9

If you have an empty empty.css and add the Tailwind directives in the layout, does it work for HMR?

[younho9]

If you have an empty empty.css and add the Tailwind directives in the layout, does it work for HMR?

No. hmr.ts runs, but it does not appear to be inserted into the stylesheet even if a new tailwind class is added.

extraModules in hmr.ts is as follow.

Set(2) {
  ModuleNode {
    id: '/tailwindcss/src/runtime/empty.css',
    file: '/tailwindcss/src/runtime/empty.css',
    importers: [Set],
    importedModules: Set(0) {},
    acceptedHmrDeps: Set(0) {},
    acceptedHmrExports: null,
    importedBindings: null,
    transformResult: [Object],
    ssrTransformResult: null,
    ssrModule: null,
    ssrError: null,
    lastHMRTimestamp: 0,
    lastInvalidationTimestamp: 1666103010015,
    url: '/@fs/tailwindcss/src/runtime/empty.css',
    type: 'js',
    isSelfAccepting: true
  },
  ModuleNode {
    id: '/tailwindcss/src/runtime/empty.css?direct',
    file: '/tailwindcss/src/runtime/empty.css',
    importers: Set(0) {},
    importedModules: Set(0) {},
    acceptedHmrDeps: Set(0) {},
    acceptedHmrExports: null,
    importedBindings: null,
    transformResult: [Object],
    ssrTransformResult: null,
    ssrModule: null,
    ssrError: null,
    lastHMRTimestamp: 0,
    lastInvalidationTimestamp: 1666103010015,
    url: '/@fs/tailwindcss/src/runtime/empty.css?direct',
    type: 'css',
    isSelfAccepting: true
  }
}

[atinux]

So HMR is also broken with an empty CSS?

[younho9]

In playground, I have empty.css and add the tailwind directives in the layout, but HMR is broken.

Screen.Recording.2022-10-19.at.1.00.28.AM.mov

For HMR to work, it seems necessary to find the style block module that have tailwind directives.