# @cssints/css-grammar 中文文档

规范地址：https://npmcn.com/package/%40cssints/css-grammar/

版本：0\.35\.1
npm 元数据更新时间：2026-11-07T14:55:34.375Z
中文译文更新时间：2026-11-11T03:26:26.956Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40cssints/css-grammar
原文对照：https://npmcn.com/package/%40cssints/css-grammar/?lang=original
项目主页：https://cssints.dev/
源码仓库：https://github.com/alexeiaccio/css-in-ts-compiler

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：404 kB，42 个文件
- 模块格式：ES Module
- TypeScript 类型：包内自带
- Node.js 要求：\>=22
- 运行依赖：3 个
- 首次发布：2026-10-10T20:57:44.641Z
- 最新版本发布：2026-11-07T14:55:34.036Z
- 近 30 天下载量：14906（2026-10-11 至 2026-11-09，npm 官方下载统计）
- 已发布版本数：43（近 12 个月 43 个）

## 中文简介

CSS值在 mdn-data 语法之上的类型级别和运行时间识别器(csints的引擎)

## 安装

```sh
npm install @cssints/css-grammar
```

也可以使用：`pnpm add @cssints/css-grammar`、`yarn add @cssints/css-grammar`、`bun add @cssints/css-grammar`

## README

# CSS 临时秘书处

