CSS 临时秘书处

cssints是编译时间 CSS-in-TypeScript. 你写这样的电话 css.flex().alignItems("center")。一个 Vite 插件在构建时运行它们,并用原子、内容隐藏的类名替换每个 @layers. 除了加入类名的几行外, 样式代码船没有给浏览器: for a cn() 有运行时间参数和 cv编号 :scv。 。 。 .

• 值与类型中的分型语法(mdn-data)对照检查,并在构建时再次检查. texto是编辑器和构件中的错误.
• 条件(media, (中文(简体) ), container, (中文(简体) ), supports, (中文(简体) ), hover),变体(cv, (中文(简体) ), scv),设计符号和主题(createTokens, (中文(简体) ), createGlobalTheme, (中文(简体) ), check.contrast)是全部构建时间,并且全部输入.
• 闪电CSS优化了输出. 浏览器支持( E)@mdn/browser-compat-data 相对于您的浏览器列表)被报告为警告,除了闪电CSS对这些目标的降低.

阿尔法. cssints在npm在0:x. API 仍然可以在小版本、插件包之间更改 可能移动,一些浏览器和框架的检查比其他的少(docs/API.md,“浏览器支持和什么 (没有) 将版本收录,并报告中断的情况.

决定和调查结果载于 文件/导游; API 引用为 文件/API.md。两者也是搜索和类型徘徊的网站: 应用程序/文件 (单位:千美元)cd apps/docs && bun run dev与Alchemy一起部署在Cloudflare: https://cssints.dev (英语)。 。 。 .

安装

npm install --save-dev cssints vite@8   # or: bun add -d cssints vite@8, pnpm add -D cssints vite@8

cssints需要Vite 8(Vite+工作也)和节点22.18或更后(插件以类型剥取来运行您的模块). 这是一个 依附者:除后面的几行外,别无其他船舶 cn 有运行时间参数和 cv。插件套件安装相同 一路相去无远 cssints (单位:千美元)npm install --save-dev @cssints/fluid)),该列表在 插件软件包 页 次 在此存储库中 cssints 是工作空间软件包 (单位:千美元)"cssints": "workspace:*") (中文(简体) ).

// vite.config.ts
import cssints, { cssTarget, targets } from "cssints/vite";

export default {
  plugins: [cssints()],
  css: { transformer: "lightningcss", lightningcss: { targets } },
  build: { cssMinify: "lightningcss", cssTarget },
};

// the entry, once
import "virtual:cssints.css";
import { reset } from "@cssints/reset" with { type: "cssints" };

reset();

reset() 建议开始: @cssints/reset 是一种小的现代重置,在每一款风格的下层, 所以任何一种风格都比它强. 没有电话的项目是没有的,就像任何应用程序一样.

