@juxio/cli NPM

Features

Write CSS in JS, with zero runtime - all styles are extracted and calculated at build time
Full support for design tokens and themes, powered by @juxio/design-tokens
Utility first - write utilities (custom css properties) which can then be used to style your components
CLI for easy management of your design tokens, themes, utilities and styles
Type-safe - autocompletion for your design tokens, breakpoints, and utilities
Full interpolation support when generating styles
Pull components and design tokens from Jux design tool

Documentation

For documentation, visit docs.jux.io.

Quickstart

Jux is a PostCSS plugin, so you can use it with any build tool that supports PostCSS.

Install Jux CLI:

npm install -D @juxio/cli postcss

Initialize a new project. This will install the necessary dependencies, and create jux.config.ts and postcss.config.js files in your project root.

npx jux init --postcss

Configure your include files:

export default {
  preflight: true,
  include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{ts,tsx}'],
  exclude: [],

  /* The core tokens of your design system */
  core_tokens: {},

  /* The themes for your design system */
  themes: {},
};

Add Jux’s @layer directive to your main CSS file:

@layer juxbase, juxtokens, juxutilities;

Start your build process and generate your CSS:

npx jux generate css -o styles.css

Include the generated CSS in your project:

import './styles.css';

import { css } from '@juxio/css';

export default function Home() {
  return (
    <div
      className={css({
        color: 'violet',
        '&:hover': {
          color: 'darkviolet',
        },
      })}
    >
      Hello from Jux 🤖
    </div>
  );
}