Using Stylify CSS in Remix

Remix is a full stack web framework that lets you focus on the user interface and work back through web standards to deliver a fast, slick, and resilient user experience.

Stylify can be integrated into the Remix using Bundler.

Try it on StackBlitz

How to integrate the Stylify CSS into the Remix

First install the @stylify/bundler package using NPM or Yarn:

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

Also for the watch mode, we need to run two paralel tasks. This can be solved using concurrently:

yarn add -D concurrently
npm i concurrently

Next, create a file, for example stylify.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 bellow
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:

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:

"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"
}

Now when you run yarn dev, the CSS file will be generated. In production, the selectors will be mangled.

You can customize the build above however you want.

Where to go next?