Miscellaneous

Merge conflicts

Only one command per element is supported (except data sources) when using sqd.config. The last selector always takes precedence except when mergeType is defined. [1]

“ordinal”: 1 | index.html*

[
  {
    "selector": "img#picture1",
    "attributes": { "alt": "Picture 1" },
    "commands": ["png@"]
  },
  {
    "selector": "img#picture2",
    "attributes": { "loading": "lazy", "alt": "Picture 2" },
    "commands": ["webp%"]
  }
]

“ordinal”: 2 | **/*.html?output=prod

[
  {
    "selector": "img",
    "mergeType": "under",
    "hash": "sha256", // Merged
    "attributes": { "alt": "Picture 1" }, // No effect
    "commands": ["jpeg@"] // No effect
  },
  /* OR */
  {
    "selector": "img",
    "mergeType": "preserve",
    "hash": "sha256", // Merged
    "attributes": { "loading": "lazy", "alt": "Picture 1" }, // Merged as "Picture 1"
    "commands": ["jpeg@"] // No effect
  },
  /* OR */
  {
    "selector": "img",
    "mergeType": "over",
    "hash": "sha256", // Merged
    "attributes": { "loading": "lazy", "alt": "Picture 2" }, // Merged as "Picture 2"
    "commands": ["jpeg@"] // All images will be JPEG
  },
  /* OR */
  {
    "selector": "img",
    "mergeType": "none",
    "hash": "sha256", // No effect
    "attributes": { "alt": "Picture 1" }, // No effect
    "commands": ["jpeg@"] // No effect
  }
]

Image dimensions

NPM	JPEG	GIF	PNG	WebP	BMP	TIFF	PSD	ICO	AVIF	HEIC	HEIF
image-size [2]	x	x	x	x	x	x	x	x	x	x	x
probe-image-size [3]	x	x	x	x	x	x	x	x	x	x	x
jimp [4]	x	x	x		x	x

Attention

Element width OR height including max-width (px) AND max-height (px) being set will not be processed due to the likeliness of distortion.

{
  "selector": "img",
  "filename": "probe.png",
  /* OR */
  "mimeType": "image/png", // "image/unknown"
  "attributes": {
    "width": "detect",
    "height": "detect",
    "loading": "lazy" // Optional
  }
}

Source

<img src="probe.png" />

Output

<img src="probe.png" width="800" height="600" loading="lazy" />

Element content

http://localhost:3000/project/index.html?className=active

{
  "selector": "p.inactive",
  "type": "replace",
  "textContent": "<b>content</b>",
  "attributes": {
    "class": "{{className}}"
  }
}

Source

<p class="inactive">paragraph 1</p>
<p>paragraph 2</p>
<p class="inactive">paragraph 3</p>

Output

<p class="active"><b>content</b></p>
<p>paragraph 2</p>
<p class="active"><b>content</b></p>

Caution

Editing local files with complex nested tag content is not recommended. Try using an element “id” when there are errors building.

Manifest

The web app manifest [5] is downloaded by default and possibly modified when searching for embedded image assets:

{
  "icons": [],
  "shortcuts": [{ "icons": [] }],
  "screenshots": []
}

Tip

Image compression is supported.

It is not integrated with the NodeJS build system and the images might not appear as expected due to URL rewriting. You can disable this behavior by using either command:

{
  "selector": "link[rel=manifest]",
  "download": false
}

Inline

<head>
  <link rel="manifest" href="/manifest.json" data-chrome-file="ignore">
</head>

squared

Added in version 5.2.0:

AssetCommand property mergeType option value “preserve” was created.

Added in version 5.1.5:

AssetCommand property attributes hash map values can be replaced using search {{params}} syntax.

@pi-r/chrome

Added in version 0.6.4:

NPM package image-size is optionally supported for image dimensions.