{"_id":"@3-/cssfmt","_rev":"5-d81729f5f0285bed550f2202f4faf386","name":"@3-/cssfmt","dist-tags":{"latest":"0.1.5"},"versions":{"0.1.1":{"name":"@3-/cssfmt","version":"0.1.1","keywords":[],"author":{"name":"i18n.site@gmail.com"},"license":"MulanPSL-2.0","_id":"@3-/cssfmt@0.1.1","maintainers":[{"name":"i18n-now","email":"i18n.site@gmail.com"}],"homepage":"https://github.com/i18n-site/lib/tree/dev/cssfmt","bugs":{"url":"https://github.com/i18n-site/lib/issues"},"dist":{"shasum":"253ecd766395738749062bb90c2bdc7be132c2e9","tarball":"https://registry.npmjs.org/@3-/cssfmt/-/cssfmt-0.1.1.tgz","fileCount":3,"integrity":"sha512-YaPZdm24vr5tXqJIvaQw6DxQB1r7xQeA+gSlc85ULEEmjjc06tJifY8iwUwpiRYv1DRkB72g21+/ROWdwmpRmA==","signatures":[{"sig":"MEYCIQDvPJnV2+0r51hvuP2fLxeURiKWWgiI3TySvk2huS4r4QIhAPo6yutZ6zvGP2vh5ec9+IK3Qj9HDjMcAGxKWOFqYKXT","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":2698},"type":"module","exports":{".":"./lib.js","./*":"./*"},"gitHead":"2bf4b5c6ff67c393acac6208e6136a588d38f092","scripts":{},"_npmUser":{"name":"i18n-now","email":"i18n.site@gmail.com"},"repository":{"url":"git+https://github.com/i18n-site/lib.git","type":"git"},"_npmVersion":"11.13.0","description":"[English](#en) | [中文](#zh)","directories":{},"_nodeVersion":"26.2.0","dependencies":{"css-tree":"^3","@3-/css2nest":"^0.1.12"},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/cssfmt_0.1.1_1780699865265_0.34993497692954056","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@3-/cssfmt","version":"0.1.2","keywords":["css","formatter","nesting","rgba2hex","ast"],"author":{"name":"i18n.site@gmail.com"},"license":"MulanPSL-2.0","_id":"@3-/cssfmt@0.1.2","maintainers":[{"name":"i18n-now","email":"i18n.site@gmail.com"}],"homepage":"https://github.com/i18n-site/lib/tree/dev/cssfmt","bugs":{"url":"https://github.com/i18n-site/lib/issues"},"dist":{"shasum":"c144dc795f01c1500673eb2bf0acdabbc95511e5","tarball":"https://registry.npmjs.org/@3-/cssfmt/-/cssfmt-0.1.2.tgz","fileCount":3,"integrity":"sha512-chPY0ksuM2uPEQ3zuA3DB40QjCqkuvgZa4gi3br1i9ltvTnuzflwbwq25PJHlkmGcVJHU/6kLaGtcLUSDBq//w==","signatures":[{"sig":"MEUCIEd6ZdPK+NmjwYuQvXQKc2OXZstTM8zZzMfAqyz5CfbeAiEA2/VoP2jeLSYuqPN6fkWp5ljhiFImj2UF7TvL3zKrhcc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":8077},"type":"module","exports":{".":"./lib.js","./*":"./*"},"gitHead":"b9a9a83a93e3cca8f76b35842c32463545ab057e","scripts":{},"_npmUser":{"name":"i18n-now","email":"i18n.site@gmail.com"},"repository":{"url":"git+https://github.com/i18n-site/lib.git","type":"git"},"_npmVersion":"11.13.0","description":"CSS formatter that nests selectors, converts rgba to hex, and moves @import to top / 支持选择器嵌套、rgba转十六进制及@import置顶的CSS格式化工具","directories":{},"_nodeVersion":"26.2.0","dependencies":{"css-tree":"^3","@3-/css2nest":"^0.1.12"},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/cssfmt_0.1.2_1780700122686_0.0804468461193828","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@3-/cssfmt","version":"0.1.3","keywords":["ast","css","formatter","nesting","rgba2hex"],"author":{"name":"i18n.site@gmail.com"},"license":"MulanPSL-2.0","_id":"@3-/cssfmt@0.1.3","maintainers":[{"name":"i18n-now","email":"i18n.site@gmail.com"}],"homepage":"https://github.com/i18n-site/lib/tree/dev/cssfmt","bugs":{"url":"https://github.com/i18n-site/lib/issues"},"dist":{"shasum":"e4d1347c600d88047ed2e457b455b924cfc6e34c","tarball":"https://registry.npmjs.org/@3-/cssfmt/-/cssfmt-0.1.3.tgz","fileCount":3,"integrity":"sha512-qGAK1X0RhKihmJxLvoO0tTFG86CnNyEqJ6sXHlGdSJS+3+zRC4QwIC4Shxb9eiIneyDCfzQawqUGhOxBnZ6ABg==","signatures":[{"sig":"MEUCIQC0jMOC5Bk0kts7mTTfpi7DhOtNm7V5C9YOfz0TF8dPVwIgcXUFOgRTKbkBdWm63NBdQ1kWMayHOsUya/pVfo2bLCo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7847},"type":"module","exports":{".":"./lib.js","./*":"./*"},"gitHead":"5db66dbf2b062eee1393e7fec5b16bdae223eae2","scripts":{},"_npmUser":{"name":"i18n-now","email":"i18n.site@gmail.com"},"repository":{"url":"git+https://github.com/i18n-site/lib.git","type":"git"},"_npmVersion":"11.13.0","description":"CSS formatter that nests selectors, converts rgba to hex, and moves @import to top / 支持选择器嵌套、rgba转十六进制及@import置顶的CSS格式化工具","directories":{},"_nodeVersion":"26.2.0","dependencies":{"css-tree":"^3","@3-/css2nest":"^0.1.12"},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/cssfmt_0.1.3_1780705875304_0.14647643573675873","host":"s3://npm-registry-packages-npm-production"}},"0.1.4":{"name":"@3-/cssfmt","version":"0.1.4","keywords":["ast","css","formatter","nesting","rgba2hex"],"author":{"name":"i18n.site@gmail.com"},"license":"MulanPSL-2.0","_id":"@3-/cssfmt@0.1.4","maintainers":[{"name":"i18n-now","email":"i18n.site@gmail.com"}],"homepage":"https://github.com/i18n-site/lib/tree/dev/cssfmt","bugs":{"url":"https://github.com/i18n-site/lib/issues"},"dist":{"shasum":"27af1512db8ff19b4598e7c7263d8156a3c41a58","tarball":"https://registry.npmjs.org/@3-/cssfmt/-/cssfmt-0.1.4.tgz","fileCount":3,"integrity":"sha512-cpwwsHXIL230bm4whe0EIPEBYnw2bs1+m2s8f6HVXYJ+QOHnW5MAKg87oEdhI2+v8UYcdQd1pW15czC5IWKOpQ==","signatures":[{"sig":"MEYCIQCSXrhGqTaPTFw+FMTqKS0UvxkVMeLB6fupldNP3nv7/AIhAKkZslYsgW+cA/Z4oo5qQPGy1RyBzt+uAhJyLtm33ncd","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":7847},"type":"module","exports":{".":"./lib.js","./*":"./*"},"gitHead":"9fecc163dc85f85290b65761f9d76b55ae3cc219","scripts":{},"_npmUser":{"name":"i18n-now","email":"i18n.site@gmail.com"},"repository":{"url":"git+https://github.com/i18n-site/lib.git","type":"git"},"_npmVersion":"11.13.0","description":"CSS formatter that nests selectors, converts rgba to hex, and moves @import to top / 支持选择器嵌套、rgba转十六进制及@import置顶的CSS格式化工具","directories":{},"_nodeVersion":"26.2.0","dependencies":{"css-tree":"^3","@3-/css2nest":"^0.1.15"},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/cssfmt_0.1.4_1780729571413_0.5055887609124416","host":"s3://npm-registry-packages-npm-production"}},"0.1.5":{"name":"@3-/cssfmt","version":"0.1.5","description":"CSS formatter that nests selectors, converts rgba to hex, and moves @import to top / 支持选择器嵌套、rgba转十六进制及@import置顶的CSS格式化工具","keywords":["ast","css","formatter","nesting","rgba2hex"],"homepage":"https://github.com/i18n-site/lib/tree/dev/cssfmt","license":"MulanPSL-2.0","author":{"name":"i18n.site@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/i18n-site/lib.git"},"type":"module","exports":{".":"./lib.js","./*":"./*"},"scripts":{},"dependencies":{"@3-/css2nest":"^0.1.15","css-tree":"^3"},"devDependencies":{},"gitHead":"224e82470e730805079015de7a0f0e12af8d72d9","_id":"@3-/cssfmt@0.1.5","bugs":{"url":"https://github.com/i18n-site/lib/issues"},"_nodeVersion":"26.2.0","_npmVersion":"11.13.0","dist":{"integrity":"sha512-6d6cYgcappTc3RojhaXu1vXD/H3ViTzZWeXHpYOP876nxa0WnkVHhIoeIJEih3acr155KR09g9u95jUylYhiBg==","shasum":"3d84c2c5ca9eac71c9f33f816163c778020a9611","tarball":"https://registry.npmjs.org/@3-/cssfmt/-/cssfmt-0.1.5.tgz","fileCount":3,"unpackedSize":9464,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQD0jEJD5Am9JHXmRZwCrbtYfGwoyUmbmMTyNYZV7hCvTAIgMNGyN1BZXKMnvJv9BGt+6ql354aP3uS+lPBlMKwBzkY="}]},"_npmUser":{"name":"i18n-now","email":"i18n.site@gmail.com"},"directories":{},"maintainers":[{"name":"i18n-now","email":"i18n.site@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/cssfmt_0.1.5_1780730280655_0.4161787548909668"},"_hasShrinkwrap":false}},"time":{"created":"2026-06-05T22:51:05.156Z","modified":"2026-06-06T07:18:01.090Z","0.1.1":"2026-06-05T22:51:05.487Z","0.1.2":"2026-06-05T22:55:22.820Z","0.1.3":"2026-06-06T00:31:15.457Z","0.1.4":"2026-06-06T07:06:11.601Z","0.1.5":"2026-06-06T07:18:00.775Z"},"bugs":{"url":"https://github.com/i18n-site/lib/issues"},"author":{"name":"i18n.site@gmail.com"},"license":"MulanPSL-2.0","homepage":"https://github.com/i18n-site/lib/tree/dev/cssfmt","keywords":["ast","css","formatter","nesting","rgba2hex"],"repository":{"type":"git","url":"git+https://github.com/i18n-site/lib.git"},"description":"CSS formatter that nests selectors, converts rgba to hex, and moves @import to top / 支持选择器嵌套、rgba转十六进制及@import置顶的CSS格式化工具","maintainers":[{"name":"i18n-now","email":"i18n.site@gmail.com"}],"readme":"[English](#en) | [中文](#zh)\n\n---\n\n<a id=\"en\"></a>\n# @3-/cssfmt : CSS formatter that nests selectors, converts rgba to hex, and moves @import to the top\n\n## Table of Contents\n\n- [Features](#features)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Design & Architecture](#design--architecture)\n- [Directory Structure](#directory-structure)\n- [Tech Stack](#tech-stack)\n- [Trivia & History](#trivia--history)\n\n## Features\n\n- **AST-Based Reordering**: Parse CSS and move `@import` rules to the top of the stylesheet.\n- **Selector Nesting**: Compress and structure selectors by nesting them automatically.\n- **Color Format Conversion**: Regular expression-based conversion of `rgba(r, g, b, a)` colors to `#rrggbbaa` hexadecimal format.\n\n## Installation\n\n```bash\nbun add @3-/cssfmt\n```\n\n## Usage\n\n```javascript\nimport cssfmt from \"@3-/cssfmt\";\n\nconst rawCss = `\nbody {\n  color: rgba(255, 0, 0, 0.5);\n  background: blue;\n}\n@import url(//example.com/theme.css);\nbody a {\n  text-decoration: none;\n}\n`;\n\nconst result = cssfmt(rawCss);\nconsole.log(result);\n```\n\n### Output\n\n```css\n@import url(//example.com/theme.css);\n\nbody {\n  color: #ff000080;\n  background: blue;\n  a {\n    text-decoration: none;\n  }\n}\n```\n\n## Design & Architecture\n\nThe invocation flow follows a linear pipeline:\n\n```mermaid\ngraph TD\n    A[Input CSS String] --> B[Parse CSS to AST via css-tree]\n    B --> C[Extract @import Rules and Other Rules]\n    C --> D[Reassemble AST putting @import first]\n    D --> E[Generate CSS String from AST]\n    E --> F[Apply Selector Nesting via @3-/css2nest]\n    F --> G[Convert rgba colors to hex format]\n    G --> H[Output Formatted CSS String]\n```\n\n## Directory Structure\n\n```text\n.\n├── src/\n│   └── lib.js          # Core formatting pipeline\n├── tests/\n│   └── lib.test.js     # Verification tests\n└── package.json        # Package description and dependencies\n```\n\n## Tech Stack\n\n- **css-tree**: CSS parser and generator.\n- **@3-/css2nest**: Selector nesting engine.\n- **Bun**: Runtime and test runner.\n\n## Trivia & History\n\nHistorically, browser stylesheets did not support nesting. Developers created preprocessors like Sass in 2006 and Less in 2009 to solve code replication and organize complex styles.\n\nThe CSS Nesting Module became an official W3C Working Draft in 2021 and gained native browser support in 2023.\n\nNative CSS nesting uses `:is()` specificity logic. This differs slightly from preprocessor text-concatenation, causing minor differences in specificity calculations.\n\nThe `@import` rule has strictly required top-of-file placement since early CSS specifications to prevent late-discovered network requests and browser rendering delays.\n\n---\n\n<a id=\"zh\"></a>\n# @3-/cssfmt : 支持选择器嵌套、rgba转十六进制及@import置顶的CSS格式化工具\n\n## 目录\n\n- [功能介绍](#功能介绍)\n- [安装](#安装)\n- [使用演示](#使用演示)\n- [设计思路](#设计思路)\n- [目录结构](#目录结构)\n- [技术堆栈](#技术堆栈)\n- [历史趣闻](#历史趣闻)\n\n## 功能介绍\n\n- **AST重排**: 解析CSS并将 `@import` 规则移动至样式表顶部。\n- **选择器嵌套**: 自动对CSS选择器进行嵌套与结构化压缩。\n- **颜色转换**: 基于正则表达式，将 `rgba(r, g, b, a)` 颜色值转换为 `#rrggbbaa` 十六进制格式。\n\n## 安装\n\n```bash\nbun add @3-/cssfmt\n```\n\n## 使用演示\n\n```javascript\nimport cssfmt from \"@3-/cssfmt\";\n\nconst rawCss = `\nbody {\n  color: rgba(255, 0, 0, 0.5);\n  background: blue;\n}\n@import url(//example.com/theme.css);\nbody a {\n  text-decoration: none;\n}\n`;\n\nconst result = cssfmt(rawCss);\nconsole.log(result);\n```\n\n### 格式化结果\n\n```css\n@import url(//example.com/theme.css);\n\nbody {\n  color: #ff000080;\n  background: blue;\n  a {\n    text-decoration: none;\n  }\n}\n```\n\n## 设计思路\n\n模块调用流程如下：\n\n```mermaid\ngraph TD\n    A[输入 CSS 字符串] --> B[使用 css-tree 解析为 AST]\n    B --> C[提取并分离 @import 规则与其他规则]\n    C --> D[重组 AST 确保 @import 规则置顶]\n    D --> E[使用 css-tree 生成 CSS 字符串]\n    E --> F[使用 @3-/css2nest 嵌套选择器]\n    F --> G[正则匹配将 rgba 颜色转换为十六进制格式]\n    G --> H[输出格式化后的 CSS 字符串]\n```\n\n## 目录结构\n\n```text\n.\n├── src/\n│   └── lib.js          # 核心格式化流水线\n├── tests/\n│   └── lib.test.js     # 测试验证\n└── package.json        # 依赖与配置说明\n```\n\n## 技术堆栈\n\n- **css-tree**: CSS 解析与代码生成。\n- **@3-/css2nest**: 选择器嵌套转换引擎。\n- **Bun**: 运行环境与测试执行。\n\n## 历史趣闻\n\nCSS 早期不支持选择器嵌套。开发者于 2006 年开发 Sass，于 2009 年开发 Less，用以解决选择器重复编写及样式组织问题。\n\nCSS 嵌套规范（CSS Nesting Module）于 2021 年成为 W3C 正式工作草案，并于 2023 年获得主流浏览器原生支持。\n\n原生 CSS 嵌套内部通过 `:is()` 伪类计算优先级。这与 Sass 编译时直接拼接字符串的逻辑存在细微差异，可能导致最终优先级计算结果不同。\n\n`@import` 规范要求必须位于样式表最顶部。这能避免浏览器在解析中途发现新网络请求，从而减少页面渲染延迟。\n\n---\n\n## About\n\nThis project is an open-source component of [i18n.site ⋅ Internationalization Solution](https://i18n.site).\n\n* [i18 : MarkDown Command Line Translation Tool](https://i18n.site/i18)\n\n  The translation perfectly maintains the Markdown format.\n\n  It recognizes file changes and only translates the modified files.\n\n  The translated Markdown content is editable; if you modify the original text and translate it again, manually edited translations will not be overwritten (as long as the original text has not been changed).\n\n* [i18n.site : MarkDown Multi-language Static Site Generator](https://i18n.site/i18n.site)\n\n  Optimized for a better reading experience\n\n## 关于\n\n本项目为 [i18n.site ⋅ 国际化解决方案](https://i18n.site) 的开源组件。\n\n* [i18 :  MarkDown命令行翻译工具](https://i18n.site/i18)\n\n  翻译能够完美保持 Markdown 的格式。能识别文件的修改，仅翻译有变动的文件。\n\n  Markdown 翻译内容可编辑；如果你修改原文并再次机器翻译，手动修改过的翻译不会被覆盖（如果这段原文没有被修改）。\n\n* [i18n.site : MarkDown多语言静态站点生成器](https://i18n.site/i18n.site) 为阅读体验而优化。\n","readmeFilename":"README.md"}