项目作者: metonym

项目描述 :
Optimize CSS stylesheets for your Svelte apps
高级语言: TypeScript
项目地址: git://github.com/metonym/caligula.git
创建时间: 2020-04-04T15:43:26Z
项目社区:https://github.com/metonym/caligula

开源协议:MIT License

下载


Caligula logo, portrait bust of emperor Caligula

caligula

NPM
Build

Optimize CSS stylesheets for your Svelte apps.

This library statically analyzes and extracts class selectors from Svelte components using the svelte compiler. Given an external CSS file, the library outputs an optimized stylesheet by removing unused class rules.

Table of Contents

Motivation

One 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.

  1. <!-- index.html -->
  2. <head>
  3. <link rel="stylesheet" href="https://unpkg.com/uswds@2.6.0/dist/css/uswds.css" />
  4. </head>

By design, styles written in Svelte are scoped to the component. While scoped styles improve encapsulation, it is cumbersome to prefix globally applied rules with :global.

  1. <!-- App.svelte -->
  2. <script>
  3. import Accordion from "./Accordion.svelte";
  4. </script>
  5. <style>
  6. :global(.line-height-heading) {
  7. line-height: 1.2;
  8. }
  9. :global(.font-size-sm) {
  10. font-size: 0.93rem;
  11. }
  12. </style>
  13. <Accordion class="line-height-heading font-size-sm" ></Accordion>

The 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.

For example, the stylesheet for the U.S. Web Design System weighs in at 268 kB minified.

Against Preprocessors

One solution is to use a preprocessor to import smaller SASS/SCSS partials.

This has two main drawbacks:

  • Extra build configuration: Using CSS preprocessors involves additional tooling and set-up. This is overkill, especially for rapid prototyping.
  • Still a manual process: SASS partials must be manually added or removed, which can be inefficient and error prone.

Usage

Install caligula as a development dependency.

  1. yarn add -D caligula

In this example, only several class selectors are used from a localy copy of the uswds@2.6.0/dist/css/uswds.css">U.S. Web Design System CSS file (unminified).

  1. // postbuild.js
  2. const { caligula } = require("caligula");
  3. caligula({
  4. include: ["src/**/*.svelte"],
  5. input: "css/uswds.css",
  6. });

Output

  1. node postbuild.js
  2. # Detected 7 classes from 2 Svelte components
  3. # Removed 4660 classes from "css/uswds.css"
  4. - Original size: 357.915 kB
  5. + New size: 10.53 kB
  6. + > 347.385 kB (97.1%) smaller!
  7. # > Saved output to "css/uswds.8a6dce134044.css"

The output file is minified and hashed. Its size is significantly smaller than that of the original.

API

  1. caligula({
  2. /**
  3. * glob of Svelte components
  4. * @type {Array.<string>}
  5. */
  6. include: ["src/**/*.svelte"],
  7. /**
  8. * path to the original CSS file
  9. * @type {string}
  10. */
  11. input: "css/uswds.css",
  12. /**
  13. * optional output file path
  14. * @type {string} [output=undefined]
  15. */
  16. output: "dist/uswds.min.css",
  17. /**
  18. * hash the output file name
  19. * @type {boolean} [hash=true]
  20. */
  21. hash: false,
  22. /**
  23. * cssnano minification config options
  24. * @type {object} [minifyOptions={ from: undefined }]
  25. */
  26. minifyOptions: {},
  27. /**
  28. * hook triggered after minifying the CSS
  29. * useful for appending metadata like licenses
  30. * @param {string} - minified CSS
  31. * @returns {string} - modified CSS
  32. */
  33. onMinify: (css) => `/*! uswds v2.6.0 */${css}`,
  34. });

License

MIT