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>
Inline
<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

  • 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: imagemin [7]

    • font: woff + woff2

    • png: TinyPNG service [8]

    • gz: Gzip + Zopfli [9]

    • br: Brotli

  • static

    • all: Remove query string from URL

  • crossorigin

    • all: Same as preserveCrossOrigin [download: false]

  • download [10]

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

  • hash [11] [12]

    • js

    • css

    • map

    • img

    • font

    • audio

    • video

  • remove

    • all: Remove element during finalization

  • charset (string)

    • utf-8 (default)

    • utf-16

    • utf-16le

    • latin1

    • utf-16be (unsupported)

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

Tip

Whitespace can be used between anything for readability.

data-chrome-metadata

Any plain object [14]
<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 }
}