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 StackBlitzHow 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 parallel 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 config info https://stylifycss.com/en/docs/stylify/compiler#configuration
compiler: {
// https://stylifycss.com/en/docs/stylify/compiler#variables
variables: {},
// https://stylifycss.com/en/docs/stylify/compiler#macros
macros: {},
// https://stylifycss.com/en/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
:
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?
- 🚀 Learn how to get started
- 🔌 Check out @stylify/bundler configuration
- ⚙️ Or configure Stylify right away: