用Stylify CSS更快地编码你的Remix网站

使用Stylify CSS快速、轻松地为您的Remix应用设计风格。为大型页面拆分CSS，定义CSS组件和变量，获得极小的CSS。

NoLimit Wehosting for $2/month.
Code WN241PJLO2

介绍

Stylify是一个库，它使用类似CSS的选择器，根据你所写的内容生成优化的实用优先的CSS。

• ✅ 类似CSS的选择器
• ✅ 不需要研究框架
• ✅ 花在文档上的时间更少
• ✅ 纠结&极小的CSS
• ✅ 不需要清除CSS
• ✅ 组件、变量、自定义选择器
• ✅ 它可以生成多个CSS捆绑包

我们也有一个关于Stylify CSS解决了什么问题，以及为什么你应该尝试一下！

安装

因为Remix还没有任何插件支持（2022年），我们需要直接使用Stylify CSS Bundler。首先，用NPM或Yarn安装@stylify/bundler软件包：

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

同样对于观察模式，我们需要运行两个并行任务。这可以用并发的方式来解决：

yarn add -D concurrently
npm i concurrently

接下来，创建一个文件，例如stylify.js：

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

const isDev = process.argv[process.argv.length - 1] === '--w';
const bundler = new Bundler({
	watchFiles: isDev,
	// 可选
	compiler: {
		mangleSelectors: !isDev,
		// 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: {},
		// ...
	}
});

// 这将所有的CSS捆绑到一个文件中
// 你可以配置捆绑器，为每个页面单独捆绑CSS。
// 请看下面的捆绑器链接
bundler.bundle([
	{ files: ['./app/**/*.tsx'], outputFile: './app/styles/stylify.css' },
]);

当捆绑器配置好后，在app/root.tsx中添加Stylify CSS的路径：

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

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

最后一步是在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"
}

塑造第一页的风格

如果我们现在编辑app/routes/index.tsx并运行yarn dev命令，CSS将被生成：

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

定义组件和变量

我们还可以定义组件和变量。在一个文件中，在使用它们的地方或在一个全局配置中。 在下面的代码中，我们在使用该组件的文件中使用配置。

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

生产CSS和JJSX输出

JSX和CSS可以在生产中被处理（通过compiler.mangleSelectors配置）。如果是这样，输出就更小了，看起来与下面类似。

对于第一个带有实用工具的例子

export default function Index() {
	return (
		// 对于第一个例子中的实用工具
		<h1 className="a b c">
			Stylify + Remix = 🚀
		</h1>
	);
}

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

Stackblitz Playground

继续尝试Stylify CSS + Remix on Stackblitz。

你可以随心所欲地定制上面的构建。