Carbon Preprocess Svelte

Overview:

The carbon-preprocess-svelte is a collection of Svelte preprocessors for the Carbon Design System. It provides several useful features such as optimizing imports, removing unused CSS, inlining icons and pictograms, extracting headings, and including arbitrary content in the script and markup blocks.

Features:

• optimizeImports: Rewrites Carbon Svelte imports to their source path in the script block, speeding up compile times during development while preserving typeahead and autocompletion hinting.
• optimizeCss: Rollup plugin that removes unused CSS using PurgeCSS.
• elements: Computes Carbon tokens in the style block, allowing the use of design system token names instead of hardcoded values.
• icons: Inlines Carbon SVG icons in the markup block.
• pictograms: Inlines Carbon SVG pictograms in the markup block.
• collectHeadings: Extracts heading elements from the markup, useful for creating a table of contents.
• include: Prepends or appends arbitrary content to the script and markup blocks.

Summary:

The carbon-preprocess-svelte theme is a collection of preprocessors for the Carbon Design System in Svelte. It provides various features to optimize and enhance the development experience, including rewriting imports, removing unused CSS, inlining icons and pictograms, extracting headings, and including custom content. By integrating these preprocessors into your Svelte projects, you can improve performance, maintainability, and code organization when working with the Carbon Design System.