Skip to content

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.

  1. 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-app
    cd my-jux-astro-app
  2. Install Jux CLI
    Terminal
    npm install -D @juxio/cli postcss
  3. 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': {}
    }
    }
  4. 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: {},
    };
  5. 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>
  6. 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 (
    <div
    className={css({
    /*
    Strings in the brackets {} represent design tokens
    from 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.