cdoublev / css

JavaScript implementation of CSS object models.

CSS

JavaScript implementation of CSS.

Usage

const { cssom, install } = require('@cdoublev/css')

/**
 * install() expects a window-like global object (default: globalThis) with
 * document, Array, Object, Number, String, TypeError.
 */
install(/*myGlobalObject*/)

// Create a CSSStyleSheet
const styleSheet = new /*myGlobalObject.*/CSSStyleSheet()

// Create a CSSStyleSheet or CSSStyleDeclaration wrapper
const stylesheet = cssom.CSSStyleSheet.create(myGlobalObject, undefined, privateProperties)
const style = cssom.CSSStyleDeclaration.create(myGlobalObject, undefined, privateProperties)

The webidl2js wrappers are intended to implement:

• create a CSS style sheet: when processing or updating the content of HTMLStyleElement, when processing the resource referenced by HTMLLinkElement or an HTTP Link header with rel="stylesheet"
• (get) the style attribute of an HTMLElement
• return a live CSS declaration block from Window.getComputedStyle()

To sum up, they mostly exist to create CSSStyleSheet and CSSStyleDeclaration. Below are the properties defined in the CSSOM specification and their associated property read in privateProperties:

CSSStyleSheet

• CSS rules: rules (String or ReadableStream)
• alternate flag: alternate (Boolean, optional, default: false)
• disabled flag: disabled (Boolean, optional, default: false)
• location: location (String, optional, default: null)
• media: media (String or MediaList)
• origin-clean flag: originClean (Boolean)
• owner CSS rule: ownerRule (CSSRule, optional, default: null)
• owner node: ownerNode (HTMLElement)
• parent CSS style sheet: parentStyleSheet (CSSStyleSheet, optional, default: null)
• title: title (String, optional, default: '')

CSSStyleDeclaration

• computed flag: computed (Boolean, optional, default: false)
• declarations: declarations ([Declaration], optional, default: [])
• owner node: ownerNode (HTMLElement, optional, default: null)
• parent CSS rule: parentRule (CSSRule, optional, default: null)

Declaration must be a plain object with the following properties:

• name: String
• value: String
• important: Boolean (optional, default: false)

css's Issues

`<number-token>` does not distinguish between `number` and `integer` types.

https://drafts.csswg.org/css-syntax/#consume-number

1. Let type be the string "integer"

4.3 and 5.4 Set type to "number".

`npm install` fails

css/package.json

Line 36 in 4f882bf

"prepare": "npm run build:interface && npm run build:definitions",

pm ERR! command failed
npm ERR! command sh -c npm run build:interface && npm run build:definitions
npm ERR! > @cdoublev/[email protected] build:interface
npm ERR! > node ./scripts/interface.js
npm ERR! 
npm ERR! 
npm ERR! > @cdoublev/[email protected] build:definitions
npm ERR! > npm run build:definitions:extract && npm run build:definitions:initial
npm ERR! 
npm ERR! 
npm ERR! > @cdoublev/[email protected] build:definitions:extract
npm ERR! > node ./scripts/extract.js
npm ERR! 
npm ERR! Error: Unhandled duplicate definitions of <fit-content()>
npm ERR!     at /Users/romainmenke/.npm/_cacache/tmp/git-clonesYPidqwseic3/scripts/extract.js:712:27
npm ERR!     at Array.forEach (<anonymous>)
npm ERR!     at addTypes (/Users/romainmenke/.npm/_cacache/tmp/git-clonesYPidqwseic3/scripts/extract.js:676:17)
npm ERR!     at /Users/romainmenke/.npm/_cacache/tmp/git-clonesYPidqwseic3/scripts/extract.js:761:9
npm ERR!     at Array.forEach (<anonymous>)
npm ERR!     at addProperties (/Users/romainmenke/.npm/_cacache/tmp/git-clonesYPidqwseic3/scripts/extract.js:732:17)
npm ERR!     at /Users/romainmenke/.npm/_cacache/tmp/git-clonesYPidqwseic3/scripts/extract.js:852:9
npm ERR!     at Array.forEach (<anonymous>)
npm ERR!     at build (/Users/romainmenke/.npm/_cacache/tmp/git-clonesYPidqwseic3/scripts/extract.js:848:36)
npm ERR! Please report this issue: https://github.com/cdoublev/css/issues/new
npm ERR! node:internal/process/promises:289
npm ERR!             triggerUncaughtException(err, true /* fromPromise */);
npm ERR!             ^
npm ERR! 
npm ERR! Error: Unhandled duplicate definitions of <fit-content()>
npm ERR!     at /Users/romainmenke/.npm/_cacache/tmp/git-clonesYPidqwseic3/scripts/extract.js:712:27
npm ERR!     at Array.forEach (<anonymous>)
npm ERR!     at addTypes (/Users/romainmenke/.npm/_cacache/tmp/git-clonesYPidqwseic3/scripts/extract.js:676:17)
npm ERR!     at /Users/romainmenke/.npm/_cacache/tmp/git-clonesYPidqwseic3/scripts/extract.js:761:9
npm ERR!     at Array.forEach (<anonymous>)
npm ERR!     at addProperties (/Users/romainmenke/.npm/_cacache/tmp/git-clonesYPidqwseic3/scripts/extract.js:732:17)
npm ERR!     at /Users/romainmenke/.npm/_cacache/tmp/git-clonesYPidqwseic3/scripts/extract.js:852:9
npm ERR!     at Array.forEach (<anonymous>)
npm ERR!     at build (/Users/romainmenke/.npm/_cacache/tmp/git-clonesYPidqwseic3/scripts/extract.js:848:36)
npm ERR! 
npm ERR! Node.js v21.7.1

I know this isn't published yet and probably not yet expected to be used, but I wanted to play around with it and unfortunately installing fails.

I suspect that it is caused by the prepare script.

Which seems to run when adding it as a dependency like this : "@cdoublev/css": "git+https://github.com/cdoublev/css.git"

I thought I could work around this by doing npm install --ignore-scripts but that didn't seem to have any effect.

---

Feel free to ignore and close this issue if fixing it isn't worth it for you at this time :)