Tree-shake to specific modules

Use this when the all-in-one bundle is bigger than you need and you want to ship only the components you actually use.

Pass a $feature-list

The simplest path. List the flags you want emitted; everything else is stripped. The flat category-name shape mirrors how flags are referenced internally.

// app.scss: opt in via the $feature-list
@use '@adnap/krysalicss' with (
  $feature-list: (
    base-reset,
    base-global,
    typography-base,
    typography-title,
    typography-link,
    layout-container,
    layout-flex,
    element-button,
    helper-breakpoints,
  ),
);

Available flags

  • base-reset
  • base-global
  • layout-container
  • layout-flex
  • layout-grid
  • layout-hero
  • layout-footer
  • typography-base
  • typography-title
  • typography-link
  • typography-content
  • typography-table
  • module-card
  • module-alert
  • module-field
  • module-navbar
  • module-modal
  • module-tabs
  • module-dropdown
  • module-section
  • element-button
  • element-badge
  • element-progress
  • element-text-input
  • element-textarea
  • element-select
  • element-checkbox
  • element-radio
  • element-switch
  • element-file
  • element-range
  • helper-breakpoints
  • helper-state
  • helper-visibility
  • helper-spacing
  • helper-text
  • helper-color
  • helper-flex
  • helper-sizing
  • helper-position
  • helper-shadow
  • helper-border
  • helper-interactions
  • helper-ratio
  • helper-object-fit
  • helper-overflow
  • helper-stack
  • element-spinner
  • element-box
  • element-divider
  • module-breadcrumb
  • module-pagination
  • typography-lead
  • typography-blockquote
  • typography-list
  • helper-font-size
  • helper-line-height
  • helper-tooltip
  • module-buttons
  • module-toast
  • module-popover
  • element-image
  • typography-figure

Per-module imports

For maximum control, skip the entry file and pull the modules directly. This requires you to import variables and a theme yourself:

// app.scss: compose your own entry from per-module imports
@use '@adnap/krysalicss/variables';
@use '@adnap/krysalicss/helper/breakpoints';
@use '@adnap/krysalicss/typography/base';
@use '@adnap/krysalicss/typography/title';
@use '@adnap/krysalicss/element/button';
@use '@adnap/krysalicss/theme/default';