![](https://cssints.dev/logo.svg)

cssints是编译时间 CSS-in-TypeScript. 你写这样的电话 `css.flex().alignItems("center")`。一个 Vite 插件在构建时运行它们,并用原子、内容隐藏的类名替换每个 `@layer`s. 除了加入类名的几行外, 样式代码船没有给浏览器: 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,“浏览器支持和什么 (没有) 将版本收录,并报告中断的情况.

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

## 安装

```bash
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`)),该列表在 [插件软件包](https://npmcn.com/package/%40cssints/css-grammar/docs/API.md#plugin-packages-cssints-dk1q) 页 次 在此存储库中 `cssints` 是工作空间软件包 (单位:千美元)`"cssints": "workspace:*"`) (中文(简体) ).

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

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

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

reset();
```

`reset()` 建议开始: [`@cssints/reset`](https://npmcn.com/package/%40cssints/css-grammar/packages/reset/README.md) 是一种小的现代重置,在每一款风格的下层, 所以任何一种风格都比它强. 没有电话的项目是没有的,就像任何应用程序一样.

`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号:

```ts
// 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的刷新);一个样式的编辑会改变类字符串和工作表,而不重新加载.

```tsx
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()` 先来后留这里:

```css
@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](https://opentui.com/) 替代班级的可交付性; `@cssints/tui` 应用它们的国家和主题: [软件包/图伊](https://npmcn.com/package/%40cssints/css-grammar/packages/tui/README.md),文档/API.md "TUI"。 套件来应用它们, `@cssints/tui`,为 **已贬值** 支持在 [`native/terminal`](https://npmcn.com/package/%40cssints/css-grammar/native/terminal) (Clay in cells,termbox2);它的README表示什么是承载的以及如何运行替换.

更多进去 [文件/API.md](https://npmcn.com/package/%40cssints/css-grammar/docs/API.md): 财产名称和简称, `flex()` 财务报告和审定财务报表 `grid()` 链条、条件和层次、标志和主题, `cn` 财务报告和审定财务报表 `cv`,和可以得到的错误.

## 调试

`CSSINTS_TRACE=otlp bun run build` (或 `dev`)向本地的OpenTeleometry后端发送每个Vite钩子的痕量,并附有每个模块的文件;未设置,费用不高. 如何在后端启动 `docker run`,以及长度: [文件/API.md](https://npmcn.com/package/%40cssints/css-grammar/docs/API.md#debugging-traces-of-the-engine-cssints_trace-cssints-r2qq)。 。 。 .

## 对于特工

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

```bash
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](https://npmcn.com/package/%40cssints/css-grammar/packages/mcp) 带有打开代码的配置, Claude 代码 和克塞尔。 技能在配置和工作时使用.

## 版式

| 路径 | 什麽 |
| --- | --- |
| `packages/cssints` | 维特插件( V)`cssints/vite`在维特模块运行器 `cssints` 图书馆 |
| `packages/css-grammar` | 类型级识别器及其运行时间双向并重于 mdn-data 语法, 输入的 OM 值, 浏览器支持和发音规则 |
| `packages/icons` | `@cssints/icons`:来自图标 JSON 收藏或 SVG 文件夹的图标,一个没有运行时间的遮罩样式 |
| `packages/mise-en-mode` | `@cssints/mise-en-mode`: 显示为图层应用 < 作者 < 查看器, 打开 `data-mode` 瞄准镜,对照符号检查 `check.contrast` |
| `packages/headless` | `@cssints/headless`: Solid 2 上的无头 APG 部件( 状态和 DOM 属性对象, 无样式), 与 Quint 规格相匹配; 尚未发布 |
| `packages/apg-specs` | `@cssints/apg-specs`: APG 和画布 Quint 规格, 生成模型, 情景桥和切换方案, 部件被测试( 测试对象, 发布) |
| `packages/tui` | `@cssints/tui` (单位:千美元)**已贬值**: 运行时间 `cssints/tui` 在 OpenTUI 和 @ bomb.sh/tty 上的样式; `native/terminal` 替换它 |
| `apps/demo` | 每个 0.1 特性的反应演示 |
| `apps/docs` | 文件网站:此文件 `docs/API.md` 作为页面,搜索和类型徘徊(`cd apps/docs && bun run dev`(中文(简体) ) |
| `docs/research`, (中文(简体) ), `docs/archive` | 与其他图书馆的比较;过时的计划 |

## 发展

```bash
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
```

见 [一般事务人员(其他职等)](https://npmcn.com/package/%40cssints/css-grammar/AGENTS.md) 用于布局、命令和代码样式.

## 贷项

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

### 船舶数据和代码

| 何处 | 什麽 | 从 | 许可证 |
| --- | --- | --- | --- |
| [@ cssints/ tokens (英语)](https://npmcn.com/package/%40cssints/css-grammar/packages/tokens/README.md) | 开放的道具、 Radix 颜色、 Flexoki 和合理颜色集 | [打开道具](https://github.com/argyleink/open-props) (亚当·阿吉勒), [Radix 颜色](https://github.com/radix-ui/colors), (中文(简体) ), [弗来克索克语Name](https://github.com/kepano/flexoki) (史蒂夫·安戈), [合理颜色](https://github.com/matthewhowell/reasonable-colors) (马修·豪威尔) | 麻省理工学院,在其研究中发出通知 |
| [@cssints/cs-语法](https://npmcn.com/package/%40cssints/css-grammar/packages/css-grammar/THIRD_PARTY_NOTICES.md) | cSS 语法字符串(`src/mdn.ts`, (中文(简体) ), `keywords.ts`, (中文(简体) ), `functions.ts`)),在类型中也是如此 `cssints` | [mdn-数据](https://github.com/mdn/data); 数字范围将其省略 [@webref/css (英语)](https://github.com/w3c/webref) | CC0-1.0; 麻省理工学院(W3C) |
| @cssints/cs-语法 | 浏览器支持警告, 从软件包读取( 未复制) | [@mdn/浏览器-compat-data](https://github.com/mdn/browser-compat-data) | CC0-1.0 (英语) |
| [@ cssints/ fonts (韩语)](https://npmcn.com/package/%40cssints/css-grammar/packages/fonts/README.md) | 新罗马时代和新古罗马时代的 拉丁字符加权和衡量标准 | [缩放](https://github.com/seek-oss/capsize) (尖叫声) | 麻省理工学院,在读本中注明 |
| [@ cssints/相册](https://npmcn.com/package/%40cssints/css-grammar/packages/icons/README.md) | 无: 收藏是您的依赖性 | [图标](https://iconify.design/) `@iconify-json/*` | 每一个收藏的自己的 |
| `tools/ai-automation/vendor` | 提示规则, 未公布 | [dmmulroy/反斜坡](https://github.com/dmmulroy/anti-slop) (迪伦·穆罗伊) | 麻省理工学院, `LICENSE` 财务报告和审定财务报表 `UPSTREAM.md` |
| [应用程序/cssky](https://npmcn.com/package/%40cssints/css-grammar/apps/csssky/NOTICE.md) | 布局和符号值; Inter; Phospor 图标 | 穆尔和 `@bsky.app/alf` (蓝斯基社会委员会), [间](https://github.com/rsms/inter), (中文(简体) ), [磷酸盐](https://phosphoricons.com/) | 麻省理工学院;OFL-1.1;麻省理工学院 |
| 应用程序/演示 | 材料设计图标( E)`@iconify-json/mdi`(中文(简体) ) | 象形图 | 阿帕奇 - 2.0 |

### 想法和设计

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

-   **插件软件包.** [每个布局](https://every-layout.dev/) 财务报告和审定财务报表 [斯莫克丝](https://smolcss.dev/) (排出), [时间/文本平衡器](https://github.com/nytimes/text-balancer) 财务报告和审定财务报表 [反应- wrap- 平衡器](https://github.com/shuding/react-wrap-balancer) (余额), [流体尾风](https://github.com/barvian/fluid-tailwind) (流出), [升学率](https://github.com/larsenwork/postcss-easing-gradients) (渐渐), [尾风-运动](https://github.com/romboHQ/tailwindcss-motion) 财务报告和审定财务报表 [尾风动物](https://github.com/jamiebuilds/tailwindcss-animate) (运动), [超音速插件](https://github.com/the-illarionov/the-supersonic-plugin-for-scroll-based-animation) 财务报告和审定财务报表 [放松点,js](https://github.com/alexfoxy/lax.js) (启示), [同步斯凯莱通](https://github.com/crutchcorn/sync-skeleton) (斯凯尔顿), [bramus/ sticky-观察器](https://github.com/bramus/sticky-observer) (粘着), [未选占位符](https://github.com/ascorbic/unpic-placeholder) 财务报告和审定财务报表 [缩略图](https://github.com/evanw/thumbhash) (占位者), [坚果](https://github.com/meodai/nutelch) 财务报告和审定财务报表 [莱昂纳多](https://github.com/adobe/leonardo) Josh Comeau、Jake Lazaroff、Vale和Andy Bell(重置)的遗赠, [雾中模式](https://standard.mode.place/) 及其模式合同, [反应CSS](https://reactivecss.com/) (反应), [brendonovich/vite-plugin-open代码](https://github.com/Brendonovich/vite-plugin-opencode) (devtools的即时盒).
-   **发动机.** 比较 [文献/研究](https://npmcn.com/package/%40cssints/css-grammar/docs/research) 记录我们从什么 [样式X](https://stylexjs.com/), (中文(简体) ), [香草摘录](https://vanilla-extract.style/), (中文(简体) ), [尾风 CSS](https://tailwindcss.com/), (中文(简体) ), [东京](https://tokenami.com/), (中文(简体) ), [糖方块](https://sugarcube.sh/) 编辑 [反应光谱](https://react-spectrum.adobe.com/) 样式宏; 第一个火花是 [哈兹的帖子](https://bsky.app/profile/haz.dev/post/3mebm2mx6jk27) 在 TypeScript 中的 CSS 框架。 脚趾跟随 [设计托肯斯社区小组](https://www.designtokens.org/) 格式.
-   **应用程序/cssky** 跟着穆和韦奇斯基的相貌.

### 建造在

[效果](https://effect.website/), (中文(简体) ), [维特](https://vite.dev/) 和维特+, [牛津救济会](https://oxc.rs/), (中文(简体) ), [闪电CSS](https://lightningcss.dev/) (MPL-2.0;在操场上建造其园地), [库罗里语name](https://culorijs.org/), (中文(简体) ), [类型脚本](https://www.typescriptlang.org/) 键入脚本, [阿宝](https://bun.sh/), (中文(简体) ), [固态](https://www.solidjs.com/), (中文(简体) ), [打开TUI](https://opentui.com/), (中文(简体) ), [志纪](https://shiki.style/), (中文(简体) ), [皮埃尔的要闻](https://github.com/pierrecomputer/pierre/tree/main/packages/highlights), (中文(简体) ), [摩纳哥编辑器](https://microsoft.github.io/monaco-editor/), (中文(简体) ), [剧作家](https://playwright.dev/), (中文(简体) ), [快速检查](https://fast-check.dev/), (中文(简体) ), [昆特语](https://quint-lang.org/), (中文(简体) ), [提示](https://github.com/mary-ext/atcute),以及 [豆类](https://github.com/hmans/beans) 买票的 磷酸盐图标(MIT)通过 `@iconify-json/ph`每个依赖者都持有自己的许可证;没有一个被复制到仓库.

## 许可证

麻省理工学院

## 常见问题

### @cssints/css-grammar 是什么？

CSS值在 mdn-data 语法之上的类型级别和运行时间识别器\(csints的引擎\)

### 如何安装 @cssints/css-grammar？

在项目目录运行 npm install @cssints/css-grammar，或使用 pnpm add / yarn add / bun add。

### @cssints/css-grammar 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @cssints/css-grammar 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @cssints/css-grammar 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=22。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @cssints/css-grammar 可以商用吗？

@cssints/css-grammar 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @cssints/css-grammar 的下载量有多少？

根据 npm 官方下载统计，@cssints/css-grammar 在 2026/10/11 – 2026/11/09 这 30 天内被下载 14,906 次，日均约 497 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @cssints/css-grammar 还在维护吗？

最新版本 0\.35\.1 发布于 2026/11/07（3 天前）；至今共发布 43 个版本，其中过去 12 个月发布了 43 个；首次发布于 2026/10/11。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。