SolidJS

A simple guide to setup Atomizer with SolidJS.

Create a new project

If you do not have a project setup already, you can create a new one using the SolidJS Getting Started guide.

npx degit solidjs/templates/js my-app
cd my-app
npm install

Install the plugin

SolidJS uses vite to build the application. You can use our vite plugin as part of the atomizer-plugins package to setup Atomizer. First you must install the dependency.

npm i atomizer-plugins -D

Create your Atomizer config

Create an atomizer.config.js config file so that SolidJS can parse your project files.

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

Update the vite config

Update the vite.config.js config file and add the Atomizer plugin.

// ...
import { vite } from 'atomizer-plugins';
import atomizerConfig from './atomizer.config.js';

const atomizerPlugin = vite({
    config: atomizerConfig,
    outfile: 'atomizer.css',
});

export default defineConfig({
    plugins: [atomizerPlugin, solidPlugin()],
    // ...
});

Add the Atomizer CSS

Add the generated dist/atomizer.css file to your src/index.jsx file:

import '../dist/atomizer.css';
// ...

Start your build process

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

npm run build
npm run dev

Begin using Atomizer

Start adding Atomizer classes to your code base; src/App.js for example.

export default function App() {
    return (
        <h1 className="Fw(b) Fz(2rem)">Welcome!</h1>
    )
}