Skip to content

Integrating Jux with PostCSS

Installing Jux as PostCSS plugin is the recommended way to seamlessly use Jux in your project. This guide will walk you through the steps to set up Jux as a PostCSS plugin in your project.

Install Jux CLI

npm install -D @juxio/cli postcss

pnpm add -D @juxio/cli postcss

yarn add -D @juxio/cli postcss

Initialize a new project
Terminal
```
npx jux init --postcss
```
This will install the necessary dependencies, and create jux.config.ts and postcss.config.js files in your project root.
postcss.config.js
```
module.exports = {
    plugins: {
        '@juxio/postcss': {}
    }
}
```

Configure your include files

Add the path to your source files in jux.config.ts. Jux will scan these files to generate the CSS file.

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
main.css
```
@layer juxbase, juxtokens, juxutilities;
```

Start your build process

PostCSS CLI
PostCSS API

postcss src/main.css -o output.css

const postcss = require('postcss');
const { readFileSync } = require('fs-extra');

const cssText = readFileSync('index.css', 'utf-8');
postcss()
  .process(cssText, { from: 'index.css', to: 'output.css' })
  .then((result) => {
    console.log(result.css);
  });

Include the generated CSS file in your project and start using Jux to style your components.

import './main.css';

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

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

Use Jux in your project

Start using Jux to style your components.

import './main.css';

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

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