Socket
Socket
Sign inDemoInstall

cssom

Package Overview
Dependencies
0
Maintainers
2
Versions
21
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

    cssom

CSS Object Model implementation and CSS parser


Version published
Maintainers
2
Install size
51.8 kB
Created

Package description

What is cssom?

The cssom npm package is a library for parsing CSS files and manipulating CSSOM (CSS Object Model). It allows users to parse CSS strings into a stylesheet object, manipulate CSS rules, and serialize CSS objects back to strings. It is useful for server-side processing of CSS files or for any environment where a DOM is not present.

What are cssom's main functionalities?

Parsing CSS strings

This feature allows you to parse a string of CSS into a CSSOM object, which can then be manipulated or queried.

const CSSOM = require('cssom');
const cssText = 'body { font-size: 12px; }';
const parsedCSS = CSSOM.parse(cssText);
console.log(parsedCSS);

Manipulating CSS rules

After parsing CSS, you can manipulate the CSS rules, such as changing the font size from 12px to 14px in this example.

const CSSOM = require('cssom');
const cssText = 'body { font-size: 12px; }';
const parsedCSS = CSSOM.parse(cssText);
parsedCSS.cssRules[0].style.setProperty('font-size', '14px');
console.log(parsedCSS.toString());

Serializing CSSOM to string

This feature allows you to serialize the manipulated CSSOM back into a CSS string, which can then be used in a style tag or an external stylesheet.

const CSSOM = require('cssom');
const cssText = 'body { font-size: 12px; }';
const parsedCSS = CSSOM.parse(cssText);
parsedCSS.cssRules[0].style.setProperty('font-size', '14px');
const serializedCSS = parsedCSS.toString();
console.log(serializedCSS);

Other packages similar to cssom

Readme

Source

CSSOM

CSSOM.js is a CSS parser written in pure JavaScript. It is also a partial implementation of CSS Object Model.

CSSOM.parse("body {color: black}")
-> {
  cssRules: [
    {
      selectorText: "body",
      style: {
        0: "color",
        color: "black",
        length: 1
      }
    }
  ]
}

Parser demo

Works well in Google Chrome 6+, Safari 5+, Firefox 3.6+, Opera 10.63+. Doesn't work in IE < 9 because of unsupported getters/setters.

To use CSSOM.js in the browser you might want to build a one-file version that exposes a single CSSOM global variable:

➤ git clone https://github.com/NV/CSSOM.git
➤ cd CSSOM
➤ node build.js
build/CSSOM.js is done

To use it with Node.js or any other CommonJS loader:

➤ npm install cssom

Don’t use it if...

You parse CSS to mungle, minify or reformat code like this:

div {
  background: gray;
  background: linear-gradient(to bottom, white 0%, black 100%);
}

This pattern is often used to give browsers that don’t understand linear gradients a fallback solution (e.g. gray color in the example). In CSSOM, background: gray gets overwritten. It does NOT get preserved.

If you do CSS mungling, minification, or image inlining, considere using one of the following:

Tests

To run tests locally:

➤ git submodule init
➤ git submodule update

Who uses CSSOM.js

Keywords

FAQs

Last updated on 20 Jun 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc