@plumeria/core

Zero-runtime CSS in JS library in TypeScript.

Installation

To start using Plumeria, Install the following two packages:

npm install @plumeria/core

Compiler

To compile @plumeria/core, for example, to use npx css, install
@plumeria/compiler for static extraction through the build process.

npm install --save-dev @plumeria/compiler

StyleSheet

Import stylesheet in your application's entry point.
Applies the static stylesheet for production environments.

import '@plumeria/core/stylesheet.css';

API

css.create()

Styles are defined as a map of CSS rules using css.create(). In the example below, there are 2 different CSS className. The className styles.box and styles.text are arbitrary names given to the rules.

import { css } from '@plumeria/core';

const styles = css.create({
  box: {
    width: '100%',
    color: 'rgb(60,60,60)',
  },
  text: {
    color: 'yellow',
  },
});

Pseudo and media queries can be wrapped in property style definitions:
Also, any properties that are not wrapped will conform to that className.

const styles = css.create({
  box: {
    [css.media.max('width: 900px')]: {
      width: '100%',
      color: 'rgb(60,60,60)',
    },
  },
  text: {
    color: '#333',
    [css.pseudo.hover]: {
      color: 'skyblue',
      opacity: 0.9,
    },
  },
});

css.global()

This API lets you define global CSS.

css.global({
  html: {
    width: '100%',
    height: '100%',
    padding: 0,
    margin: 0,
  },
  body: {
    position: 'relative',
    width: 600,
  },
  h1: {
    fontSize: 32,
  },
  h2: {
    fontSize: 24,
  },
  h3: {
    fontSize: 16,
  },
});

css.keyframes()

Define @keyframes and set the return value directly to animationName.

const fade = css.keyframes({
  from: {
    opacity: 0,
  },
  to: {
    opacity: 1,
  },
});

const styles = css.create({
  box: {
    animationName: fade,
    animationDuration: '1s',
  },
});

css.defineVars()

Defines custom CSS variables (custom properties) at the :root level.
This API allows you to declare design tokens such as spacing, sizes, or other constants, which can be referenced throughout your styles using the tokens.sm to var(--sm) syntax.

const tokens = css.defineVars({
  xs: 240,
  sm: 360,
  md: 480,
  lg: 600,
  xl: 768,
});

css.defineTheme()

Define data-theme as objects.
A default compile to :root, and the rest as a string compile to data-theme, You can also use media and container here.

const themes = css.defineTheme({
  text_primary: {
    default: 'rgb(60,60,60)',
    light: 'black',
    dark: 'white',
    [css.media.maxWidth(700)]: 'gray',
  },
  bg_primary: {
    light: 'white',
    dark: 'black',
  },
});

css.color

Mixes #000 or #FFF into the color.
The first argument takes the color and the second argument takes the same value as opacity (string % or number).

color: css.color.darken('skyblue', 0.12),
color: css.color.lighten('navy', 0.6),
color: css.color.skyblue,
color: css.color.navy,

cx

Merges strings such as class names and pseudo.

cx(css.pseudo.hover, css.pseudo.after); // ":hover::after"
cx(styles.text, styles, box); // "text_hash box_hash"

ESLint

@plumeria/eslint-plugin

Rules: recommended

- no-inner-call:(error)
- no-unused-keys:(warn)
- sort-properties:(warn)
- validate-values:(warn)

It is recommended to use it in conjunction with TypeScript completion, which is one of the big advantages of using plumeria.

License

plumeria is MIT licensed.