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
Terminal npm install -D @juxio/cli postcssTerminal pnpm add -D @juxio/cli postcssTerminal yarn add -D @juxio/cli postcss -
Initialize a new project
Terminal npx jux init --postcssThis will install the necessary dependencies, and create
jux.config.ts
andpostcss.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.jux.config.ts 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
Terminal postcss src/main.css -o output.csspostcss-use-api.js 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.
index.tsx import './main.css';import { css } from '@juxio/css';export default function Home() {return (<divclassName={css({color: 'violet','&:hover': {color: 'darkviolet',},})}>Hello from Jux 🤖</div>);} -
Use Jux in your project
Start using Jux to style your components.
index.tsx import './main.css';import { css } from '@juxio/css';export default function Home() {return (<divclassName={css({color: 'violet','&:hover': {color: 'darkviolet',},})}>Hello from Jux 🤖</div>);}