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.

Installation:

To install the carbon-preprocess-svelte theme, you can use either Yarn, NPM, or pnpm. Here are the installation commands for each package manager:

• Yarn:

yarn add carbon-preprocess-svelte

• NPM:

npm install carbon-preprocess-svelte

• pnpm:

pnpm install carbon-preprocess-svelte

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.