Inline commands

Bundles can be created with these HTML tag names.

  • saveAs: html + script + link + raw assets

  • exportAs: script + style

  • exclude: script + link + style

JS and CSS files with the same path and filename will automatically create a bundle when there are no conflicts in call ordering. [1]

data-chrome-file

  1. path/filename

    1. saveAs [2]

    2. exportAs

  2. ::

  3. format… [3]

JSON [4]
<style data-chrome-file='{ "exportAs": "css/prod.css", "process": ["lint", "beautify"] }'>
  body {
    font: 1em/1.4 Helvetica, Arial, sans-serif;
    background-color: #fafafa;
  }
</style>
Key-Value [14]
<link rel="stylesheet" href="css/dev.css" data-chrome-file='saveAs: css/prod.css; process: ["lint", "beautify"]' />
Inline (legacy)
<link rel="stylesheet" href="css/dev.css" data-chrome-file="saveAs:css/prod.css::lint+beautify" />
Output
<link rel="stylesheet" href="css/prod.css" />

data-chrome-options

  • preserve [5]

    • html

    • css

  • inline

    • js: Rendered inline with <script>

    • css: Rendered inline with <style>

    • image: Rendered as base64 from file

  • module [6]

    • js: ESM

    • css: SASS

  • incremental [14]

    • boolean

    • none

    • staging

    • etag

    • exist

  • extract

    • css: @import rules are inlined into parent file (same origin)

  • blob

    • image: HTML and CSS from base64

    • font: CSS from base64

  • dynamic

    • image: “srcset” uses query parameters with an image resizer

    • element (non-void): mixed content which uses a view engine template (e.g. ejs)

  • compress (array)

    • image: tinify + imagemin [7]

    • font: woff + woff2

    • gz: Gzip

    • br: Brotli

    • zst: Zstandard

  • static

    • all: Remove query string from URL

  • crossorigin

    • all: Same as preserveCrossOrigin [download: false]

  • download [8]

    • all: Source files that are not usually downloaded (e.g. link[rel=alternate])

  • hash [9] [10]

    • js

    • css

    • map

    • img

    • font

    • audio

    • video

  • worker

    • image

    • font

  • remove

    • all: Remove element during finalization

  • charset (string)

    • utf-8 (default)

    • utf-16

    • utf-16le

    • latin1

    • utf-16be (unsupported)

JSON [11]
<style data-chrome-options='{ "preserve": true, "hash": "md5", "compress": [{ "format": "gz" }], "incremental": "etag", "encoding": "utf-16" }'>
  body {
    font: 1em/1.4 Helvetica, Arial, sans-serif;
    background-color: #fafafa;
  }
</style>
Key-Value [12]
<link rel="stylesheet" href="css/dev.css" data-chrome-options='preserve: true; hash: md5; compress: [{ "format": "gz" }]; incremental: etag; encoding: utf-16; }' />
Inline (legacy)
<link rel="stylesheet" href="css/dev.css" data-chrome-options="preserve|md5|compress[gz]|incremental[etag]|utf-16">

Tip

Whitespace can be used between anything for readability.

data-chrome-metadata

Any plain object [13]
<script
  src="/common/util.js"
  data-chrome-metadata='{ "rollup-custom": { "import-maps": {} }, "terser-custom": { "config": {} } }'>
</script>

Inline commands are usually sufficient for simple web pages. More advanced configurations are possible using a JSON (yaml) external configuration file.

{
  "selector": "head > script:nth-of-type(2), head > script:nth-of-type(3)",
  "type": "js",
  "saveAs": "js/modules2.js",
  "process": ["minify"],
  "metadata": { "custom-prop": true }
}