使用Stylifycss更快地设计SolidJS网站
#javascript #css #react #solidjs

使用Stylify CSS类似于CSS的实用程序，可以快速轻松地轻松，轻松地轻松，轻松。

介绍

Stylify是一个库，它使用类似于CSS的选择器根据您的编写来生成优化的实用程序 - 首先CSS。

类似CSS的选择器
ð没有学习的框架
ð€少于文档
ð§°且极小的CSS
ð不需要清除
ð组件，变量，自定义选择器
ð可以生成多个CSS捆绑包

安装

使用CLI的安装风格：

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

将以下配置添加到vite.config.js：

import { defineConfig } from 'vite';
import { stylifyVite } from '@stylify/unplugin';
import solidPlugin from 'vite-plugin-solid';

const stylifyPlugin = stylifyVite({
    bundles: [{ outputFile: './src/stylify.css', files: ['./src/**/*.jsx'] }],
    // Optional
    compiler: {
        // https://stylifycss.com/docs/stylify/compiler#variables
        variables: {},
        // https://stylifycss.com/docs/stylify/compiler#macros
        macros: {},
        // https://stylifycss.com/docs/stylify/compiler#components
        components: {},
        // ...
    },
});

export default defineConfig({
    plugins: [stylifyPlugin, solidPlugin()],
    server: {
        port: 3000,
    },
    build: {
        target: 'esnext',
    },
});

src/index.js

import './stylify.css';

用法

Stylify语法与CSS相似。您只需编写_而不是空间和^而不是报价。

所以如果我们编辑src/App.jsx：

function App() {
  return (
    <h1 class="font-size:24px margin:12px_24px">
      Hello World!
    </h1>
  );
}

export default App;

在生产中，您将获得优化的CSS和html：

<h1 class="p u">Hello World!</h1>

.p{font-size: 24px}
.u{margin: 12px 24px}

Stackblitz游乐场

继续尝试Stylify CSS + SolidJS on Stackblitz。

配置

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

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

让我知道你的想法！

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