风格CSS：用类似于CSS的实用程序更快地编码您的混音网站
#css #网络开发人员 #react #remix

介绍

Stylify是一个使用CSS样选择器的库来根据您编写的内容来生成优化的实用程序 - 首先CSS。

  • 类似CSS的选择器
  • 没有学习框架
  • 少于文档中花费的时间
  • 粘合和极小的CSS
  • 不需要CSS清除
  • 组件，变量，自定义选择器
  • split css for Pages/Layouts

我们也有一个有关what problems Stylify CSS solves and why you should give it a try!

的页面

安装

由于混音尚无任何插件支持（2022），因此我们需要直接使用Stylify CSS Bundler。

因此，让我们首先使用NPM或纱线安装 @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,
    // 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' },
]);

配置捆绑器时，在app/root.tsx中添加路径：

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和JSX输出

JSX和CSS可以在生产中被弄脏（由compiler.mangleSelectors配置）。如果是这样，输出甚至更小，并且看起来与下面的输出相似。

对于实用程序的第一个示例

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

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

Stackblitz游乐场

继续尝试Stylify CSS + Remix on Stackblitz。

您可以根据需要自定义上述构建。

配置

上面的示例不包括Styllify可以做的所有内容：

随时可以了解check out the docs了解更多ð。

让我知道你的想法！

如果您喜欢这个主意，请让我知道starring Stylify repo€€。

我会为任何反馈感到高兴！ Stylify仍然是一个新图书馆，并且有很多改进的空间ð。