create

export type create = <const T extends Record<string, CSSProperties>>(rule: CreateStyleType<T>)=> ReturnType<T>;
export const create: create;

create defines css styles using plain JavaScript style objects.
type-safe・autocomplete・lintable

Only the styles you use in styleName will be ondemand compiled.

Example

TypeScript

import * as css from '@plumeria/core'

const styles = css.create({
  container: {
    display: 'flex',
    justifyContent: 'space-between',
  },
  text: {
    fontSize: '14px',
    textDecoration: 'none',
  },
})

export default function App() {
  return (
    <div
      styleName={[
        styles.container,
        styles.text
      ]}
    />
  );
}

The call is cleaned up by the bundler.

Compiled:

<div className="xxp6epoh xwbwwha1 xbief8v4 xzllkng3" />

Generated CSS:

.xxp6epoh {
  display: flex;
}
.xwbwwha1 {
  justify-content: space-between;
}
.xbief8v4:not(#\#) {
  font-size: 14px;
}
.xzllkng3 {
  text-decoration: none;
}

Compiles each style CSS property into a unique, atomic, and hashed class name. This prevents style collisions and maximizes reusability.

Atomic API

Unique atom classes are reused without duplication, keeping the amount of class names constant.

create

Example

On this page