Stylify CSS: Code your Remix website faster with CSS-like utilities
Tags: react, remix, css, webdev
Published: 2022-12-29 16:50:29

## Introduction
[Stylify](https://stylifycss.com) is a library that uses CSS-like selectors to generate optimized utility-first CSS based on what you write.

- ✅ CSS-like selectors
- ✅ No framework to study
- ✅ Less time spent in docs
- ✅ Mangled & Extremely small CSS
- ✅ No CSS purge needed
- ✅ Components, Variables, Custom selectors
- ✅ Split CSS for pages/layouts

Also we have a page about [what problems Stylify CSS solves and why you should give it a try!](https://stylifycss.com/docs/get-started/why-stylify-css)

## Installation
Because Remix doesn't have any plugins support yet (2022), we need to use [Stylify CSS Bundler](https://stylifycss.com/docs/bundler) directly. 

So let's install the @stylify/bundler package first using NPM or Yarn:

```
npm i -D @stylify/bundler
yarn add -D @stylify/bundler
```

Also for the watch mode, we need to run two parallel tasks. This can be solved using concurrently:
```
yarn add -D concurrently
npm i concurrently
```

Next, create a file, for example `stylify.js`:

```js
const { Bundler } = require('@stylify/bundler');

const isDev = process.argv[process.argv.length - 1] === '--w';
const bundler = new Bundler({
	watchFiles: isDev,
	// Optional
	compiler: {
		mangleSelectors: !isDev,
		// https://stylifycss.com/docs/stylify/compiler#variables
		variables: {},
		// https://stylifycss.com/docs/stylify/compiler#macros
		macros: {},
		// https://stylifycss.com/docs/stylify/compiler#components
		components: {},
		// ...
	}
});

// This bundles all CSS into one file
// You can configure the Bundler to bundle CSS for each page separately
// See bundler link below
bundler.bundle([
  { files: ['./app/**/*.tsx'], outputFile: './app/styles/stylify.css' },
]);
```

When the bundler is configured, add the path to Stylify CSS in the `app/root.tsx`:

```jsx
import styles from '~/styles/stylify.css';

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

And the last step is to add scripts into the `package.json`:

```json
"scripts": {
	"build": "yarn stylify:build & cross-env NODE_ENV=production remix build",
    "dev": "concurrently 'yarn stylify:dev' 'cross-env NODE_ENV=development remix dev'",
	"stylify:build": "node stylify.js",
    "stylify:dev": "node stylify.js --w"
}
```

## Styling First Page
If we now edit the `app/routes/index.tsx` and run the `yarn dev` command, the CSS will be generated:

```jsx
export default function Index() {
	return (
		<h1 className="font-size:48px font-family:arial color:steelblue">
			Stylify + Remix = 🚀
		</h1>
	);
}
```

## Defining Components and Variables
We can also define <nuxt-link to="/docs/get-started#defining-a-component">Components</nuxt-link> and <nuxt-link to="/docs/get-started#adding-a-variable">Variables</nuxt-link>. Within a file, where they are used or in a global config.
In the code below, we use the configuration within a file, where the component is used.

```jsx
/*
stylify-variables
	blue: 'steelblue'
/stylify-variables

stylify-components
	title: 'font-size:48px font-family:arial color:$blue'
stylify-components
*/
export default function Index() {
	return (
		<h1 className="title">
			Stylify + Remix = 🚀
		</h1>
	);
}
```

## Production CSS and JSX output
The JSX and CSS can be mangled in production (configured by the `compiler.mangleSelectors`). If so, the output is even smaller and looks similar to the one below.

For the first example with utilities
```jsx
export default function Index() {
	return (
		// For utilities from first example
		<h1 className="a b c">
			Stylify + Remix = 🚀
		</h1>
	);
}
```

```CSS
.a { font-size:48px }
.b { font-family:arial }
.c { color:steelblue }
```

## Stackblitz Playground
Go ahead and try [Stylify CSS + Remix on Stackblitz](https://stackblitz.com/edit/stylify-remix-example?file=package.json,app%2Froutes%2Findex.tsx).

You can customize the build above however you want.

## Configuration
The examples above don't include everything Stylify can do:
- Define [components](https://stylifycss.com/docs/stylify/compiler#components)
- Add [custom selectors](https://stylifycss.com/docs/stylify/compiler#customselectors)
- Configure [your macros](https://stylifycss.com/docs/stylify/compiler#macros) like `ml:20px` for margin-left
- Define [custom screens](https://stylifycss.com/docs/stylify/compiler#screens)
- You can map [nested files](https://stylifycss.com/docs/bundler#files-content-option) in the template
- And a lot more

Feel free to [check out the docs](https://stylifycss.com/docs/get-started) to learn more 💎.

## Let me know what you think!
If you like the idea, let me know that by [starring Stylify repo](https://github.com/stylify/packages) ❤️.

I will be happy for any feedback! The [Stylify](https://stylifycss.com) is still a new Library and there is a lot of space for improvement 🙂.