Individual Component Imports

Import only the CSS components you need for smaller bundle sizes and custom elements

Individual Component Imports

@duskmoon-dev/core allows you to import individual component CSS files. This is useful for:

  • Custom Elements / Web Components: Encapsulate specific styles in Shadow DOM
  • Micro-frontends: Import only what each micro-frontend needs
  • Bundle optimization: Reduce CSS size by importing only used components

Available Exports

Full Library

Import the complete library (all components, themes, and base styles):

@import "@duskmoon-dev/core";

Themes Only

Import individual themes:

@import "@duskmoon-dev/core/themes/sunshine";
@import "@duskmoon-dev/core/themes/moonlight";

All Components

Import all components without themes:

@import "@duskmoon-dev/core/components";

Individual Components

Import specific components as needed:

/* Core components */
@import "@duskmoon-dev/core/components/button";
@import "@duskmoon-dev/core/components/dropdown";
@import "@duskmoon-dev/core/components/fab";
@import "@duskmoon-dev/core/components/card";
@import "@duskmoon-dev/core/components/input";
@import "@duskmoon-dev/core/components/form";
@import "@duskmoon-dev/core/components/navigation";
@import "@duskmoon-dev/core/components/modal";
@import "@duskmoon-dev/core/components/swap";
@import "@duskmoon-dev/core/components/theme-controller";

/* Data display */
@import "@duskmoon-dev/core/components/avatar";
@import "@duskmoon-dev/core/components/badge";
@import "@duskmoon-dev/core/components/chip";
@import "@duskmoon-dev/core/components/list";
@import "@duskmoon-dev/core/components/table";

/* Data entry */
@import "@duskmoon-dev/core/components/autocomplete";
@import "@duskmoon-dev/core/components/datepicker";
@import "@duskmoon-dev/core/components/file-upload";
@import "@duskmoon-dev/core/components/rating";
@import "@duskmoon-dev/core/components/slider";
@import "@duskmoon-dev/core/components/switch";

/* Feedback */
@import "@duskmoon-dev/core/components/alert";
@import "@duskmoon-dev/core/components/dialog";
@import "@duskmoon-dev/core/components/progress";
@import "@duskmoon-dev/core/components/skeleton";
@import "@duskmoon-dev/core/components/snackbar";
@import "@duskmoon-dev/core/components/toast";
@import "@duskmoon-dev/core/components/tooltip";

/* Layout */
@import "@duskmoon-dev/core/components/appbar";
@import "@duskmoon-dev/core/components/divider";
@import "@duskmoon-dev/core/components/footer";
@import "@duskmoon-dev/core/components/hero";
@import "@duskmoon-dev/core/components/indicator";
@import "@duskmoon-dev/core/components/join";
@import "@duskmoon-dev/core/components/mask";
@import "@duskmoon-dev/core/components/sidebar-layout";
@import "@duskmoon-dev/core/components/stack";

/* Navigation */
@import "@duskmoon-dev/core/components/bottom-navigation";
@import "@duskmoon-dev/core/components/breadcrumbs";
@import "@duskmoon-dev/core/components/drawer";
@import "@duskmoon-dev/core/components/link";
@import "@duskmoon-dev/core/components/megamenu";
@import "@duskmoon-dev/core/components/menu";
@import "@duskmoon-dev/core/components/navbar";
@import "@duskmoon-dev/core/components/nested-menu";
@import "@duskmoon-dev/core/components/pagination";
@import "@duskmoon-dev/core/components/stepper";
@import "@duskmoon-dev/core/components/tabs";

/* Surface */
@import "@duskmoon-dev/core/components/accordion";
@import "@duskmoon-dev/core/components/bottomsheet";
@import "@duskmoon-dev/core/components/collapse";
@import "@duskmoon-dev/core/components/popover";

/* Misc */
@import "@duskmoon-dev/core/components/timeline";

Component Reference Table

Component Import Path Size
Accordion @duskmoon-dev/core/components/accordion ~5KB
Alert @duskmoon-dev/core/components/alert ~4KB
Appbar @duskmoon-dev/core/components/appbar ~6KB
Autocomplete @duskmoon-dev/core/components/autocomplete ~6KB
Avatar @duskmoon-dev/core/components/avatar ~3KB
Badge @duskmoon-dev/core/components/badge ~4KB
Bottom Navigation (Dock) @duskmoon-dev/core/components/bottom-navigation ~6KB
Bottomsheet @duskmoon-dev/core/components/bottomsheet ~7KB
Breadcrumbs @duskmoon-dev/core/components/breadcrumbs ~5KB
Button @duskmoon-dev/core/components/button ~11KB
Card @duskmoon-dev/core/components/card ~5KB
Chip @duskmoon-dev/core/components/chip ~4KB
Collapse @duskmoon-dev/core/components/collapse ~5KB
Datepicker @duskmoon-dev/core/components/datepicker ~8KB
Dialog @duskmoon-dev/core/components/dialog ~4KB
Divider @duskmoon-dev/core/components/divider ~5KB
Dropdown @duskmoon-dev/core/components/dropdown under 4KB
Drawer @duskmoon-dev/core/components/drawer ~8KB
FAB / Speed Dial @duskmoon-dev/core/components/fab under 4KB
File Upload @duskmoon-dev/core/components/file-upload ~7KB
Footer @duskmoon-dev/core/components/footer under 2KB
Form @duskmoon-dev/core/components/form ~9KB
Hero @duskmoon-dev/core/components/hero under 2KB
Indicator @duskmoon-dev/core/components/indicator under 2KB
Input @duskmoon-dev/core/components/input ~6KB
Join @duskmoon-dev/core/components/join under 2KB
Link @duskmoon-dev/core/components/link under 2KB
List @duskmoon-dev/core/components/list ~4KB
Mask @duskmoon-dev/core/components/mask under 2KB
Modal @duskmoon-dev/core/components/modal ~6KB
Megamenu @duskmoon-dev/core/components/megamenu under 5KB
Menu @duskmoon-dev/core/components/menu under 4KB
Navigation @duskmoon-dev/core/components/navigation ~8KB
Navbar @duskmoon-dev/core/components/navbar ~6KB
Nested Menu @duskmoon-dev/core/components/nested-menu ~7KB
Pagination @duskmoon-dev/core/components/pagination ~6KB
Popover @duskmoon-dev/core/components/popover ~7KB
Progress @duskmoon-dev/core/components/progress ~5KB
Rating @duskmoon-dev/core/components/rating ~4KB
Skeleton @duskmoon-dev/core/components/skeleton ~3KB
Slider @duskmoon-dev/core/components/slider ~7KB
Sidebar Layout @duskmoon-dev/core/components/sidebar-layout under 3KB
Snackbar @duskmoon-dev/core/components/snackbar ~7KB
Stack @duskmoon-dev/core/components/stack under 2KB
Stepper (Steps) @duskmoon-dev/core/components/stepper ~7KB
Switch @duskmoon-dev/core/components/switch ~7KB
Swap @duskmoon-dev/core/components/swap under 3KB
Table @duskmoon-dev/core/components/table ~4KB
Tabs @duskmoon-dev/core/components/tabs ~6KB
Theme Controller @duskmoon-dev/core/components/theme-controller under 6KB
Timeline @duskmoon-dev/core/components/timeline ~7KB
Toast @duskmoon-dev/core/components/toast ~5KB
Tooltip @duskmoon-dev/core/components/tooltip ~7KB

