css.create

export type create = <const T extends Record<string, CSSProperties>>(rule: 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.

Dynamic values

You can use functions to define dynamic styles. These are processed as dynamic values at build time.

const styles = css.create({
  palette: (color: string) => ({
    backgroundColor: color,
  }),
});

export const Color = ({ color }) => {
  return (
    <span styleName={styles.palette(color)}>Dynamic Color</span>
  )
}

Atomic API

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

css.create

Example

Dynamic values

On this page