Skip to content

chore(widgets): Add PostCSS build pipeline for icon management - #10514

Merged
chrisgervang merged 5 commits into
masterfrom
chr/postcss-pipeline-v1
Aug 5, 2026
Merged

chore(widgets): Add PostCSS build pipeline for icon management#10514
chrisgervang merged 5 commits into
masterfrom
chr/postcss-pipeline-v1

Conversation

@chrisgervang

@chrisgervang chrisgervang commented Jul 30, 2026

Copy link
Copy Markdown
Collaborator

Closes #10512

Background

The widget stylesheet embeds ~15 SVG icons as inline data URLs with full SVG markup manually copy-pasted into CSS. This makes icons difficult to audit, update, and diff.

Change List

  • Store icons as separate .svg files in src/icons/ — one file per icon, trivially auditable and diffable
  • Replace cp build with PostCSS pipeline using postcss-inline-svg to resolve svg-load() directives into inline data URIs at build time
  • Add autoprefixer as a safety net for future vendor prefix needs (adds -webkit-mask-image back in the output for broader compat)
  • Source CSS uses readable svg-load("icons/fullscreen.svg") syntax instead of multi-line data URLs

Prior Art

  • MapLibre GL JS uses exactly this setup: postcss + postcss-inline-svg + autoprefixer, with SVGs stored in src/css/svg/

Source CSS before → after

/* Before: inline data URL */
mask-image: var(--icon-fullscreen-enter, url('data:image/svg+xml,<svg xmlns=...>...</svg>'));

/* After: svg-load directive (resolved at build time) */
mask-image: var(--icon-fullscreen-enter, svg-load("icons/fullscreen.svg"));

Stack

This PR is stacked on #10513 (icon cleanup PR).


Note

Low Risk
Build and asset-pipeline changes only; runtime CSS behavior should match prior inlined icons, with no security or data-handling impact.

Overview
Replaces inline SVG data URLs in the widget stylesheet with svg-load() references to files under src/icons/, and builds the shipped CSS through PostCSS instead of copying source CSS verbatim.

The @deck.gl/widgets build script now runs postcss with postcss-inline-svg (icons → inline data URIs at build time) and autoprefixer (e.g. -webkit-mask-image). deck.gl and pydeck dev hot-reload now read modules/widgets/dist/stylesheet.css so they pick up the processed output. Root devDependencies add postcss, postcss-cli, postcss-inline-svg, and autoprefixer.

Reviewed by Cursor Bugbot for commit d6deca0. Bugbot is set up for automated code reviews on this repo. Configure here.

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit 152e735. Configure here.

Comment thread modules/widgets/package.json
@coveralls

coveralls commented Jul 30, 2026

Copy link
Copy Markdown

Coverage Status

coverage: 83.748% (-0.01%) from 83.759% — chr/postcss-pipeline-v1 into master

Base automatically changed from chr/google-symbol-icons to master July 31, 2026 00:30
chrisgervang and others added 2 commits July 30, 2026 17:31
Replace `cp` with a PostCSS pipeline that resolves `svg-load()` directives
into inline data URIs at build time. Icons are now stored as individual
.svg files in src/icons/, making them easy to audit, diff, and update.

Closes #10512

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Update modules/main and pydeck dev mode to copy/read from
dist/stylesheet.css (PostCSS output) instead of the source file
which now contains unresolved svg-load() directives.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@chrisgervang
chrisgervang force-pushed the chr/postcss-pipeline-v1 branch from eb8635b to 65534d3 Compare July 31, 2026 00:31
@chrisgervang chrisgervang added this to the v9.4 milestone Aug 5, 2026
@chrisgervang

Copy link
Copy Markdown
Collaborator Author

@copilot resolve the merge conflicts in this pull request

…e-v1

# Conflicts:
#	yarn.lock

Co-authored-by: chrisgervang <2461547+chrisgervang@users.noreply.github.com>

Copilot AI commented Aug 5, 2026

Copy link
Copy Markdown
Contributor

@copilot resolve the merge conflicts in this pull request

Merged master into this branch and resolved the yarn.lock conflict by regenerating it with yarn install. The branch is now up to date with master (commit ceb5ba4).

@chrisgervang
chrisgervang merged commit 3999747 into master Aug 5, 2026
5 checks passed
@chrisgervang
chrisgervang deleted the chr/postcss-pipeline-v1 branch August 5, 2026 16:58
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

widgets: Add PostCSS build pipeline for icon management

4 participants