Remix

A simple guide to setup Atomizer with Remix.

Create a new project

If you do not have a project setup already, you can create a new one using Remix’s Getting Started page.

npx create-remix@latest my-app
cd my-app

Install Atomizer

Install the Atomizer npm package into your project. Concurrently, is not required but it makes it easier to run multiple scripts at the same time.

npm install atomizer concurrently -D

Create your Atomizer config

Create an atomizer.config.js config file so that Atomizer can parse your Remix files.

module.exports = {
    content: [
        './app/**/*.{js,ts,jsx,tsx}',
    ],
}

Update your run scripts

You will need to execute Atomizer when you start your app. The easiest way to do this is by updating the run scripts to execute Atomizer along side other Remix tasks. Make the following modifications to your project’s package.json file.

{
  "scripts": {
    "build": "npm run build:css && remix build",
    "build:css": "atomizer -o app/styles/atomizer.css -w",
    "dev": "concurrently \"npm run build:css\" \"run-p \"dev:*\"\""
    // ...
  }
}

We recommend adding app/styles to your .gitignore.

Add the Atomizer CSS

Add the atomizer.css file to the Remix app/root.jsx file.

import atomizer from './styles/atomizer.css';

export function links() {
    return [{ rel: 'stylesheet', href: atomizer }];
}

Start your build process

Run your build setup as configured in your project’s package.json.

npm run dev

Begin using Atomizer

Start adding Atomizer classes to your code base, an example app/routes/index.jsx file.

export default function Index() {
    return (
        <h1 className="Fw(b) Fz(2rem)">Welcome to Remix</h1>
    );
}