@plumeria/core

Installation

To start using Plumeria, install the following two packages:

npm install --save @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

API

css.create()

Styles are defined as a map of CSS rules using css.create(). In the example below, there are 2 different CSS rules. The names "box" and "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:

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

css.global()

This API lets you define global CSS. You need to import the file containing css.global() wherever you use it (e.g. the top-level root).

css.global({
  h2: {
    fontSize: 24,
  },
  h3: {
    fontSize: 34,
  },
});

The compiler extracts the CSS rules, replacing the rules in the source code with the compiled CSS.

cx

Merges strings such as class names and pseudos.

const styles = css.create({
  text: {
    [cx(css.pseudo.hover, css.pseudo.after)]: {
      color: 'yellow',
      opacity: 0.9,
    },
  },
});

rx

React JSX only features

React inline-style are offloaded using only static sheet the css variables.
It is can pass states to multiple variables at once.

'use client';

import { useState } from 'react';
import { css, rx } from '@plumeria/core';

const styles = css.create({
  bar: {
    width: 'var(--width)',
    background: 'aqua',
  },
});

export const Component = () => {
  const [state, setState] = useState(0);
  return (
    <di>
      <button onClick={() => setState((prev) => prev + 10)}>count</button>
      <div {...rx(styles.bar, { '--width': state + 'px' })} />
    </di>
  );
};

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.defineThemeVars()

Define data-theme and regular variables 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 colors = css.defineThemeVars({
  normal: 'white',
  text_primary: {
    default: 'rgb(60,60,60)',
    light: 'black',
    dark: 'white',
    [css.media.max('width: 700px')]: 'gray',
  },
  bg_primary: {
    light: 'white',
    dark: 'black',
  },
});

css.colors.darken()

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

css.colors.darken('skyblue', 0.12);
css.colors.darken('skyblue', '12%');

Linter

eslint-plugin-zss-lint is a linter built for CSS-in-JS libraries built with zss-engine.

Rules:
- sort-properties
- validate-values
- no-unused-keys

Type safety relies on this eslint-plugin. It includes all properties, excluding deprecated and experimental.

How Plumeria works

Plumeria complies with Semantic HTML, which means that it uses one style for each class name.

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

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

This is necessary to preserve the CSS syntax and the concept of keeping track of classes.
In this code, box and text are converted to class names with a prefix that makes the object a hash: .box_ybg34i .text_ybg34i
These classes are designed to be used in CSS syntax.