cssstyle

What is cssstyle?

The cssstyle npm package is designed to mimic the CSSStyleDeclaration interface provided by browsers, allowing for the manipulation of CSS properties of elements in a JavaScript environment outside of the browser, such as in server-side applications or testing environments. It provides a way to parse, manipulate, and stringify CSS properties programmatically.

What are cssstyle's main functionalities?

Parsing CSS properties

This feature allows the parsing of CSS text into individual properties that can be accessed and manipulated through the CSSStyleDeclaration object.

{"var CSSStyleDeclaration = require('cssstyle');
var css = new CSSStyleDeclaration();
css.cssText = 'color: blue; background-color: white;';
console.log(css.color); // 'blue'"}

Manipulating CSS properties

This feature enables the setting and getting of individual CSS properties using methods like setProperty and getPropertyValue.

{"var CSSStyleDeclaration = require('cssstyle');
var css = new CSSStyleDeclaration();
css.setProperty('color', 'red');
console.log(css.cssText); // 'color: red;'"}

Stringifying CSS properties

This feature allows the CSSStyleDeclaration object to be converted back into a string representation of the CSS, which can be used in HTML or other contexts.

{"var CSSStyleDeclaration = require('cssstyle');
var css = new CSSStyleDeclaration();
css.setProperty('color', 'red');
console.log(css.cssText); // 'color: red;'"}

Other packages similar to cssstyle

jsdom

jsdom is a JavaScript implementation of many web standards, including the DOM and HTML standards. It provides a way to simulate a web page environment, including CSS parsing and manipulation, similar to cssstyle but with a broader scope including the full DOM API.

styled-components

styled-components is a library for React and React Native that allows developers to write CSS in JavaScript, using tagged template literals. It offers a different approach to styling components compared to cssstyle, focusing on component-level styles in a React ecosystem.

jss

JSS is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way. It is similar to cssstyle in that it allows manipulation of CSS in JavaScript, but it is more focused on generating CSS using JavaScript objects and functions.

README

CSSStyleDeclaration

A Node JS implementation of the CSS Object Model CSSStyleDeclaration interface.

---

Background

This package is an extension of the CSSStyleDeclaration class in Nikita Vasilyev's CSSOM with added support for CSS 2 & 3 properties. The primary use case is for testing browser code in a Node environment.

It was originally created by Chad Walker, it is now maintaind by Jon Sakas and other open source contributors.

Bug reports and pull requests are welcome.