targets 财务报告和审定财务报表 cssTarget 来自支持警告的浏览器列表查询: BROWSERSLIST 变量,否则标准配置("browserslist" 内 package.json 或者说 .browserslistrc,与 BROWSERSLIST_ENV, (中文(简体) ), NODE_ENV 或者说 production (第3节) defaults。当 vite.config.ts 在 Vite 的根已知之前, 导入它们, 因此它们会从 process.cwd() 上方;支持警告从Vite那里查出来 root (2026-10-09, cssints-p3d2) (中文(简体) ). 当Vite从应用程序的目录中运行时,它们是一样的 vite <dir> 从别处,给 targets 财务报告和审定财务报表 cssTarget 应用程序的配置你自己。 Vite的 CSS 缩写为 cssTarget没有 targets:没有它, 修饰者将合并 a 的宣告 firstThatWorks 进入最后一个。 添加 "types": ["vite/client"] 改为 tsconfig.json 联 合 国 virtual: 导入.

框架

任何通过Vite插件构建JSX的框架都会起作用;引擎会评价你的模块本身,因此它不关心插件对JSX的制作,也不关心插件的排列顺序. apps/csssky 是 Solid 2 应用程序(solid-js 财务报告和审定财务报表 @solidjs/web 2.0.0-rc.13, (中文(简体) ), @solidjs/vite-plugin 3.0.0-下行47号:

// vite.config.ts
import solid from "@solidjs/vite-plugin";
import cssints, { cssTarget, targets } from "cssints/vite";

export default {
  plugins: [cssints(), solid()],
  css: { transformer: "lightningcss", lightningcss: { targets } },
  build: { cssMinify: "lightningcss", cssTarget },
};

tsconfig.json 这是Solid的: "jsx": "preserve", (中文(简体) ), "jsxImportSource": "@solidjs/web", (中文(简体) ), "types": ["vite/client"]固态 class 需要字符串、对象或数组,所以 cn 加入时不需要: class={[card, on() && p(4)]} 财务报告和审定财务报表 class={badge({ tone: tone() })} 工作在反应。 一个站点的参数仍然是构建时值,所以一个信号在状态下或在一个状态下发出 cv 变体,不为 p(n())下调 vite dev 一个组件的编辑替换并重排其下方的状态(Solid的刷新);一个样式的编辑会改变类字符串和工作表,而不重新加载.

import { reset } from "@cssints/reset" with { type: "cssints" };
import {
  bg,
  color,
  cn,
  cv,
  flex,
  hover,
  media,
  p,
  style,
  token,
} from "cssints" with { type: "cssints" };

reset();

const md = media("(width >= 40rem)");
const accent = token.color("#2563eb", "accent");

const button = cv({
  base: cn(p(2), color("white"), bg(accent), hover(bg("#1d4ed8"))),
  variants: { wide: { true: md(p(4)) } },
});

export const Row = ({ wide, on }: { wide?: boolean; on?: boolean }) => (
  <div
    className={cn(flex().alignItems("center").gap(2), on && p(1))}
    style={style(token.set(accent, "#dc2626"))}
  >
    <button className={button({ wide })}>Save</button>
  </div>
);

with { type: "cssints" } 标记在建设时运行的状态。 插件用类字符串取代每个调用, 因此浏览器得到 __cx([], "_1s47490 _1ob5z5m _g2iyum", on && "_lqk467") 财务报告和审定财务报表 button 是一个运行时间的呼叫 { base: "_1t8gqy5 ...", ... }所以它永远看不到 flex()。 。 。 . virtual:cssints.css 是一个工作表,每条规则一次,按分层排序,然后是条件,然后是长手之前的快手,然后是类名(即 @layer reset { ... } 块 reset() 先来后留这里:

@layer _.k, _.a, _.b, _.c, _.d, _.e;
@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #2563eb;
}
@layer _.a {
  ._1t8gqy5 {
    padding: 0.5rem;
  }
  ._lqk467 {
    padding: 0.25rem;
  }
  ._g2iyum {
    gap: 0.5rem;
  }
  ._17xzvrh {
    background-color: var(--accent);
  }
  ._1binn6n {
    color: white;
  }
  ._1ob5z5m {
    align-items: center;
  }
  ._1s47490 {
    display: flex;
  }
}
@layer _.b {
  ._1tsjws2:hover {
    background-color: #1d4ed8;
  }
  @media (width >= 40rem) {
    ._tdcza3 {
      padding: 1rem;
    }
  }
}

在终点站

import * as css from "cssints/tui" with { type: "cssints" } 给成员一个终端(单元格、颜色、边框、弹性、状态、, cursor),插件将其编译为道具对象 打开TUI 替代班级的可交付性; @cssints/tui 应用它们的国家和主题: 软件包/图伊,文档/API.md "TUI"。 套件来应用它们, @cssints/tui,为 已贬值 支持在 native/terminal (Clay in cells,termbox2);它的README表示什么是承载的以及如何运行替换.

更多进去 文件/API.md: 财产名称和简称, flex() 财务报告和审定财务报表 grid() 链条、条件和层次、标志和主题, cn 财务报告和审定财务报表 cv,和可以得到的错误.

调试

CSSINTS_TRACE=otlp bun run build (或 dev)向本地的OpenTeleometry后端发送每个Vite钩子的痕量,并附有每个模块的文件;未设置,费用不高. 如何在后端启动 docker run,以及长度: 文件/API.md。 。 。 .

对于特工

cssints 二号舰 代理技能 在它的包装, skills/cssints (写作风格:设置, cn编号 :cv、条件、符号和主题、插件包、构建错误)和 skills/cssints-plugin (书写) 打开一个插件 scope(),及其测试). 安装到您的代理技能文件夹 :

npx skills-npm                                # links the skills of every installed package that ships some
npx skills add ./node_modules/cssints/skills  # or the skills CLI, for opencode, Claude Code, Codex, Cursor, ...

执行这个寄存器的特工们得到 .agents/skills/cssints-contributor (另见: .claude/skills无安装.

@cssints/mcp 是一个MCP服务器, 并带有该架构自己的检查( MCP) check_declaration, (中文(简体) ), check_support, (中文(简体) ), check_contrast, (中文(简体) ), compile, (中文(简体) ), search_docs, (中文(简体) ), list_plugins),单位 软件包/mcp 带有打开代码的配置, Claude 代码 和克塞尔。 技能在配置和工作时使用.

版式

发展

bun install
bun run test    # all packages (vp run -r test, cached where possible); includes the type-check of the code in docs/API.md and this file
bun run bench   # type instantiation budgets (tsc and tsgo)
bun run check   # format, lint, type-check (vp check), then tsc 7 with the Effect diagnostics (bun run typecheck)
bun run diff:check   # the added lines against master: anti-slop rules, key-file changes (tools/ai-automation)
cd apps/demo && bun run dev
cd apps/docs && bun run dev   # the documentation site, on the pages of README.md and docs/API.md

见 一般事务人员(其他职等) 用于布局、命令和代码样式.

贷项

cssints是麻省理工学院. 它代表着其他人的工作;这是我们从谁那里拿走的,也是凭什么许可证取得的。 复制数据或代码的软件包带有上游通知(README的信用或许可证部分,或 THIRD_PARTY_NOTICES.md) (中文(简体) ).

船舶数据和代码

想法和设计

没有从这些中复制代码; 每个软件包 README 表示后面哪个部分 .

• 插件软件包. 每个布局 财务报告和审定财务报表 斯莫克丝 (排出), 时间/文本平衡器 财务报告和审定财务报表 反应- wrap- 平衡器 (余额), 流体尾风 (流出), 升学率 (渐渐), 尾风-运动 财务报告和审定财务报表 尾风动物 (运动), 超音速插件 财务报告和审定财务报表 放松点,js (启示), 同步斯凯莱通 (斯凯尔顿), bramus/ sticky-观察器 (粘着), 未选占位符 财务报告和审定财务报表 缩略图 (占位者), 坚果 财务报告和审定财务报表 莱昂纳多 Josh Comeau、Jake Lazaroff、Vale和Andy Bell(重置)的遗赠, 雾中模式 及其模式合同, 反应CSS (反应), brendonovich/vite-plugin-open代码 (devtools的即时盒).
• 发动机. 比较 文献/研究 记录我们从什么 样式X, (中文(简体) ), 香草摘录, (中文(简体) ), 尾风 CSS, (中文(简体) ), 东京, (中文(简体) ), 糖方块 编辑 反应光谱 样式宏; 第一个火花是 哈兹的帖子 在 TypeScript 中的 CSS 框架。 脚趾跟随 设计托肯斯社区小组 格式.
• 应用程序/cssky 跟着穆和韦奇斯基的相貌.

建造在

效果, (中文(简体) ), 维特 和维特+, 牛津救济会, (中文(简体) ), 闪电CSS (MPL-2.0;在操场上建造其园地), 库罗里语name, (中文(简体) ), 类型脚本 键入脚本, 阿宝, (中文(简体) ), 固态, (中文(简体) ), 打开TUI, (中文(简体) ), 志纪, (中文(简体) ), 皮埃尔的要闻, (中文(简体) ), 摩纳哥编辑器, (中文(简体) ), 剧作家, (中文(简体) ), 快速检查, (中文(简体) ), 昆特语, (中文(简体) ), 提示,以及 豆类 买票的 磷酸盐图标(MIT)通过 @iconify-json/ph每个依赖者都持有自己的许可证;没有一个被复制到仓库.

许可证

麻省理工学院