NPM Package

High-Performance CSS Parser for JavaScript

Convert CSS to JavaScript objects and back with lightning speed. Character-by-character parsing for ultimate performance and precision.

Install from NPM View on GitHub

High Performance

TypeScript Ready

Bidirectional

JavaScript

"keyword">import { parse, stringify } "keyword">from '@timkit/css-parser';

// Parse CSS to JavaScript object
"keyword">const css = `.container {
  width: 100px;
  height: 200px;
  background: #f0f0f0;
}`;

"keyword">const cssObject = parse(css);

// Convert back to CSS string
"keyword">const newCSS = stringify(cssObject);

// Compressed output
"keyword">const compressed = stringify(cssObject, { 
  compress: true 
});

Get Started in Seconds

Install and start parsing CSS with just a few lines of code

Installation

npm install @timkit/css-parser

# Or from GitHub
npm install github:timkit-dev/css-parser

Lightweight package with character-by-character parsing for optimal performance.

Basic Usage

"keyword">import { parse } "keyword">from '@timkit/css-parser';

"keyword">const css = '.btn { color: blue; }';
"keyword">const parsed = parse(css);

console.log(parsed);
// Output: JavaScript object representation

Simple API that handles complex CSS structures with ease.

Powerful CSS Processing

Everything you need to parse, manipulate, and generate CSS programmatically

High Performance

Character-by-character parsing ensures optimal speed and memory usage for large CSS files.

Bidirectional Conversion

Parse CSS to JavaScript objects and stringify objects back to CSS with perfect fidelity.

Complex CSS Support

Handles complex selectors, @-rules, nested structures, and comments with precision.

Output Compression

Optional compression mode removes whitespace and optimizes output for production use.

Type Safe

Full TypeScript support with comprehensive type definitions for all API methods.

CSS-in-JS Ready

Perfect for CSS-in-JS solutions, build tools, and dynamic stylesheet generation.

API Examples

Real-world examples showing the power and flexibility of the CSS parser

Parse CSS to JavaScript

"keyword">import { parse } "keyword">from '@timkit/css-parser';

"keyword">const css = `
.container {
  width: 100px;
  height: 200px;
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
}

@media(max-width: 768px) {
  .container {
    width: 100%;
    flex-direction: column;
  }
}

/* Comment example */
.button:hover {
  transform: scale(1.05);
}
`;

"keyword">const cssObject = parse(css);
console.log(cssObject);

// Result: Structured JavaScript object
// {
//   rules: [
//     {
//       selector: '.container',
//       declarations: [
//         { property: 'width', value: '100px' },
//         { property: 'height', value: '200px' },
//         { property: 'background', value: 'linear-gradient(...)' }
//       ]
//     },
//     {
//       type: 'media',
//       media: '(max-width: 768px)',
//       rules: [...]
//     }
//   ]
// }

Convert JavaScript to CSS

"keyword">import { stringify } "keyword">from '@timkit/css-parser';

"keyword">const cssObject = {
  rules: [
    {
      selector: '.header',
      declarations: [
        { property: 'display', value: 'flex' },
        { property: 'justify-content', value: 'space-between' },
        { property: 'padding', value: '1rem 2rem' }
      ]
    },
    {
      type: 'media',
      media: '(min-width: 1024px)',
      rules: [
        {
          selector: '.header',
          declarations: [
            { property: 'padding', value: '2rem 4rem' }
          ]
        }
      ]
    }
  ]
};

// Regular output
"keyword">const css = stringify(cssObject);

// Compressed output
"keyword">const compressed = stringify(cssObject, { 
  compress: true 
});

console.log(css);
// .header {
//   display: flex;
//   justify-content: space-between;
//   padding: 1rem 2rem;
// }
// 
// @media(min-width: 1024px) {
//   .header {
//     padding: 2rem 4rem;
//   }
// }

Perfect for Modern Development

From build tools to runtime CSS manipulation - @timkit/css-parser adapts to your workflow

CSS-in-JS Libraries

Parse existing CSS for conversion to CSS-in-JS objects or generate CSS from JavaScript configurations.

Build Tools

Integrate into webpack, rollup, or vite plugins for CSS transformation, optimization, and analysis.

Dynamic Stylesheets

Generate CSS dynamically based on user preferences, themes, or application state.

CSS Analysis

Analyze CSS files for unused selectors, complexity metrics, or automated refactoring tools.

Design Systems

Parse design system CSS to extract design tokens or generate component styles programmatically.

Server-Side Rendering

Generate critical CSS or inline styles for optimal server-side rendering performance.

Ready to Parse CSS Like a Pro?

Join developers using @timkit/css-parser for high-performance CSS manipulation and generation.

Install from NPM

npm install @timkit/css-parser

Pro Tip: Use compression mode for production builds to minimize CSS output size.

Questions? Check out the package documentation on NPM.