{"id":16791932,"url":"https://github.com/metonym/caligula","last_synced_at":"2026-04-30T02:35:32.134Z","repository":{"id":57192931,"uuid":"253035522","full_name":"metonym/caligula","owner":"metonym","description":"Optimize CSS stylesheets for your Svelte apps","archived":false,"fork":false,"pushed_at":"2020-04-04T16:16:28.000Z","size":114,"stargazers_count":3,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-19T15:51:29.309Z","etag":null,"topics":["css-classes","optimize","prototyping","stylesheet","svelte"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/metonym.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-04T15:43:26.000Z","updated_at":"2021-01-27T12:02:58.000Z","dependencies_parsed_at":"2022-08-24T03:11:03.024Z","dependency_job_id":null,"html_url":"https://github.com/metonym/caligula","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fcaligula","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fcaligula/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fcaligula/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/metonym%2Fcaligula/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/metonym","download_url":"https://codeload.github.com/metonym/caligula/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246933169,"owners_count":20857046,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["css-classes","optimize","prototyping","stylesheet","svelte"],"created_at":"2024-10-13T08:43:33.341Z","updated_at":"2026-04-30T02:35:27.115Z","avatar_url":"https://github.com/metonym.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cimg alt=\"Caligula logo, portrait bust of emperor Caligula\" src=\"artwork/caligula-logo.jpg\" width=\"200\" /\u003e\n\n# caligula\n\n[![NPM][npm]][npm-url]\n[![Build][build]][build-badge]\n\n\u003e Optimize CSS stylesheets for your Svelte apps.\n\nThis library statically analyzes and extracts class selectors from Svelte components using the [svelte compiler](https://svelte.dev/docs#Compile_time). Given an external CSS file, the library outputs an optimized stylesheet by removing unused class rules.\n\n**Table of Contents**\n\n- [Motivation](#motivation)\n  - [Against Preprocessors](#against-preprocessors)\n- [Usage](#usage)\n  - [Output](#output)\n- [API](#api)\n- [License](#license)\n\n## Motivation\n\nOne of the quickest ways to style Svelte applications (or web apps in general) is to define an external CSS stylesheet in the HTML `head` tag.\n\n```html\n\u003c!-- index.html --\u003e\n\u003chead\u003e\n  \u003clink rel=\"stylesheet\" href=\"https://unpkg.com/uswds@2.6.0/dist/css/uswds.css\" /\u003e\n\u003c/head\u003e\n```\n\nBy design, styles written in Svelte [are scoped to the component](https://svelte.dev/docs#style). While scoped styles improve encapsulation, it is cumbersome to prefix globally applied rules with `:global`.\n\n```html\n\u003c!-- App.svelte --\u003e\n\u003cscript\u003e\n  import Accordion from \"./Accordion.svelte\";\n\u003c/script\u003e\n\n\u003cstyle\u003e\n  :global(.line-height-heading) {\n    line-height: 1.2;\n  }\n\n  :global(.font-size-sm) {\n    font-size: 0.93rem;\n  }\n\u003c/style\u003e\n\n\u003cAccordion class=\"line-height-heading font-size-sm\" /\u003e\n```\n\nThe problem is that pre-built stylesheets contain far more rules than are actually used. The CSS file for a design system or library can be hundreds of kilobytes, even after minification.\n\nFor example, the stylesheet for the [U.S. Web Design System](https://designsystem.digital.gov/) weighs in at **268 kB minified**.\n\n### Against Preprocessors\n\nOne solution is to use a preprocessor to import smaller SASS/SCSS partials.\n\nThis has two main drawbacks:\n\n- **Extra build configuration**: Using CSS preprocessors involves additional tooling and set-up. This is overkill, especially for rapid prototyping.\n- **Still a manual process**: SASS partials must be manually added or removed, which can be inefficient and error prone.\n\n## Usage\n\nInstall `caligula` as a development dependency.\n\n```bash\nyarn add -D caligula\n```\n\nIn this example, only several class selectors are used from a localy copy of the [U.S. Web Design System](https://unpkg.com/uswds@2.6.0/dist/css/uswds.css) CSS file (unminified).\n\n```js\n// postbuild.js\nconst { caligula } = require(\"caligula\");\n\ncaligula({\n  include: [\"src/**/*.svelte\"],\n  input: \"css/uswds.css\",\n});\n```\n\n### Output\n\n```diff\nnode postbuild.js\n\n# Detected 7 classes from 2 Svelte components\n# Removed 4660 classes from \"css/uswds.css\"\n- Original size: 357.915 kB\n+ New size: 10.53 kB\n\n+ \u003e 347.385 kB (97.1%) smaller!\n# \u003e Saved output to \"css/uswds.8a6dce134044.css\"\n```\n\nThe output file is minified and hashed. Its size is significantly smaller than that of the original.\n\n## API\n\n```js\ncaligula({\n  /**\n   * glob of Svelte components\n   * @type {Array.\u003cstring\u003e}\n   */\n  include: [\"src/**/*.svelte\"],\n\n  /**\n   * path to the original CSS file\n   * @type {string}\n   */\n  input: \"css/uswds.css\",\n\n  /**\n   * optional output file path\n   * @type {string} [output=undefined]\n   */\n  output: \"dist/uswds.min.css\",\n\n  /**\n   * hash the output file name\n   * @type {boolean} [hash=true]\n   */\n  hash: false,\n\n  /**\n   * cssnano minification config options\n   * @type {object} [minifyOptions={ from: undefined }]\n   */\n  minifyOptions: {},\n\n  /**\n   * hook triggered after minifying the CSS\n   * useful for appending metadata like licenses\n   * @param {string} - minified CSS\n   * @returns {string} - modified CSS\n   */\n  onMinify: (css) =\u003e `/*! uswds v2.6.0 */${css}`,\n});\n```\n\n## License\n\n[MIT](LICENSE)\n\n[npm]: https://img.shields.io/npm/v/caligula.svg?color=blue\n[npm-url]: https://npmjs.com/package/caligula\n[build]: https://travis-ci.com/metonym/caligula.svg?branch=master\n[build-badge]: https://travis-ci.com/metonym/caligula\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetonym%2Fcaligula","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmetonym%2Fcaligula","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmetonym%2Fcaligula/lists"}