@localnerve/web-component-build 3.5.0 → 4.0.0

package/README.md

@@ -10,6 +10,7 @@ Assembles a web component from its parts, allows developers to author the compon
 The parts are processed and written to an output directory, then exposed to a calling build process.  
 
   * [Why This Exists](#why-this-exists)
+  * [Examples](#examples)
   * [Processing Possibilities](#processing-map)
   * [Multiple Templates](#multiple-templates)
   * [Trusted Types Helpers](#trusted-types-helpers)
@@ -24,6 +25,21 @@ The parts are processed and written to an output directory, then exposed to a ca
   3. Expose HTML for the web component to builds for companion templates and/or DSD for SSR builds
   4. Enable/ease paying these conveniences forward in web component distribution packages
 
+## Examples
+New here? The [`examples/`](./examples/) directory has seven self-contained examples — each with its own fixtures, build script, and README — covering the most common ways to build a web component with this library. Clone the repo and run any one from the root:
+
+```bash
+node examples/js-css-html/build.mjs   # the canonical js + css + html build
+```
+
+  * [js-css-html](./examples/js-css-html/) — minified css + html injected into a JS token; all three outputs written
+  * [pure-js](./examples/pure-js/) — javascript-only components (no templates)
+  * [pure-css](./examples/pure-css/) — minify a stylesheet for distribution / CSP hashes
+  * [inline-style-no-html](./examples/inline-style-no-html/) — css injected as a bare `<style>` payload, no html file
+  * [link-href](./examples/link-href/) — reference an external stylesheet with a `<link>` tag instead of inlining css
+  * [multi-template](./examples/multi-template/) — several authored states (default / empty / error) and the `sharedMultiTemplate` option, with a renderable demo page
+  * [trusted-types](./examples/trusted-types/) — components authored against the Trusted Types helpers, with an XSS-probe demo
+
 ## Processing Map
 The following is a table of _some_ of the possible input, processing, and output combos. See [options](#options-object-optional) for detailed explanations.
 
@@ -44,24 +60,28 @@ The following is a table of _some_ of the possible input, processing, and output
 
 > By default, html minification minifies any css found therein.
 
-## Multiple Templates
-A component can carry several HTML templates (e.g. default / error / empty states), each referenced by its own distinct token in the javascript. Pass a `templates` array:
+## Templates
+The `templates` array is how html (and css/link) are described to the build. A component can carry several HTML templates (e.g. default / error / empty states), each referenced by its own distinct token in the javascript:
 
 ```javascript
 const result = await build(outputDir, {
   jsPath: '/some/path/file.js',
-  cssPath: '/some/path/file.css',          // shared, prepended to every template
+  cssPath: '/some/path/file.css',          // shared; embedding follows `sharedMultiTemplate` (default "first")
   templates: [
     { name: 'default', htmlPath: '/some/path/default.html', token: '__TPL_DEFAULT__' },
     { name: 'error',   htmlPath: '/some/path/error.html',   token: '__TPL_ERROR__' }
   ]
 });
-// result.htmls -> [{ name, path, getHtml }, ...] in input order
+// result.html -> { default: {name, path, getHtml}, error: {...} } keyed by template name
 ```
-Each entry takes `name` (output filename, defaults to the input basename), `htmlPath`, `token` (String or RegExp), and an optional per-template `cssLinkHref` override. The single-template `htmlPath` + `jsReplacement` options still work and are treated as one template.
+Each entry takes `name` (output filename, defaults to the input basename), `htmlPath`, `token` (String or RegExp), and optional per-template `cssPath` / `cssLinkHref` overrides that fall back to the shared values. A template may omit `htmlPath` (then only its css/link payload is injected). Pure javascript or css builds pass no templates.
+
+> By default (`sharedMultiTemplate: "first"`) the shared `cssPath`/`cssLinkHref` are embedded only in the **first** template that uses them, so several templates of one component placed into a single shadow root do not duplicate the css. Set `sharedMultiTemplate: "every"` to embed the shared styles in each template's output instead, keeping every html self-contained (needed when a template may ship alone, e.g. per-state SSR or standalone fragments). Per-template `cssPath`/`cssLinkHref` overrides are always embedded in their own template.
 
 > Injection is **syntax-aware**: markup is spliced into the token's string/template literal with escaping for that context, so it may safely contain quotes, backticks, `${`, or backslashes.
 
+> **Tokens MUST be unique in the javascript source.** The injector locates each token by its first occurrence in the file — if a token string also appears in a comment, a log message, or any other place, injection targets that occurrence instead (and throws when it isn't inside a string/template literal). Pick tokens that can only ever appear as the replacement placeholder (e.g. `__MY_COMPONENT_TPL__`), and don't write them anywhere else in the file.
+
 ## Trusted Types Helpers
 
 In addition to `build`, this package exports a small set of browser runtime helpers so that web components can be authored to work **with** and **without** [Trusted Types](https://developer.mozilla.org/en-US/docs/Web/API/Trusted_Types) enforcement (CSP `require-trusted-types-for 'script'`).
@@ -107,8 +127,9 @@ shadowRoot.innerHTML = trustedHtml('my-component', '<div>…static template…</
     cssPath: '/some/path/file.css',
     cssLinkHref: '//some/path/file.css',
     jsPath: '/some/path/file.js',
-    htmlPath: '/some/path/file.html',
-    jsReplacement: '__REPLACEMENT_IN_JS__',
+    templates: [
+      { name: 'index', htmlPath: '/some/path/file.html', token: '__REPLACEMENT_IN_JS__' }
+    ],
     terserOptions: { /* terser options */ },
     htmlminOptions: { /* html-minifier options */ },
     cleancssOptions: { /* clean-css options */ },
@@ -118,11 +139,12 @@ shadowRoot.innerHTML = trustedHtml('my-component', '<div>…static template…</
   
   // Retrieve processed content
   const [js, css, html] = await Promise.all([
-    result.getJs(), result.getCss(), result.getHtml()
+    result.getJs(), result.getCss(), result.html.index.getHtml()
   ]);
 
   // Retrieve output paths
-  const [jsPath, cssPath, htmlPath] = [result.jsPath, result.cssPath, result.htmlPath];
+  const [jsPath, cssPath, htmlPath] =
+    [result.jsPath, result.cssPath, result.html.index.path];
 ```
 
 ## API
@@ -132,7 +154,7 @@ build (outputDir, options): Result
 ```
 
 ### outputDir {String}, required
-Full path to the output directory where css, html, and javascript output are written.
+Full path to the output directory where css, html, and javascript output are written. The directory **must already exist** — `build()` throws upfront if it doesn't (or is not a directory), and never creates or cleans it itself. Creating it is the caller's job (`fs.mkdir(outputDir, { recursive: true })`); cleaning stale outputs between builds is up to your build pipeline too.
 
 ### Options {Object}, optional*
 \* Not really. One or more of `cssPath`, `jsPath`, and/or `htmlPath` **must** be supplied. They have no default, so if no options are supplied, this library throws an exception.  
@@ -148,26 +170,18 @@ Full path to the output directory where css, html, and javascript output are wri
   If supplied:
     + href will be wrapped in a `link` tag
     + resulting `link` will be prepended to the html file if `htmlPath` supplied
-    + resulting `link` will be inserted into the javascript file if no `htmlPath` supplied and `jsReplacement` and `jsPath` supplied  
+    + resulting `link` will be inserted into the javascript file if no `htmlPath` supplied and `jsReplacement` and `jsPath` supplied
   
-* **htmlPath** {String} - Full path to the input html file  
-  If supplied:  
-    + css will be prepended in a `style` tag
-    + cssLinkHref will be prepended in a `link` tag
-    + html will be inserted into the javascript file if `jsReplacement` and `jsPath` is supplied  
+* **sharedMultiTemplate** {String} - How SHARED `cssPath`/`cssLinkHref` are embedded across templates. Defaults to `"first"`: shared styles are embedded only in the first template that uses them, so several templates of one component placed into a single shadow root do not duplicate the css (later templates carry markup only). Use `"every"` to embed the shared styles in each template's output, keeping every html self-contained (needed when a template may ship alone, e.g. per-state SSR/standalone fragments). Per-template `cssPath`/`cssLinkHref` overrides are always embedded in their own template, in either mode. Any other value throws.
   
 * **jsPath** {String} - Full path to the input javascript file
-* **jsReplacement** {String|RegExp} - The replacement pattern for the css or html in the javascript file (single template). See [pattern](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#pattern) for full documentation  
-  If supplied:
-    + A replacement will be attempted in the javascript file, `jsPath` must also be supplied
-    + If **not supplied** or falsy, No replacement will be attempted and all assets are just copied to `outputDir`  
-  
 * **templates** {Array} - Zero or more templates, each an object with:  
-  * **name** {String} - Output filename without extension (`${name}.html`). Defaults to the input basename.
+  * **name** {String} - Output filename without extension (written as `${name}.html`). Defaults to the input basename.
   * **htmlPath** {String} - Full path to the input html for this template.
-  * **token** {String|RegExp} - The placeholder in the javascript to replace.
+  * **token** {String|RegExp} - The placeholder in the javascript to replace. See [pattern](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace#pattern). **Must be unique in the source file** — the first occurrence is the one replaced, so a token string mentioned in a comment or other literal redirects injection there.
+  * **cssPath** {String} - Optional per-template css override (falls back to the shared `cssPath`).
   * **cssLinkHref** {String} - Optional per-template link href override (falls back to the shared `cssLinkHref`).  
-  When supplied, takes precedence over the flat `htmlPath`/`jsReplacement` options. Shared `cssPath`/`cssLinkHref` are applied to every template. Duplicate resolved output names throw.
+  Shared `cssPath`/`cssLinkHref` follow the `sharedMultiTemplate` mode: embedded in the first template that uses them by default (`"first"`), or in every template when `sharedMultiTemplate: "every"`. Per-template overrides are always embedded in their own template. A token with no `jsPath` throws, as do duplicate resolved output names and invalid `sharedMultiTemplate` values. The flat `htmlPath`/`jsReplacement` options were removed in v4 and now throw a migration error.
   
 * **terserOptions** {Object} - The [javascript minifier options](https://github.com/terser/terser/blob/master/README.md#minify-options) object  
   Defaults:
@@ -194,22 +208,20 @@ Full path to the output directory where css, html, and javascript output are wri
   
 * **minifySkip** {Boolean} - True to skip all minifications, defaults to false  
 
+* **deprecationWarnings** {Boolean} - False to disable deprecation warnings, defaults to true. If omitted, deprecation warnings are suppressed by defining environment variable `WEB_COMPONENT_BUILD_NO_DEPRECATION_WARNINGS`
+
 ### Result {Object}
 The output of the build process. Allows access to the output paths and full output content. Format:  
   
   + **cssPath** {String}, The full path to the output css  
   
-  + **htmlPath** {String}, The full path to the output html  
-  
   + **jsPath** {String}, The full path to the output javascript  
   
   + **getCss** {asyncFunction}, gets the output css  
   
-  + **getHtml** {asyncFunction}, gets the output html  
-  
   + **getJs** {asyncFunction}, gets the output javascript  
   
-  + **htmls** {Array}, ordered list (matching `templates` input order) of `{ name, path, getHtml }` — one entry per html template. `getHtml()`/`htmlPath` above are shorthands for the first entry.
+  + **html** {Object}, A map keyed by template name. Each entry: `{ name, path, getHtml }` where `path` is the full path to that template's output html and `getHtml` (async) returns its content.
   
 ## License
   * [BSD-3 Clasuse, Alex Grant, LocalNerve](LICENSE.md)

package/lib/build.js

@@ -73,10 +73,10 @@ class WebComponentBuild {
     const cssText = await fs.readFile(this.inputCssFile, {
       encoding: 'utf8'
     });
-    
+
     const cleanCss =
       this.minifySkip ? cssText : new CleanCss(options).minify(cssText).styles;
-  
+
     await fs.writeFile(this.outputCssFile, cleanCss, {
       encoding: 'utf8'
     });
@@ -84,6 +84,19 @@ class WebComponentBuild {
     return cleanCss;
   }
 
+  /**
+   * Minify a css file at an explicit path (used for per-template css overrides)
+   * without writing it to the output directory.
+   *
+   * @param {String} cssPath - The full path to the css file.
+   * @param {Object} options - clean-css options
+   * @returns {String} minified css.
+   */
+  async minifyCssFile (cssPath, options = {}) {
+    const cssText = await fs.readFile(cssPath, { encoding: 'utf8' });
+    return this.minifySkip ? cssText : new CleanCss(options).minify(cssText).styles;
+  }
+
   /**
    * Minify the given html and write it to a specific output file.
    *
@@ -131,13 +144,17 @@ class WebComponentBuild {
     const _cssPath = this.outputCssFile;
     const _jsPath = this.outputJsFile;
 
-    const htmls = this.htmlOutputs.map(output => ({
-      name: output.name,
-      path: output.path,
-      async getHtml () {
-        return fs.readFile(output.path, { encoding: 'utf8' });
-      }
-    }));
+    // v4: html outputs are exposed as a map keyed by template name.
+    const html = {};
+    for (const output of this.htmlOutputs) {
+      html[output.name] = {
+        name: output.name,
+        path: output.path,
+        async getHtml () {
+          return fs.readFile(output.path, { encoding: 'utf8' });
+        }
+      };
+    }
 
     return {
       get cssPath () {
@@ -150,17 +167,7 @@ class WebComponentBuild {
         }
         return cssText;
       },
-      // Backward-compatible shorthands resolve to the first html output.
-      get htmlPath () {
-        return htmls[0] ? htmls[0].path : undefined;
-      },
-      async getHtml () {
-        let htmlText;
-        if (htmls[0]) {
-          htmlText = await htmls[0].getHtml();
-        }
-        return htmlText;
-      },
+      html,
       get jsPath () {
         return _jsPath;
       },
@@ -170,8 +177,7 @@ class WebComponentBuild {
           jsText = await fs.readFile(_jsPath, { encoding: 'utf8' });
         }
         return jsText;
-      },
-      htmls
+      }
     };
   }
 }

package/lib/index.js

@@ -11,7 +11,6 @@ import * as fs from 'node:fs/promises';
 import * as cheerio from 'cheerio';
 import { createBuild, defaultHtmlMinifyOptions } from './build.js';
 import { injectTokens } from './replace.js';
-import { log, deprecationsEnabled } from './log.js';
 
 /**
  * Derive an html output base name (without extension) from an input path.
@@ -29,96 +28,108 @@ function htmlBaseName (htmlPath) {
 /**
  * Build entry point.
  *
- * @param {String} outputDir - full path to the output directory
- * @param {Object} [options] - optional options
+ * @param {String} outputDir - full path to the output directory. MUST exist before
+ *   calling build(); the library never creates (or cleans) directories itself.
+ * @param {Object} options - build options
+ * @param {Array} options.templates - REQUIRED. List of templates, each an object with:
+ *   name (output filename), htmlPath, token (String|RegExp), and optional cssPath /
+ *   cssLinkHref overrides that fall back to the shared top-level values.
  * @param {String} [options.jsPath] - full path to the javascript file
- * @param {String} [options.cssPath] - full path to the input css file
- * @param {String} [options.cssLinkHref] - http href to css resource
- * @param {String} [options.htmlPath] - full path to the input html file (single template)
- * @param {String} [options.jsReplacement] - Replacement token in the js file (single template)
- * @param {Array} [options.templates] - list of templates, each {name, htmlPath, token,
- *   cssLinkHref}. When supplied, takes precedence over the flat options. Shared
- *   cssPath/cssLinkHref are applied to every template unless a template overrides
- *   its own cssLinkHref.
+ * @param {String} [options.cssPath] - shared css; embedded into templates per the `sharedMultiTemplate` mode (default "first")
+ * @param {String} [options.cssLinkHref] - shared link href; embedded into templates per the `sharedMultiTemplate` mode (default "first")
+ * @param {String} [options.sharedMultiTemplate] - how SHARED css/link are embedded across templates:
+ *   "first" (default) embeds them only in the first template that uses them, so several
+ *   templates of one component placed in a single shadow root do not duplicate the
+ *   styles; "every" embeds them in each template (each output stays self-contained).
+ *   Per-template cssPath/cssLinkHref overrides are ALWAYS embedded in their own template.
  * @param {Object} [options.terserOptions] - Js minifier options (terser)
  * @param {Object} [options.htmlminOptions] - html-minifier options
  * @param {Object} [options.cleancssOptions] - clean-css options
  * @param {Boolean} [options.minifySkip] - default false, flag to skip all minification (debug)
- * @param {Boolean} [options.deprecationWarnings=true] - default true, emit console.warn
- *   messages for flat single-template options and the htmlPath/getHtml shorthands
- *   that are removed in v4.0.0. Set false (or env WEB_COMPONENT_BUILD_NO_DEPRECATION_WARNINGS) to suppress.
- * @returns {Object} Interface to getCss, getHtml, getJs, and htmls for further processing
+ * @returns {Object} Interface exposing cssPath/getCss, jsPath/getJs, and an html map keyed by template name
  */
 export async function build (outputDir, {
   jsPath,
   cssPath,
   cssLinkHref,
-  htmlPath,
-  jsReplacement,
   templates = [],
+  htmlPath,      // v4: removed — detected only to emit a migration error
+  jsReplacement, // v4: removed — detected only to emit a migration error
+  sharedMultiTemplate = 'first',
   terserOptions,
   htmlminOptions,
   cleancssOptions,
-  minifySkip = false,
-  deprecationWarnings
+  minifySkip = false
 } = {}) {
-  // Deprecation / migration warnings for the flat single-template API. These
-  // options (and the getHtml()/htmlPath result shorthands) are removed in
-  // v4.0.0, where "templates" becomes required and html outputs become a named
-  // map (result.html[name]). Suppressed by deprecationWarnings: false or the
-  // WEB_COMPONENT_BUILD_NO_DEPRECATION_WARNINGS env var.
-  const usesFlatOptions = (!Array.isArray(templates) || templates.length === 0)
-    && Boolean(htmlPath || jsReplacement);
-
-  if (usesFlatOptions && deprecationsEnabled({ deprecationWarnings })) {
-    log(
-      'web-component-build',
-      'The flat single-template options "htmlPath"/"jsReplacement" are deprecated and will be removed in v4.0.0. Migrate to the "templates" array, e.g. templates: [{ name, htmlPath, token }].',
-      'warn'
-    );
-    log(
-      'web-component-build',
-      'In v4.0.0 the result\'s html surface changes from getHtml()/htmlPath to a named map: result.html[name] (each { name, path, getHtml }). Per-template cssPath/cssLinkHref overrides will also be supported.',
-      'warn'
+  // v4: the flat single-template options are gone. Detect them so callers get a
+  // clear migration message instead of a silent no-op.
+  if (htmlPath !== undefined || jsReplacement !== undefined) {
+    throw new Error(
+      'v4 removed the flat "htmlPath"/"jsReplacement" options. Migrate to the ' +
+      '"templates" array, e.g. templates: [{ name, htmlPath, token }].'
     );
   }
+  if (!Array.isArray(templates)) {
+    throw new Error('"templates" must be an array.');
+  }
+  if (sharedMultiTemplate !== 'first' && sharedMultiTemplate !== 'every') {
+    throw new Error('"sharedMultiTemplate" must be "first" or "every".');
+  }
 
-  // Resolve the template list. When `templates` is absent, synthesize a single
-  // template from the flat options for backward compatibility.
-  const resolved = (Array.isArray(templates) && templates.length > 0)
-    ? templates.map((t, i) => ({
-      name: t.name || (t.htmlPath ? htmlBaseName(t.htmlPath) : `template-${i}`),
-      htmlPath: t.htmlPath,
-      token: t.token,
-      cssLinkHref: t.cssLinkHref !== undefined ? t.cssLinkHref : cssLinkHref
-    }))
-    : [{
-      name: htmlPath ? htmlBaseName(htmlPath) : undefined,
-      htmlPath,
-      token: jsReplacement,
-      cssLinkHref
-    }];
-
-  const hasHtmlTemplate = resolved.some(t => t.htmlPath);
-  if (!jsPath && !cssPath && !hasHtmlTemplate) {
+  const resolved = templates.map((t, i) => ({
+    name: t.name || (t.htmlPath ? htmlBaseName(t.htmlPath) : `template-${i}`),
+    htmlPath: t.htmlPath,
+    token: t.token,
+    cssPath: t.cssPath !== undefined ? t.cssPath : cssPath,
+    cssLinkHref: t.cssLinkHref !== undefined ? t.cssLinkHref : cssLinkHref
+  }));
+
+  // A token with no jsPath to inject into is always an error.
+  if (!jsPath && resolved.some(t => t.token)) {
+    throw new Error('Invalid input, a replacement token was supplied without jsPath. Did you forget \'jsPath\'?');
+  }
+  if (!jsPath && !cssPath && resolved.every(t => !t.htmlPath)) {
     throw new Error(
-      'One of jsPath, cssPath, or htmlPath MUST be supplied to do something\n meaningful. Did you forget something?'
+      'One of jsPath, cssPath, or a template htmlPath MUST be supplied to do something\n meaningful. Did you forget something?'
     );
   }
 
+  // outputDir is the caller's responsibility: check it exists (and is a directory)
+  // upfront so a typo'd path fails fast with a clear message instead of ENOENT
+  // deep inside the first write.
+  let stat;
+  try {
+    stat = await fs.stat(outputDir);
+  } catch {
+    throw new Error(`outputDir does not exist: "${outputDir}". Create it before calling build().`);
+  }
+  if (!stat.isDirectory()) {
+    throw new Error(`outputDir is not a directory: "${outputDir}".`);
+  }
+
+  // The shared (top-level) cssPath is the canonical output css file. Per-template
+  // css overrides are minified on demand and used only for embedding.
   const build = createBuild(outputDir, jsPath, cssPath, minifySkip);
-  let jsText, cssText;
+  let jsText;
 
   if (jsPath) {
     jsText = await fs.readFile(jsPath, { encoding: 'utf8' });
-  } else if (jsReplacement || resolved.some(t => t.token)) {
-    throw new Error('Invalid input, a replacement token was supplied without jsPath. Did you forget \'jsPath\'?');
   }
 
+  const cssCache = new Map(); // css path -> minified text
   if (cssPath) {
-    cssText = await build.minifyCss(cleancssOptions);
+    cssCache.set(cssPath, await build.minifyCss(cleancssOptions));
   }
 
+  // Resolve the css text to embed for a template's effective css path.
+  const cssFor = async p => {
+    if (!p) return undefined;
+    if (!cssCache.has(p)) {
+      cssCache.set(p, await build.minifyCssFile(p, cleancssOptions));
+    }
+    return cssCache.get(p);
+  };
+
   // Detect duplicate html output names before writing anything.
   const seenNames = new Set();
   for (const template of resolved.filter(t => t.htmlPath)) {
@@ -130,28 +141,45 @@ export async function build (outputDir, {
     seenNames.add(template.name);
   }
 
-  // Process each template: minify its html (with shared style/link prepended) and
-  // write it, or compute an inline css/link payload when there is no html file.
+  // Process each template: minify its html (with its style/link prepended per the
+  // sharedMultiTemplate mode) and write it, or compute an inline css/link payload when
+  // there is no html file. Shared css/link are embedded only in the first template
+  // that uses them unless sharedMultiTemplate is "every"; per-template cssPath/cssLinkHref
+  // overrides are ALWAYS embedded in their own template (and keep every output
+  // self-contained).
   const injection = [];
+  let sharedCssEmbedded;
+  let sharedLinkEmbedded;
   for (const template of resolved) {
+    const hasOwnCss = template.cssPath !== undefined && template.cssPath !== cssPath;
+    const hasOwnLink =
+      template.cssLinkHref !== undefined && template.cssLinkHref !== cssLinkHref;
+    const embedCss = hasOwnCss || sharedMultiTemplate === 'every' || !sharedCssEmbedded;
+    const embedLink = hasOwnLink || sharedMultiTemplate === 'every' || !sharedLinkEmbedded;
+
+    const templateCss = embedCss ? await cssFor(template.cssPath) : undefined;
     let payload;
     if (template.htmlPath) {
       const outputPath = build.addHtmlOutput(template.name);
       const sourceHtml = await fs.readFile(template.htmlPath, { encoding: 'utf8' });
       const $ = cheerio.load(sourceHtml);
       const opts = { ...(htmlminOptions || defaultHtmlMinifyOptions) };
-      if (cssText) {
-        $('body').prepend(`<style>${cssText}</style>`);
+      if (templateCss) {
+        $('body').prepend(`<style>${templateCss}</style>`);
         opts.minifyCSS = cleancssOptions;
+        if (!hasOwnCss) sharedCssEmbedded = true;
       }
-      if (template.cssLinkHref) {
+      if (embedLink && template.cssLinkHref) {
         $('body').prepend(`<link href="${template.cssLinkHref}" rel="stylesheet" />`);
+        if (!hasOwnLink) sharedLinkEmbedded = true;
       }
       payload = await build.writeHtml($('body').html(), outputPath, opts);
-    } else if (cssText) {
-      payload = `<style>${cssText}</style>`;
-    } else if (template.cssLinkHref) {
+    } else if (templateCss) {
+      payload = `<style>${templateCss}</style>`;
+      if (!hasOwnCss) sharedCssEmbedded = true;
+    } else if (embedLink && template.cssLinkHref) {
       payload = `<link href="${template.cssLinkHref}" rel="stylesheet" />`;
+      if (!hasOwnLink) sharedLinkEmbedded = true;
     }
 
     if (payload !== undefined && template.token) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@localnerve/web-component-build",
-  "version": "3.5.0",
+  "version": "4.0.0",
   "description": "A library to help build web components",
   "main": "index.js",
   "type": "module",
@@ -62,7 +62,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "eslint": "^10.9.1",
+    "eslint": "^10.10.0",
     "eslint-plugin-n": "^18.3.0",
     "globals": "^17.12.0",
     "he": "^1.2.0",