{"id":25275837,"url":"https://github.com/carbon-design-system/carbon-preprocess-svelte","last_synced_at":"2026-01-19T05:00:54.057Z","repository":{"id":41491783,"uuid":"365354999","full_name":"carbon-design-system/carbon-preprocess-svelte","owner":"carbon-design-system","description":"Svelte preprocessors for the Carbon Design System","archived":false,"fork":false,"pushed_at":"2026-01-12T15:25:29.000Z","size":1594,"stargazers_count":76,"open_issues_count":1,"forks_count":7,"subscribers_count":5,"default_branch":"main","last_synced_at":"2026-01-12T21:36:17.944Z","etag":null,"topics":["carbon","carbon-design-system","carbon-preprocess","preprocess","svelte","svelte-preprocessor"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/carbon-design-system.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"metonym"}},"created_at":"2021-05-07T21:16:59.000Z","updated_at":"2026-01-04T18:42:27.000Z","dependencies_parsed_at":"2024-03-23T21:31:05.573Z","dependency_job_id":"a026ef0c-3bb3-4c1d-96cc-e8ab9a781ad6","html_url":"https://github.com/carbon-design-system/carbon-preprocess-svelte","commit_stats":null,"previous_names":["ibm/carbon-preprocess-svelte"],"tags_count":39,"template":false,"template_full_name":null,"purl":"pkg:github/carbon-design-system/carbon-preprocess-svelte","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Fcarbon-preprocess-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Fcarbon-preprocess-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Fcarbon-preprocess-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Fcarbon-preprocess-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/carbon-design-system","download_url":"https://codeload.github.com/carbon-design-system/carbon-preprocess-svelte/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Fcarbon-preprocess-svelte/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28561842,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T03:31:16.861Z","status":"ssl_error","status_checked_at":"2026-01-19T03:31:15.069Z","response_time":67,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carbon","carbon-design-system","carbon-preprocess","preprocess","svelte","svelte-preprocessor"],"created_at":"2025-02-12T15:26:30.321Z","updated_at":"2026-01-19T05:00:54.046Z","avatar_url":"https://github.com/carbon-design-system.png","language":"TypeScript","funding_links":["https://github.com/sponsors/metonym"],"categories":[],"sub_categories":[],"readme":"# carbon-preprocess-svelte\n\n[![NPM][npm]][npm-url]\n![GitHub](https://img.shields.io/github/license/ibm/carbon-preprocess-svelte?color=262626\u0026style=for-the-badge)\n![npm downloads to date](https://img.shields.io/npm/dt/carbon-preprocess-svelte?color=262626\u0026style=for-the-badge)\n\n\u003e [Svelte preprocessors](https://svelte.dev/docs/svelte-compiler#types-preprocessor) for the Carbon Design System.\n\n## Installation\n\nInstall `carbon-preprocess-svelte` as a development dependency.\n\n```sh\n# npm\nnpm i -D carbon-preprocess-svelte\n\n# pnpm\npnpm i -D carbon-preprocess-svelte\n\n# Yarn\nyarn add -D carbon-preprocess-svelte\n\n# Bun\nbun add -D carbon-preprocess-svelte\n```\n\n## Usage\n\n- [**optimizeImports**](#optimizeimports): Svelte preprocessor that rewrites Carbon Svelte imports to their source path in the `script` block, making development compile times dramatically faster.\n- [**optimizeCss**](#optimizecss): Vite/Rollup plugin that removes unused Carbon styles, resulting in smaller CSS bundles.\n- [**OptimizeCssPlugin**](#optimizecssplugin): The corresponding `optimizeCss` plugin for Webpack that removes unused Carbon styles.\n\n### `optimizeImports`\n\n`optimizeImports` is a Svelte preprocessor that rewrites barrel imports from Carbon components/icons/pictograms packages to their source Svelte code paths. This can significantly speed up development and build compile times while preserving typeahead and autocompletion offered by integrated development environments (IDE) like VS Code.\n\nThe preprocessor optimizes imports from the following packages:\n\n- [carbon-components-svelte](https://github.com/carbon-design-system/carbon-components-svelte)\n- [carbon-icons-svelte](https://github.com/carbon-design-system/carbon-icons-svelte)\n- [carbon-pictograms-svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)\n\n```diff\n- import { Button } from \"carbon-components-svelte\";\n+ import Button from \"carbon-components-svelte/src/Button/Button.svelte\";\n\n- import { Add } from \"carbon-icons-svelte\";\n+ import Add from \"carbon-icons-svelte/lib/Add.svelte\";\n\n- import { Airplane } from \"carbon-pictograms-svelte\";\n+ import Airplane from \"carbon-pictograms-svelte/lib/Airplane.svelte\";\n```\n\n\u003e [!NOTE]\n\u003e When this preprocessor was first created, there was no workaround to optimize slow cold start times with Vite in development.\n\u003e Today, [@sveltejs/vite-plugin-svelte](https://github.com/sveltejs/vite-plugin-svelte) enables [`prebundleSvelteLibraries: true`](https://github.com/sveltejs/vite-plugin-svelte/blob/ba4ac32cf5c3e9c048d1ac430c1091ca08eaa130/docs/config.md#prebundlesveltelibraries) by default.\n\u003e However, this preprocessor is still useful for non-Vite bundlers, like Rollup and Webpack. Also, it can further improve cold start development times even with `prebundleSvelteLibraries: true`.\n\n#### SvelteKit\n\nSee [examples/sveltekit](examples/sveltekit).\n\n```js\n// svelte.config.js\nimport adapter from \"@sveltejs/adapter-static\";\nimport { vitePreprocess } from \"@sveltejs/vite-plugin-svelte\";\nimport { optimizeImports } from \"carbon-preprocess-svelte\";\n\n/** @type {import('@sveltejs/kit').Config} */\nconst config = {\n  preprocess: [\n    // Preprocessors are run in sequence.\n    // If using TypeScript, the code must be transpiled first.\n    vitePreprocess(),\n    optimizeImports(),\n  ],\n  kit: {\n    adapter: adapter(),\n  },\n};\n\nexport default config;\n```\n\n#### Vite\n\nSee [examples/vite](examples/vite).\n\n```js\n// vite.config.js\nimport { svelte } from \"@sveltejs/vite-plugin-svelte\";\nimport { vitePreprocess } from \"@sveltejs/vite-plugin-svelte\";\nimport { optimizeImports } from \"carbon-preprocess-svelte\";\n\n/** @type {import('vite').UserConfig} */\nexport default {\n  plugins: [\n    svelte({\n      preprocess: [\n        // Preprocessors are run in sequence.\n        // If using TypeScript, the code must be transpiled first.\n        vitePreprocess(),\n        optimizeImports(),\n      ],\n    }),\n  ],\n};\n```\n\n#### Rollup\n\nThis code is abridged; see [examples/rollup](examples/rollup) for a full set-up.\n\n```js\n// rollup.config.js\nimport svelte from \"rollup-plugin-svelte\";\nimport { optimizeImports } from \"carbon-preprocess-svelte\";\n\nexport default {\n  plugins: [\n    svelte({\n      preprocess: [optimizeImports()],\n    }),\n  ],\n};\n```\n\n#### Webpack\n\nThis code is abridged; see [examples/webpack](examples/webpack) for a full set-up.\n\n```js\n// webpack.config.mjs\nimport { optimizeImports } from \"carbon-preprocess-svelte\";\n\nexport default {\n  module: {\n    rules: [\n      {\n        test: /\\.svelte$/,\n        use: {\n          loader: \"svelte-loader\",\n          options: {\n            hotReload: !PROD,\n            preprocess: [optimizeImports()],\n            compilerOptions: { dev: !PROD },\n          },\n        },\n      },\n    ],\n  },\n};\n```\n\n### `optimizeCss`\n\n`optimizeCss` is a Vite plugin that removes unused Carbon styles at build time. The plugin is compatible with Rollup ([Vite](https://vitejs.dev/guide/api-plugin) extends the Rollup plugin API).\n\n```diff\n$ vite build\n\nOptimized index-CU4gbKFa.css\n- Before: 606.26 kB\n+ After:   53.22 kB (-91.22%)\n\ndist/index.html                  0.34 kB │ gzip:  0.24 kB\ndist/assets/index-CU4gbKFa.css  53.22 kB │ gzip:  6.91 kB\ndist/assets/index-Ceijs3eO.js   53.65 kB │ gzip: 15.88 kB\n```\n\n\u003e [!NOTE]\n\u003e This is a plugin and not a Svelte preprocessor. It should be added to the list of `vite.plugins`. For Vite set-ups, this plugin _is not run_ during development and is only executed when building the app (i.e., `vite build`). For Rollup and Webpack, you should conditionally apply the plugin to only execute when building for production.\n\n#### SvelteKit\n\nSee [examples/sveltekit](examples/sveltekit).\n\n```js\n// vite.config.js\nimport { sveltekit } from \"@sveltejs/kit/vite\";\nimport { optimizeCss } from \"carbon-preprocess-svelte\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n  plugins: [sveltekit(), optimizeCss()],\n});\n```\n\n#### Vite\n\nSee [examples/vite](examples/vite).\n\n```js\n// vite.config.js\nimport { svelte } from \"@sveltejs/vite-plugin-svelte\";\nimport { optimizeCss } from \"carbon-preprocess-svelte\";\n\n/** @type {import('vite').UserConfig} */\nexport default {\n  plugins: [svelte(), optimizeCss()],\n};\n```\n\n#### Rollup\n\nThis code is abridged; see [examples/rollup](examples/rollup) for a full set-up.\n\n```js\n// rollup.config.js\nimport svelte from \"rollup-plugin-svelte\";\nimport { optimizeCss } from \"carbon-preprocess-svelte\";\n\nconst production = !process.env.ROLLUP_WATCH;\n\nexport default {\n  plugins: [\n    svelte({\n      preprocess: [optimizeImports()],\n    }),\n\n    // Only apply the plugin when building for production.\n    production \u0026\u0026 optimizeCss(),\n  ],\n};\n```\n\n#### `optimizeCss` API\n\n```ts\noptimizeCss({\n  /**\n   * By default, the plugin will print the size\n   * difference between the original and optimized CSS.\n   *\n   * Set to `false` to disable verbose logging.\n   * @default true\n   */\n  verbose: false,\n\n  /**\n   * By default, pre-compiled Carbon StyleSheets ship `@font-face` rules\n   * for all available IBM Plex fonts, many of which are not actually\n   * used in Carbon Svelte components.\n   *\n   * The default behavior is to preserve the following IBM Plex fonts:\n   * - IBM Plex Sans (300/400/600-weight and normal-font-style rules)\n   * - IBM Plex Mono (400-weight and normal-font-style rules)\n   *\n   * Set to `true` to disable this behavior and\n   * retain *all* IBM Plex `@font-face` rules.\n   * @default false\n   */\n  preserveAllIBMFonts: true,\n});\n```\n\n### `OptimizeCssPlugin`\n\nFor Webpack users, `OptimizeCssPlugin` is a drop-in replacement for `optimizeCss`. The plugin API is identical to that of `optimizeCss`.\n\nThis code is abridged; see [examples/webpack](examples/webpack) for a full set-up.\n\n```js\n// webpack.config.mjs\nimport { OptimizeCssPlugin } from \"carbon-preprocess-svelte\";\n\nconst PROD = process.env.NODE_ENV === \"production\";\n\nexport default {\n  plugins: [\n    // Only apply the plugin when building for production.\n    PROD \u0026\u0026 new OptimizeCssPlugin(),\n  ],\n};\n```\n\n## Examples\n\nRefer to [examples](examples) for common set-ups.\n\n## Contributing\n\nRefer to the [contributing guidelines](CONTRIBUTING.md).\n\n## License\n\n[Apache 2.0](LICENSE)\n\n[npm]: https://img.shields.io/npm/v/carbon-preprocess-svelte.svg?color=262626\u0026style=for-the-badge\n[npm-url]: https://npmjs.com/package/carbon-preprocess-svelte\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarbon-design-system%2Fcarbon-preprocess-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarbon-design-system%2Fcarbon-preprocess-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarbon-design-system%2Fcarbon-preprocess-svelte/lists"}