feat(tools): shared sass-transforming function

Author: bennypowers

.changeset/tasty-dragons-drum.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/pfe-tools": minor
+---
+
+export `transformSass` helper from esbuild.js

docs/_plugins/bundle.cjs

@@ -1,6 +1,5 @@
 /* eslint-env node */
 const esbuild = require('esbuild');
-const Sass = require('sass');
 
 const { join } = require('path');
 const { readdir } = require('fs/promises');
@@ -9,14 +8,6 @@ const { litCssPlugin } = require('esbuild-plugin-lit-css');
 module.exports = {
   async bundle() {
     const cwd = process.cwd();
-    const transform = (data, { filePath }) => Sass.renderSync({
-      data,
-      file: filePath,
-      includePaths: [
-        join(cwd, 'node_modules'),
-      ],
-    }).css.toString();
-
     function pfeEnvPlugin() {
       return {
         name: 'pfe-env',
@@ -37,6 +28,7 @@ export const core = ${JSON.stringify(await readdir(join(cwd, 'core')))};
     }
 
     const { packageVersion } = await import('@patternfly/pfe-tools/esbuild-plugins/package-version.js');
+    const { transformSass } = await import('@patternfly/pfe-tools/esbuild.js');
 
     await esbuild.build({
       entryPoints: ['docs/demo/bundle.ts'],
@@ -60,7 +52,7 @@ export const core = ${JSON.stringify(await readdir(join(cwd, 'core')))};
 
       plugins: [
         // import scss files as LitElement CSSResult objects
-        litCssPlugin({ filter: /.scss$/, transform }),
+        litCssPlugin({ filter: /.scss$/, transform: transformSass }),
         pfeEnvPlugin({ cwd }),
         // replace `{{version}}` with each package's version
         packageVersion(),

tools/pfe-tools/dev-server.ts

@@ -1,18 +1,17 @@
 import type { Plugin } from '@web/dev-server-core';
 import type { DevServerConfig } from '@web/dev-server';
 import type { InjectSetting } from '@web/dev-server-import-maps/dist/importMapsPlugin';
-import type { Meta as LitCSSModuleMeta } from '@pwrs/lit-css';
 
 import { readdir } from 'fs/promises';
-import { join, dirname } from 'path';
+import { join } from 'path';
 import { fileURLToPath } from 'url';
 
-import Sass from 'sass';
 import litcssRollup from 'rollup-plugin-lit-css';
 
 import { fromRollup } from '@web/dev-server-rollup';
 import { esbuildPlugin } from '@web/dev-server-esbuild';
 import { importMapsPlugin } from '@web/dev-server-import-maps';
+import { transformSass } from './esbuild.js';
 
 export interface PfeDevServerConfigOptions {
   /** Extra dev server plugins */
@@ -27,9 +26,6 @@ const litcss = fromRollup(litcssRollup);
 
 const rootDir = fileURLToPath(new URL('../..', import.meta.url));
 
-// allow for imports in scss from node_modules
-const NODE_MODULES = join(rootDir, 'node_modules');
-
 function appendLines(body: string, ...lines: string[]): string {
   return [body, ...lines].join('\n');
 }
@@ -69,15 +65,6 @@ function scssMimeType(): Plugin {
   };
 }
 
-/** Transform `.scss` sources on-the-fly */
-function transform(source: string, { filePath }: LitCSSModuleMeta): string {
-  const result = Sass.compileString(source, {
-    loadPaths: [dirname(filePath), NODE_MODULES],
-  });
-  // TODO: forward sourcemaps by returning an object
-  return result.css;
-}
-
 /**
  * Creates a default config for PFE's dev server.
  */
@@ -125,7 +112,7 @@ export function pfeDevServerConfig(options?: PfeDevServerConfigOptions): DevServ
       // so that we can list the elements by name
       bindNodeDataToBrowser({ cwd }),
       // load .scss files as lit CSSResult modules
-      litcss({ include: ['**/*.scss'], transform }),
+      litcss({ include: ['**/*.scss'], transform: transformSass }),
     ],
   };
 }

tools/pfe-tools/esbuild.ts

@@ -1,5 +1,5 @@
 import type { Plugin } from '@web/dev-server-core';
-import type { LitCSSOptions } from 'esbuild-plugin-lit-css';
+import type { Meta as LitCSSModuleMeta } from '@pwrs/lit-css';
 
 import esbuild from 'esbuild';
 import glob from 'glob';
@@ -11,15 +11,16 @@ import { litCssPlugin } from 'esbuild-plugin-lit-css';
 
 import { nodeExternalsPlugin } from 'esbuild-node-externals';
 import { readdirSync } from 'fs';
-import { resolve, join } from 'path';
-
-type Transformer = LitCSSOptions['transform'];
+import { resolve, join, dirname } from 'path';
+import { fileURLToPath } from 'url';
 
 export interface PfeEsbuildOptions {
   /** Extra esbuild plugins */
   plugins?: Plugin[];
+  /** Whether to bundle the components and all their dependencies */
+  bundle?: boolean;
   /** repository root (default: process.cwd()) */
-  cwd?: string
+  cwd?: string;
   /** exclude these directories (under the workspace) from the build */
   entryPointFilesExcludes?: string[];
   /** packages to include */
@@ -28,10 +29,24 @@ export interface PfeEsbuildOptions {
   workspace?: string;
   /** production bundles are minified */
   mode?: 'development'|'production';
+  /** file to bundle to */
+  outfile?: string;
   /** Packages to treat as external, i.e. not to bundle */
   external: string[];
 }
 
+/** lit-css transform plugin to process `.scss` files on-the-fly */
+export function transformSass(source: string, { filePath }: LitCSSModuleMeta): string {
+  const result = Sass.compileString(source, {
+    loadPaths: [dirname(filePath), NODE_MODULES],
+  });
+  // TODO: forward sourcemaps by returning an object
+  return result.css;
+}
+
+/** abs-path to root node_modules */
+const NODE_MODULES = fileURLToPath(new URL('../../node_modules', import.meta.url));
+
 /**
  * Exclude SASS-only packages because there are no ts sources there
  */
@@ -79,36 +94,41 @@ export async function pfeBuild(options?: PfeEsbuildOptions) {
   const packagePath = packageDirs.flatMap(dir =>
     glob.sync(`${workspace}/${dir}/package.json`, { absolute: true, cwd }));
 
-  const transform: Transformer = (data, { filePath }) => Sass.renderSync({
-    data,
-    file: filePath,
-    includePaths: [
-      join(options?.cwd ?? process.cwd(), 'node_modules'),
-    ],
-  }).css.toString();
-
   try {
     const result = await esbuild.build({
       entryPoints,
       entryNames,
       absWorkingDir: cwd,
-      outdir: workspace,
       format: 'esm',
       allowOverwrite: true,
-      bundle: true,
-      external: ['@patternfly*', 'lit', 'tslib', ...options?.external ?? []],
       treeShaking: true,
       legalComments: 'linked',
       watch: Boolean(process.env.WATCH) || false,
       logLevel: 'info',
       sourcemap: true,
+      bundle: options?.bundle ?? true,
 
       minify: mode === 'production',
       minifyWhitespace: mode === 'production',
 
+      ...options?.outfile ? {
+        outfile: options.outfile
+      } : {
+        outdir: workspace,
+      },
+
+      external: [
+        ...options?.bundle ? [] : [
+          '@patternfly*',
+          'lit',
+          'tslib',
+        ],
+        ...options?.external ?? []
+      ],
+
       plugins: [
         // import scss files as LitElement CSSResult objects
-        litCssPlugin({ filter: /.scss$/, transform }),
+        litCssPlugin({ filter: /.scss$/, transform: transformSass }),
         // replace `{{version}}` with each package's version
         packageVersion(),
         // ignore sub components bundling like "pfe-progress-steps-item"
@@ -118,6 +138,7 @@ export async function pfeBuild(options?: PfeEsbuildOptions) {
       ],
     });
     result.stop?.();
+    return result.outputFiles?.map(x => x.path) ?? [];
   } catch (error) {
     console.log(error);
     process.exit(1);