If someone needs a crossbrowser version of CSSOM.js please describe what are you intend to do with that. It is possible to remove all these __proto__ and Object.defineProperty, but I don't feel the need right now.

@import url("partial.css");
@import url("http://usercss.ru/styles/night/night.css");

Spec. WebKit implementation: CSSImportRule.cpp.

This used to work fine before b2507c6:

cssom.parse('body{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";}');
cssom.parse('body{font-family: "times new roman";}');

It seems feasible to use some parser generator and reuse WebKit's stuff http://svn.webkit.org/repository/webkit/trunk/WebCore/css/tokenizer.flex http://svn.webkit.org/repository/webkit/trunk/WebCore/css/CSSGrammar.y

Never did it before. Any pointers?

Ability to serialize CSSStyleSheet object into CSS string.

CSSOM.parse("body {color: black}").toString()
-> "body {color: black}"

It might need a few options, such as indent or propertiesSeparator. Not sure about it yet.

I've tried improving on the details of the error messages that CSSOM will throw.

The changes try to do the following:

• Throw new Error instead of strings
• Keep track of line and char numbers (1-indexed to match most editors)
• Write line and chars numbers in error.message
• Add line and char numbers to error as properties
• Added the stylesheet in the state of parsing that it was in when the error occurred

I've changed the one thrown SyntexError with Error, since the SyntaxError seems to be reserved for node internals during failed eval().

This simple fix merges properties already declared in the style into a single property as a semicolon-delimited list. For example:

.background-gradient {
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727));
    background: -webkit-linear-gradient(top, #2F2727, #1a82f7); 
    background: -moz-linear-gradient(top, #2F2727, #1a82f7); 
    background: -ms-linear-gradient(top, #2F2727, #1a82f7); 
    background: -o-linear-gradient(top, #2F2727, #1a82f7)
}

would result in:

cssRules: [
    {
        selectorText: '.background-gradient',
        parentRule: null,
        style: {
            0: 'background',
            background: '-webkit-gradient(linear, 0% 0%, 0% 100%, from(#1a82f7), to(#2F2727)); background: -webkit-linear-gradient(top, #2F2727, #1a82f7); background: -moz-linear-gradient(top, #2F2727, #1a82f7); background: -ms-linear-gradient(top, #2F2727, #1a82f7); background: -o-linear-gradient(top, #2F2727, #1a82f7)',
            length: 1
        }
    }
]

This allows the declarations to be preserved as well as correctly parsed, and it will be overwritten if a more specific selector redefines the property. A downside to this implementation is that it does not give individual access to each rule. But since this didn't work to begin with I don't see it as a problem.

This change adds the CSSGroupingRule and CSSConditionRule constructors, and it establishes the prototype chain between these and CSSMediaRule and CSSSupportsRule.

For the updated functionality, it includes references to the appropriate specifications, and I did my best to keep the coding style in sync with the existing project. For instance, I preserved the styling where tabs are currently intermixed with spaces in CSSMediaRule.js, and I preserved the strategy of using new CSSOM.CSS... over Object.create (which is done to support for Firefox 3.6, perhaps?).

For the tests, I verified that, while one test is failing from the current main branch, all the other tests are still passing after this change. I included a comment similar to others for a currently untestable getter.

Resolves #105

versions 0.3.2 and 0.3.3 are missing CSSFontFaceRule from exports. I couldn't find it in the source code, as tags for these versions don't exists.

For reference, here's the contents of index.js for v0.3.3:

exports.CSSStyleDeclaration = require("./CSSStyleDeclaration").CSSStyleDeclaration;
exports.CSSRule = require("./CSSRule").CSSRule;
exports.CSSStyleRule = require("./CSSStyleRule").CSSStyleRule;
exports.CSSImportRule = require("./CSSImportRule").CSSImportRule;
exports.MediaList = require("./MediaList").MediaList;
exports.CSSMediaRule = require("./CSSMediaRule").CSSMediaRule;
exports.StyleSheet = require("./StyleSheet").StyleSheet;
exports.CSSStyleSheet = require("./CSSStyleSheet").CSSStyleSheet;
exports.parse = require("./parse").parse;
exports.clone = require("./clone").clone;

Spaces are mandatory inside CSS calc() function, and should not be removed in inlining.

.foo {
  width: calc(100% - 80px);
}

gets parsed to this

.foo {width: calc(100%-80px);}

and that doesn't work in the browser.

linear-gradient also has the same issue.

linear-gradient(135deg, #00689b 0%, #00375a 90%, #00375a 90%, #003455 100%);

gets parsed to this

linear-gradient(135deg, #00689b0%, #00375a90%, #00375a90%, #003455100%);

To replicate, create an element and do the following with it:

const domElement = document.createElement('div');

domElement.style.transform = 'translate3d(0px, 0px, 0px)';

assert(domElement.style.transform === 'translate3d(0px, 0px, 0px)'); // undefined

I can only get it to work if I use this specific pattern:

const domElement = document.createElement('div');

domElement.style['webkit-transform'] = 'translate3d(0px, 0px, 0px)';

assert(domElement.style.WebkitTransform === 'translate3d(0px, 0px, 0px)');

X-issue from https://github.com/tmpvar/jsdom/issues/1321

Hello,

Can you please add a Security Policy and describe what sort of vulnerabilities you consider valid for this library? I have found a few issues that could be pertinent depending on what you consider a vulnerability.

Thanks, Carter Snook

CSSGroupingRule.insertRule requires parse. Previously:

$ pwd
/path/to/CSSOM
$ node
Welcome to Node.js v18.1.0.
Type ".help" for more information.
> const CSSOM = require('./lib');
undefined
> const rule = new CSSOM.CSSGroupingRule();
undefined
> rule.insertRule('#a{}', 0);
Uncaught TypeError: CSSOM.parse is not a function
    at CSSGroupingRule.insertRule (/path/to/CSSOM/lib/CSSGroupingRule.js:41:22)

Now:

> rule.insertRule('#a{}', 0);
0

Currently CSSGroupingRule is calling CSSOM.parse but parse wasn't included which leads to a syntax error. This PR fixes that

Line which is currently calling CSSOM.parse: https://github.com/NV/CSSOM/blob/a469aae2f92e454e669aec821781626924f98d17/lib/CSSGroupingRule.js#L41

Hi, thanks for this library.

I'm trying to access "font-size" on a CSSStyleDeclaration object like I would on the browser using .fontSize but apparently it is only accessible using ["font-size"]... I think this applies to all dashed properties, is this intended?

const cssom = require("cssom"); //version 0.4.4

const styles = `@-moz-document url-prefix(){@media print{.enabled-vuetify-global-styling .v-application,.enabled-vuetify-global-styling .v-application--wrap{display:block}}}`;

cssom.parse(styles);

throws

Uncaught Error: Unexpected } (line 1, char 157)
    at parseError (/Users/przemyslawbeigert/code/bethink/wnl-platform/node_modules/cssom/lib/parse.js:62:15)
    at Object.parse (/Users/przemyslawbeigert/code/bethink/wnl-platform/node_modules/cssom/lib/parse.js:386:7) {
  line: 1,
  char: 157,
  styleSheet: CSSStyleSheet {
    parentStyleSheet: null,
    cssRules: [ [CSSMediaRule] ]
  }
}

cssom is installed with version "0.4.4" and is a dependency for jsdom at ^0.4.4

Followed this thread when this was an issue at version 0.3.2 with no avail