Integrating Jux with Astro
This guide will walk you through setting up Jux in a Next.js project, from creating a new Next.js app to configuring Jux as a PostCSS plugin.
-
Create a new Astro project (Skip if using an existing project)
First, let’s create a new Astro project using astro create template:
Terminal npm create astro@latest -- --template my-jux-astro-appcd my-jux-astro-appTerminal pnpm create astro@latest -- --template my-jux-astro-appcd my-jux-astro-appTerminal yarn create astro@latest -- --template my-jux-astro-appcd my-jux-astro-app -
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
. During the build process, 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;In your
src/layouts/Layout.astro
or a similar global layout file, import your global CSS:src/layout/Layout.astro ---import './main.css';---<html><!-- Your page here --></html> -
Start using Jux in your project
src/components/MyStyledComponent.tsx import { css } from '@juxio/css';export const titleStyle = css({color: 'violet','&:hover': {color: 'darkviolet',},});export const MyStyledComponent = ({ children, title }) => {return (<divclassName={css({/*Strings in the brackets {} represent design tokensfrom your jux.config.ts*/border: '1px solid {color.core.grays_500}',borderRadius: '{core.dimension.spacing_100}',padding: '1.5rem',flexDirection: 'column',gap: 'clamp(0.5rem, calc(0.125rem + 1vw), 1rem)',[`.${titleStyle}`]: {marginBottom: '1rem',},})}><span className={titleStyle}>{title}</span>{children}</div>);};Import your component or style into your Astro component:
src/components/Component.astro ---import { MyStyledComponent, titleStyle } from './MyStyledComponent';---<MyStyledComponent title="Hello, Astro!"><p class={titleStyle}>From Jux 🤖</p></MyStyledComponent>
Your Astro app is now set up with Jux! You can start building your components using Jux’s CSS-in-JS capabilities while leveraging Astro’s powerful features. Remember to define your styles in separate .ts or .js files for now, and import them into your Astro components.