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>
);
}