JSwaggerSheets

A minimal and native take on CSS-in-JS

• Code of Conduct
• Contributing

Features

• Minimal and lightweight CSS-in-JS solution
• Utilizes native constructable stylesheets and adopted stylesheets
• Supports CSS Modules-like syntax
• Allows dynamic creation and adoption of stylesheets
• Natively supported technologies for better performance

Installation

npm i @shgysk8zer0/jswaggersheets

Example

import * as Swagger from '@shgysk8zer0/jswaggersheets';
import { btnStyles } from './styles.js';

// Set Document-wide styles
Swagger.setStyles(document, {
  '.card': {
      display: 'inline-block',
      border: '1px solid #dadada',
  }
}, { media: 'screen', baseURL: document.baseURL });

// Scoped to a container (Adds a unique id if necessary)
Swagger.addStyles(document.querySelector('.container'), btnStyles);

// Scoped to a web component's ShadowRoot
const el = document.querySelector('.selector');
const shadow = el.attachShadow({ mode: 'closed' });
el.shadowRoot.append(...el.children);
Swagger.addStyles(shadow, btnStyles);