FAB provides placement and action-group layout but deliberately reuses Button appearance. Import both standalone styles for FAB examples:

@import "@duskmoon-dev/core/components/button";
@import "@duskmoon-dev/core/components/fab";

Usage with Custom Elements

Individual imports are ideal for Web Components that use Shadow DOM:

Basic Custom Element

class MyButton extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <style>
        @import "@duskmoon-dev/core/components/button";
      </style>
      <button class="btn btn-primary">
        <slot></slot>
      </button>
    `;
  }
}

customElements.define('my-button', MyButton);

With Constructable Stylesheets

For better performance, use Constructable Stylesheets:

// Load CSS once
const buttonStyles = new CSSStyleSheet();
fetch(new URL('@duskmoon-dev/core/components/button', import.meta.url))
  .then(res => res.text())
  .then(css => buttonStyles.replaceSync(css));

class MyButton extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.adoptedStyleSheets = [buttonStyles];
  }

  connectedCallback() {
    this.shadowRoot.innerHTML = `
      <button class="btn btn-primary">
        <slot></slot>
      </button>
    `;
  }
}

customElements.define('my-button', MyButton);

Lit Element Example

import { LitElement, html, css, unsafeCSS } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import buttonStyles from '@duskmoon-dev/core/components/button?inline';
import cardStyles from '@duskmoon-dev/core/components/card?inline';

@customElement('my-card')
export class MyCard extends LitElement {
  static styles = [
    unsafeCSS(buttonStyles),
    unsafeCSS(cardStyles),
  ];

  @property() title = '';

  render() {
    return html`
      <div class="card">
        <div class="card-body">
          <h3 class="card-title">${this.title}</h3>
          <slot></slot>
          <div class="card-actions">
            <button class="btn btn-primary">Action</button>
          </div>
        </div>
      </div>
    `;
  }
}

Stencil.js Example

import { Component, h, Host } from '@stencil/core';

@Component({
  tag: 'my-alert',
  styleUrl: '@duskmoon-dev/core/components/alert',
  shadow: true,
})
export class MyAlert {
  render() {
    return (
      <Host>
        <div class="alert alert-info">
          <slot></slot>
        </div>
      </Host>
    );
  }
}

Usage with Bundlers

Vite

Vite handles CSS imports natively:

// Import as string
import buttonCss from '@duskmoon-dev/core/components/button?inline';

// Use in component
element.innerHTML = `<style>${buttonCss}</style>`;

Webpack

Configure CSS handling in webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
};

Then import:

import '@duskmoon-dev/core/components/button';

esbuild

import * as esbuild from 'esbuild';

await esbuild.build({
  entryPoints: ['app.js'],
  bundle: true,
  loader: { '.css': 'text' },
  outfile: 'out.js',
});

Combining Multiple Components

Create a custom bundle with only the components you need:

/* my-components.css */
@import "@duskmoon-dev/core/components/button";
@import "@duskmoon-dev/core/components/card";
@import "@duskmoon-dev/core/components/input";
@import "@duskmoon-dev/core/components/form";
@import "@duskmoon-dev/core/components/alert";

This approach reduces your CSS bundle size compared to importing the full library.

Color Variables

Individual component CSS files use CSS custom properties for colors. Ensure you have the color variables defined in your root or shadow root:

:host {
  /* Required color tokens */
  --color-primary: hsl(220 80% 55%);
  --color-primary-content: hsl(0 0% 100%);
  --color-surface: hsl(0 0% 99%);
  --color-on-surface: hsl(0 0% 10%);
  /* ... other tokens */
}

Or import a theme that defines these variables:

@import "@duskmoon-dev/core/themes/sunshine";
@import "@duskmoon-dev/core/components/button";

Best Practices

  1. Import themes first: If using individual components with themes, import the theme before components
  2. Use Constructable Stylesheets: For Web Components, this provides better performance than inline <style> tags
  3. Cache stylesheets: Load CSS files once and reuse across component instances
  4. Consider dependencies: Some components may depend on shared styles (e.g., form components often need input styles)

Next Steps