diff --git a/package.json b/package.json index b914456..820ea7f 100755 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ }, "dependencies": { "autoprefixer": "^10.3.6", + "glob": "^8.0.3", "postcss": "~8.3.8" }, "peerDependencies": { diff --git a/src/declarations.ts b/src/declarations.ts index 9cb33dd..d3ba757 100644 --- a/src/declarations.ts +++ b/src/declarations.ts @@ -3,6 +3,7 @@ export * from '@stencil/core/internal'; export interface PluginOptions { injectGlobalPaths?: string[]; plugins?: any[]; + alwaysParseNonCachedCss?: boolean; } export interface RendererOptions { diff --git a/src/index.ts b/src/index.ts index 3555a23..35a14d1 100755 --- a/src/index.ts +++ b/src/index.ts @@ -2,6 +2,8 @@ import postCss from 'postcss'; import { loadDiagnostic } from './diagnostics'; import type * as d from './declarations'; import * as util from './util'; +//import path from 'path'; +//import glob from 'glob'; export function postcss(opts: d.PluginOptions = {}): d.Plugin { return { @@ -16,6 +18,19 @@ export function postcss(opts: d.PluginOptions = {}): d.Plugin { return null; } + // Workaround for JIT handling of i.e. Tailwind: Read the source text from the CSS indepent from Stencil, + // in order to always get the raw input file. + if(opts.hasOwnProperty('alwaysParseNonCachedCss') && opts.alwaysParseNonCachedCss) + { + try { + sourceText = context.sys.readFileSync(fileName); // Read non-cached variant + } + catch(ex) + { + console.error("Reading the source CSS file from path " + fileName + " failed"); + } + } + const renderOpts = util.getRenderOptions(opts, sourceText, context); const results: d.PluginTransformResults = { @@ -58,18 +73,7 @@ export function postcss(opts: d.PluginOptions = {}): d.Plugin { resolve(results); } else { results.code = postCssResults.css.toString(); - results.dependencies = postCssResults.messages - .filter((message) => message.type === 'dependency') - .map((dependency) => dependency.file); - - // TODO(#38) https://github.com/ionic-team/stencil-postcss/issues/38 - // determining how to pass back the dir-dependency message helps - // enable JIT behavior, such as Tailwind. - // - // Pseudocode: - // results.dependencies = postCssResults.messages - // .filter((message) => message.type === 'dir-dependency') - // .map((dependency) => () => dependency.file); + results.dependencies = []; // Can be left empty, since JIT with other Frameworks works after using non-cached CSS source. // write this css content to memory only so it can be referenced // later by other plugins (autoprefixer)