From befca96e0854b6ec1f8b1991fbc97ac09eb29c75 Mon Sep 17 00:00:00 2001 From: Glenn Toews Date: Sun, 31 Jul 2022 11:31:55 +0200 Subject: [PATCH 1/4] Added handling for dir dependencies --- src/index.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/index.ts b/src/index.ts index 3555a23..cda6fa9 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 { @@ -70,6 +72,13 @@ export function postcss(opts: d.PluginOptions = {}): d.Plugin { // results.dependencies = postCssResults.messages // .filter((message) => message.type === 'dir-dependency') // .map((dependency) => () => dependency.file); + let dirDependencies: string[][] = postCssResults.messages + .filter((message) => message.type === "dir-dependency") + .map((dependencyGlob) => { + const fileGlob = dependencyGlob.glob ? path.join(dependencyGlob.dir, dependencyGlob.glob) : path.join(dependencyGlob.dir, "**", "*"); + return glob.sync(fileGlob); + }); + results.dependencies.concat(...dirDependencies); // The dirDep endencies array is 2D, since each glob will resolve to a file list. // write this css content to memory only so it can be referenced // later by other plugins (autoprefixer) From 655d1c0fca0457b4594fe0891ef26c39890a41d6 Mon Sep 17 00:00:00 2001 From: Glenn Toews Date: Sun, 31 Jul 2022 11:32:08 +0200 Subject: [PATCH 2/4] Additional glob package required for resolving --- package.json | 1 + 1 file changed, 1 insertion(+) 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": { From eaf8716d694a484e6e0fc55f5c8f3cbf82539791 Mon Sep 17 00:00:00 2001 From: Glenn Toews Date: Sun, 31 Jul 2022 12:25:52 +0200 Subject: [PATCH 3/4] Plugin now reads dir dependencies and resolves globs to file lists. --- src/index.ts | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/src/index.ts b/src/index.ts index cda6fa9..aca8187 100755 --- a/src/index.ts +++ b/src/index.ts @@ -64,21 +64,14 @@ export function postcss(opts: d.PluginOptions = {}): d.Plugin { .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); - let dirDependencies: string[][] = postCssResults.messages + const dirDependencies: string[][] = postCssResults.messages .filter((message) => message.type === "dir-dependency") .map((dependencyGlob) => { - const fileGlob = dependencyGlob.glob ? path.join(dependencyGlob.dir, dependencyGlob.glob) : path.join(dependencyGlob.dir, "**", "*"); - return glob.sync(fileGlob); + const fileGlob: string = dependencyGlob.glob ? path.join(dependencyGlob.dir, dependencyGlob.glob) + : path.join(dependencyGlob.dir, "**", "*"); + return glob.sync(fileGlob.replace(/\\/g, '/')); // Make sure that windows paths get transformed to POSIX style }); - results.dependencies.concat(...dirDependencies); // The dirDep endencies array is 2D, since each glob will resolve to a file list. + results.dependencies.concat(...dirDependencies); // The dirDependencies array is 2D, since each glob will resolve to a file list. // write this css content to memory only so it can be referenced // later by other plugins (autoprefixer) From 0d2925bcd97813cf28744e48b7b7c1a64003e543 Mon Sep 17 00:00:00 2001 From: Glenn Toews Date: Sun, 31 Jul 2022 14:32:21 +0200 Subject: [PATCH 4/4] Added option to force reading of non-cached CSS inputs --- src/declarations.ts | 1 + src/index.ts | 30 ++++++++++++++++-------------- 2 files changed, 17 insertions(+), 14 deletions(-) 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 aca8187..35a14d1 100755 --- a/src/index.ts +++ b/src/index.ts @@ -2,8 +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'; +//import path from 'path'; +//import glob from 'glob'; export function postcss(opts: d.PluginOptions = {}): d.Plugin { return { @@ -18,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 = { @@ -60,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); - - const dirDependencies: string[][] = postCssResults.messages - .filter((message) => message.type === "dir-dependency") - .map((dependencyGlob) => { - const fileGlob: string = dependencyGlob.glob ? path.join(dependencyGlob.dir, dependencyGlob.glob) - : path.join(dependencyGlob.dir, "**", "*"); - return glob.sync(fileGlob.replace(/\\/g, '/')); // Make sure that windows paths get transformed to POSIX style - }); - results.dependencies.concat(...dirDependencies); // The dirDependencies array is 2D, since each glob will resolve to a file list. + 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)