Skip to content

Add webpack 5 demo for asset release#2

Merged
timea-solid merged 3 commits intomainfrom
copilot/add-webpack-for-assets-release
Apr 19, 2026
Merged

Add webpack 5 demo for asset release#2
timea-solid merged 3 commits intomainfrom
copilot/add-webpack-for-assets-release

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Apr 19, 2026

This PR restructures the repository into an npm-publishable workspaces monorepo for frameworkless theme tokens and split icon assets. It adds package outputs and docs for webpack consumers to import only the icons they use while supporting light/dark theme variables.

Monorepo/workspace foundation
    Added root npm workspace config (packages/*) and root build orchestration.
    Added shared dev dependency (svgo) and repo-level ignore rules for generated/package-manager artifacts.

@solidos/tokens package
    Added packages/tokens/src/themes.css with base semantic tokens and data-theme="light" | "dark" overrides.
    Added package metadata and export mapping for themes.css.
    Added package README with usage and theme-switching guidance.

@solidos/icons package
    Added source split:
        packages/icons/src/icons/ for single-color UI SVGs
        packages/icons/src/logos/ for multi-color logo assets
    Added package metadata with subpath exports for per-file imports:
        @solidos/icons/icons/*
        @solidos/icons/logos/*
    Added package README documenting:
        per-file imports for webpack bundle-size control
        UI icon consumption via CSS mask + --icon-color
        logo consumption via <img>.

Build tooling
    Added minimal Node build scripts:
        tokens: copy src/themes.css to publishable dist/themes.css
        icons: SVGO optimization + emit to dist/icons and dist/logos
            more aggressive pipeline for UI icons
            conservative pipeline for logos.

Repository docs
    Replaced root README content with monorepo/package overview, build instructions, and webpack 5 asset/resource consumer example.

import '@solidos/tokens/themes.css';
import searchIconUrl from '@solidos/icons/icons/search.svg';

const icon = document.createElement('span');
icon.className = 'Icon';
icon.style.setProperty('--icon-mask', url("${searchIconUrl}"));

Original prompt

This pull request was created from Copilot chat.

Adds a working webpack 5 example under examples/webpack-demo/ to demonstrate how consumers bundle @solidos/tokens and @solidos/icons. Also merges the monorepo foundation (packages, build scripts, workspace config) from the sibling PR as the base.

webpack demo (examples/webpack-demo/)

  • webpack.config.jstype: 'asset/resource' for SVGs; only imported icons are emitted (tree-shakeable). CSS extracted via mini-css-extract-plugin.
  • src/index.js — imports theme tokens + two UI icons + logo; toggles data-theme at runtime.
  • public/index.html — includes inline CSS mask styles for icon rendering.
  • package.json — uses file: references to local workspace packages (pre-publish compatible).
// webpack.config.js (key rules)
{ test: /\.svg$/i,  type: 'asset/resource' },          // only emits imported SVGs
{ test: /\.css$/i,  use: [MiniCssExtractPlugin.loader, 'css-loader'] }
// src/index.js
import '@solidos/tokens/themes.css';
import searchIconUrl from '@solidos/icons/icons/search.svg'; // only this SVG is emitted

Other

  • .gitignore — added examples/*/dist/.
  • Root README.md — added "Webpack demo" section pointing to the example.

@timea-solid timea-solid marked this pull request as ready for review April 19, 2026 12:11
Copilot AI requested a review from timea-solid April 19, 2026 12:11
@timea-solid timea-solid merged commit b1262b4 into main Apr 19, 2026
1 check passed
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.

2 participants