Spaces:
Running
Running
| # @adobe/css-tools | |
| > A modern CSS parser and stringifier with TypeScript support | |
| [](https://badge.fury.io/js/%40adobe%2Fcss-tools) | |
| [](https://opensource.org/licenses/MIT) | |
| Parse CSS into an Abstract Syntax Tree (AST) and convert it back to CSS with configurable formatting. Built with TypeScript for type safety and modern JavaScript features. | |
| ## Install | |
| ```bash | |
| npm install @adobe/css-tools | |
| ``` | |
| ## Usage | |
| ```js | |
| import { parse, stringify } from '@adobe/css-tools' | |
| // Parse CSS to AST | |
| const ast = parse('body { font-size: 12px; }') | |
| // Stringify AST back to CSS | |
| const css = stringify(ast) | |
| // => "body { font-size: 12px; }" | |
| // Pretty print with custom indentation | |
| const formatted = stringify(ast, { indent: ' ' }) | |
| // => "body {\n font-size: 12px;\n}" | |
| // Minify output | |
| const minified = stringify(ast, { compress: true }) | |
| // => "body{font-size:12px}" | |
| ``` | |
| ## API | |
| ### `parse(code, options?)` | |
| Parses CSS code and returns an Abstract Syntax Tree (AST). | |
| **Parameters:** | |
| - `code` (string) - The CSS code to parse | |
| - `options` (object, optional) - Parsing options | |
| - `silent` (boolean) - Silently fail on parse errors instead of throwing | |
| - `source` (string) - File path for better error reporting | |
| **Returns:** `CssStylesheetAST` - The parsed CSS as an AST | |
| ### `stringify(ast, options?)` | |
| Converts a CSS AST back to CSS string with configurable formatting. | |
| **Parameters:** | |
| - `ast` (CssStylesheetAST) - The CSS AST to stringify | |
| - `options` (object, optional) - Stringification options | |
| - `indent` (string) - Indentation string (default: `' '`) | |
| - `compress` (boolean) - Whether to compress/minify the output (default: `false`) | |
| **Returns:** `string` - The formatted CSS string | |
| ## Features | |
| - **Complete CSS Support**: All standard CSS features including selectors, properties, values, at-rules, and comments | |
| - **TypeScript Support**: Full type definitions for all AST nodes and functions | |
| - **Error Handling**: Configurable error handling with detailed position information | |
| - **Formatting Options**: Pretty print, minify, or custom formatting | |
| - **Performance Optimized**: Efficient parsing and stringification for large CSS files | |
| - **Source Maps**: Track original source positions for debugging and tooling | |
| ### Supported CSS Features | |
| - **Selectors**: Element, class, ID, attribute, pseudo-class, pseudo-element selectors | |
| - **Properties**: All standard CSS properties and custom properties | |
| - **Values**: Colors, lengths, percentages, functions, calc(), etc. | |
| - **At-rules**: @media, @keyframes, @import, @charset, @namespace, @font-face, @page, @document, @supports, @container, @layer, @starting-style, @host, @custom-media | |
| - **Comments**: Both /* */ and // comments | |
| - **Whitespace**: Preserves formatting information | |
| - **Vendor prefixes**: Supports vendor-prefixed at-rules and properties | |
| - **Nested rules**: Media queries, supports, containers, etc. | |
| - **Complex selectors**: Combinators, pseudo-selectors, attribute selectors | |
| ## Examples | |
| ### Error Handling | |
| ```js | |
| import { parse } from '@adobe/css-tools' | |
| const malformedCss = ` | |
| body { color: red; } | |
| { color: blue; } /* Missing selector */ | |
| .valid { background: green; } | |
| ` | |
| // Parse with silent error handling | |
| const result = parse(malformedCss, { silent: true }) | |
| // Check for parsing errors | |
| if (result.stylesheet.parsingErrors) { | |
| console.log('Parsing errors:', result.stylesheet.parsingErrors.length) | |
| result.stylesheet.parsingErrors.forEach(error => { | |
| console.log(`Error at line ${error.line}: ${error.message}`) | |
| }) | |
| } | |
| // Valid rules are still parsed | |
| console.log('Valid rules:', result.stylesheet.rules.length) | |
| ``` | |
| ### Source Tracking | |
| ```js | |
| import { parse } from '@adobe/css-tools' | |
| const css = 'body { color: red; }' | |
| const ast = parse(css, { source: 'styles.css' }) | |
| // Position information is available | |
| const rule = ast.stylesheet.rules[0] | |
| console.log(rule.position?.source) // "styles.css" | |
| console.log(rule.position?.start) // { line: 1, column: 1 } | |
| console.log(rule.position?.end) // { line: 1, column: 20 } | |
| ``` | |
| For more examples, see the [Examples documentation](docs/EXAMPLES.md). | |
| ## Performance | |
| The library is optimized for performance and can handle large CSS files efficiently. For benchmarking information, see the `benchmark/` directory in the source code. | |
| ## Documentation | |
| - [API Reference](docs/API.md) - Complete API documentation | |
| - [AST Structure](docs/AST.md) - Detailed AST node types and structure | |
| - [Examples](docs/EXAMPLES.md) - Comprehensive usage examples | |
| - [Changelog](docs/CHANGELOG.md) - Version history and changes | |
| ## Background | |
| This is a fork of the npm `css` package, maintained by Adobe with modern improvements including TypeScript support, enhanced performance, and security updates. It provides a robust foundation for CSS tooling, preprocessing, and analysis. | |
| ## License | |
| [MIT](LICENSE) | |