### Get Property Value and Priority

Source: https://context7.com/jsdom/cssstyle/llms.txt

Retrieve CSS property values using getPropertyValue and their priority flags using getPropertyPriority. Returns an empty string if the property is not set or has no priority.

```javascript
const { CSSStyleDeclaration } = require("cssstyle");

const globalObject = { DOMException: globalThis.DOMException, TypeError: globalThis.TypeError };
const style = new CSSStyleDeclaration(globalObject);

style.cssText = "color: red; background: blue !important; margin: 10px;";

// Get property values
console.log(style.getPropertyValue("color"));      // "red"
console.log(style.getPropertyValue("background")); // "blue"
console.log(style.getPropertyValue("margin"));     // "10px"
console.log(style.getPropertyValue("padding"));    // "" (not set)

// Get property priority
console.log(style.getPropertyPriority("color"));      // ""
console.log(style.getPropertyPriority("background")); // "important"
```

--------------------------------

### Manage CSS Custom Properties

Source: https://context7.com/jsdom/cssstyle/llms.txt

Shows how to set and retrieve CSS variables using cssText or setProperty. Note that custom properties are case-sensitive.

```javascript
const { CSSStyleDeclaration } = require("cssstyle");

const globalObject = { DOMException: globalThis.DOMException, TypeError: globalThis.TypeError };
const style = new CSSStyleDeclaration(globalObject);

// Set custom properties via cssText
style.cssText = "--primary-color: #3498db; --spacing: 16px;";
console.log(style.getPropertyValue("--primary-color")); // "#3498db"
console.log(style.getPropertyValue("--spacing"));       // "16px"

// Set custom properties via setProperty
style.setProperty("--secondary-color", "green");
console.log(style.getPropertyValue("--secondary-color")); // "green"

// Custom properties are case-sensitive
style.cssText = "--fOo: purple";
console.log(style.getPropertyValue("--foo"));  // "" (not found)
console.log(style.getPropertyValue("--fOo"));  // "purple"

// Using var() in property values
style.setProperty("width", "var(--spacing)");
console.log(style.getPropertyValue("width")); // "var(--spacing)"

// var() with fallback
style.setProperty("color", "var(--text-color, black)");
console.log(style.color);            // "var(--text-color, black)"

// Nested var()
style.setProperty("margin", "var(--outer, var(--inner))");
console.log(style.margin);           // "var(--outer, var(--inner))"
```

--------------------------------

### CSSStyleDeclaration Class Instantiation

Source: https://context7.com/jsdom/cssstyle/llms.txt

Describes how to instantiate the CSSStyleDeclaration class, including optional configuration for jsdom integration.

```APIDOC
## CSSStyleDeclaration Constructor

### Description
Creates a new instance of the CSSStyleDeclaration class to manage CSS declarations.

### Parameters
#### Request Body
- **globalObject** (Object) - Required - A mock global object containing DOMException and TypeError.
- **options** (Object) - Optional - Configuration object including 'computed' (boolean), 'context' (Element/CSSRule), and 'onChangeCallback' (function).
```

--------------------------------

### Use CSS Math Functions

Source: https://context7.com/jsdom/cssstyle/llms.txt

Demonstrates support for calc() and other CSS math functions. Expressions involving variables are preserved as-is.

```javascript
const { CSSStyleDeclaration } = require("cssstyle");

const globalObject = { DOMException: globalThis.DOMException, TypeError: globalThis.TypeError };
const style = new CSSStyleDeclaration(globalObject);

// Basic calc()
style.setProperty("width", "calc(100% - 100px)");
console.log(style.width);            // "calc(100% - 100px)"

style.setProperty("height", "calc(50vh + 20px)");
console.log(style.height);           // "calc(50vh + 20px)"

// Nested calc() (simplified)
style.setProperty("width", "calc(100% - calc(200px - 100px))");
console.log(style.width);            // "calc(100% - 100px)"

// calc() with multiplication
style.setProperty("width", "calc(100% * calc(2 / 3))");
console.log(style.width);            // "calc(66.6667%)"

// CSS math functions
style.setProperty("line-height", "abs(1 - 2 * 3)");
console.log(style.lineHeight);       // "calc(5)"

style.setProperty("line-height", "sign(.1)");
console.log(style.lineHeight);       // "calc(1)"

// calc() with var() (preserved as-is)
style.setProperty("width", "calc(100% - var(--sidebar-width))");
console.log(style.width);            // "calc(100% - var(--sidebar-width))"
```

--------------------------------

### Monitor Style Changes with onChangeCallback

Source: https://context7.com/jsdom/cssstyle/llms.txt

Implement an onChangeCallback to monitor style changes. The callback is triggered when cssText is modified or setProperty is used, but not for redundant updates or removing non-existent properties.

```javascript
const { CSSStyleDeclaration } = require("cssstyle");

const globalObject = { DOMException: globalThis.DOMException, TypeError: globalThis.TypeError };

let changeCount = 0;
const style = new CSSStyleDeclaration(globalObject, undefined, {
  onChangeCallback: (cssText) => {
    changeCount++;
    console.log(`Change #${changeCount}:`, cssText);
  }
});

// Callback fired on cssText change
style.cssText = "opacity: 0;";
// Output: Change #1: opacity: 0;

// Callback fired once for multiple properties via cssText
style.cssText = "width: 100px; height: 100px;";
// Output: Change #2: width: 100px; height: 100px;

// Callback NOT fired when value doesn't change
style.setProperty("width", "100px");  // Same value, no callback

// Callback NOT fired when removing non-existent property
style.removeProperty("margin");       // No callback
```

--------------------------------

### Shorthand Properties

Source: https://context7.com/jsdom/cssstyle/llms.txt

Explains how shorthand CSS properties are automatically expanded into their longhand equivalents.

```APIDOC
## Shorthand Properties

### Description
Shorthand properties automatically expand to their longhand equivalents when set on the CSSStyleDeclaration object.

### Supported Shorthands
- **border** - Expands to borderWidth, borderStyle, borderColor, etc.
- **background** - Expands to backgroundColor, backgroundImage, etc.
- **margin/padding** - Expands to top, right, bottom, and left longhand properties.
- **font** - Expands to fontWeight, fontSize, fontFamily, etc.
- **flex** - Expands to flexGrow, flexShrink, and flexBasis.
```

--------------------------------

### onChangeCallback

Source: https://context7.com/jsdom/cssstyle/llms.txt

Monitoring style changes in CSSStyleDeclaration.

```APIDOC
## onChangeCallback

### Description
A callback function triggered when the cssText of a CSSStyleDeclaration is modified, provided the value actually changes.

### Configuration
- **onChangeCallback** (function) - Optional - A function that receives the new cssText string when a change occurs.
```

--------------------------------

### Handle CSS Colors

Source: https://context7.com/jsdom/cssstyle/llms.txt

Demonstrates parsing and normalization of various color formats including named, hex, RGB, and HSL colors. Invalid color values are rejected and clear the property.

```javascript
const { CSSStyleDeclaration } = require("cssstyle");

const globalObject = { DOMException: globalThis.DOMException, TypeError: globalThis.TypeError };
const style = new CSSStyleDeclaration(globalObject);

// Named colors
style.color = "rebeccapurple";
console.log(style.color);            // "rebeccapurple"

// Hex colors (normalized to rgb/rgba)
style.color = "#ff0000";
console.log(style.color);            // "red" (named color shortcut)

style.color = "#ffffff66";
console.log(style.color);            // "rgba(255, 255, 255, 0.4)"

// RGB/RGBA
style.color = "rgba(0, 0, 0, 0)";
console.log(style.color);            // "rgba(0, 0, 0, 0)"

style.color = "rgb(33%, 34%, 33%)";
console.log(style.color);            // "rgb(84, 87, 84)"

// HSL/HSLA
style.color = "hsl(0, 1%, 2%)";
console.log(style.color);            // "rgb(5, 5, 5)"

style.color = "hsla(0, 1%, 2%, 0.5)";
console.log(style.color);            // "rgba(5, 5, 5, 0.5)"

// Special color values
style.color = "transparent";
console.log(style.color);            // "transparent"

style.color = "currentcolor";
console.log(style.color);            // "currentcolor"

// Invalid colors are rejected
style.color = "#1234567";            // Invalid hex
console.log(style.color);            // "" (cleared)
```

--------------------------------

### item Method

Source: https://context7.com/jsdom/cssstyle/llms.txt

Accesses CSS property names by their index, which is useful for iterating over all defined properties.

```APIDOC
## item

### Description
Access property names by index, useful for iterating over all properties.

### Parameters
#### Arguments
- **index** (number) - Required - The index of the property to retrieve.

### Response
- **propertyName** (string) - The name of the CSS property at the specified index, or an empty string if the index is out of range.
```

--------------------------------

### Instantiate CSSStyleDeclaration

Source: https://context7.com/jsdom/cssstyle/llms.txt

Basic instantiation of CSSStyleDeclaration. A mock global object with DOMException and TypeError is required. Options can be provided for jsdom integration, computed styles, context, and change callbacks.

```javascript
const { CSSStyleDeclaration } = require("cssstyle");

// Create a mock global object (required for DOMException handling)
const globalObject = {
  DOMException: globalThis.DOMException,
  TypeError: globalThis.TypeError
};

// Basic instantiation
const style = new CSSStyleDeclaration(globalObject);

// With options for jsdom integration
const styleWithOptions = new CSSStyleDeclaration(globalObject, undefined, {
  computed: false,           // Set true for computed styles (read-only)
  context: element,          // DOM Element or CSSRule context
  onChangeCallback: (css) => console.log("Style changed:", css)
});
```

--------------------------------

### Set Styles via cssText

Source: https://context7.com/jsdom/cssstyle/llms.txt

Parse and set multiple CSS properties at once using the cssText property. Setting cssText to an empty string clears all properties. Useful for bulk style updates.

```javascript
const { CSSStyleDeclaration } = require("cssstyle");

const globalObject = { DOMException: globalThis.DOMException, TypeError: globalThis.TypeError };
const style = new CSSStyleDeclaration(globalObject);

// Set multiple properties via cssText
style.cssText = "color: blue; background-color: red; width: 78%; height: 50vh;";

console.log(style.length);           // 4
console.log(style.cssText);          // "color: blue; background-color: red; width: 78%; height: 50vh;"
console.log(style.getPropertyValue("color")); // "blue"
console.log(style[0]);               // "color"
console.log(style[1]);               // "background-color"

// Clear all properties
style.cssText = "";
console.log(style.length);           // 0
```

--------------------------------

### CSSStyleDeclaration !important Handling

Source: https://context7.com/jsdom/cssstyle/llms.txt

Managing CSS declarations with !important priority.

```APIDOC
## CSSStyleDeclaration !important Handling

### Description
Methods to set and retrieve the priority of CSS properties within a CSSStyleDeclaration.

### Methods
- **getPropertyPriority(propertyName)**: Returns 'important' if set, otherwise empty string.
- **setProperty(propertyName, value, priority)**: Sets a property with an optional 'important' priority.
```

--------------------------------

### Set Individual CSS Properties

Source: https://context7.com/jsdom/cssstyle/llms.txt

Set CSS properties directly using camelCase names or the setProperty method. The setProperty method accepts kebab-case and an optional priority flag.

```javascript
const { CSSStyleDeclaration } = require("cssstyle");

const globalObject = { DOMException: globalThis.DOMException, TypeError: globalThis.TypeError };
const style = new CSSStyleDeclaration(globalObject);

// Using camelCase properties (preferred for programmatic access)
style.color = "blue";
style.backgroundColor = "red";
style.fontSize = "16px";
style.marginTop = "10px";

console.log(style.cssText);          // "color: blue; background-color: red; font-size: 16px; margin-top: 10px;"

// Using setProperty method (accepts kebab-case)
style.setProperty("border-radius", "5px");
style.setProperty("padding", "20px");
style.setProperty("opacity", 0.75);

console.log(style.borderRadius);     // "5px"
console.log(style.padding);          // "20px"
console.log(style.opacity);          // "0.75"

// Setting with priority
style.setProperty("display", "block", "important");
console.log(style.getPropertyPriority("display")); // "important"
console.log(style.cssText);          // includes "display: block !important;"
```

--------------------------------

### CSSStyleDeclaration Property Manipulation

Source: https://context7.com/jsdom/cssstyle/llms.txt

Covers methods for setting and retrieving CSS properties, including cssText, camelCase access, and setProperty.

```APIDOC
## CSSStyleDeclaration Property Methods

### Description
Methods for manipulating CSS properties via cssText, direct property assignment, or the setProperty interface.

### Methods
- **cssText** (string) - Get or set the entire CSS declaration block as a string.
- **setProperty(propertyName, value, priority)** - Sets a CSS property. 'propertyName' is string (kebab-case), 'value' is string/number, 'priority' is optional string ('important').
- **getPropertyValue(propertyName)** - Returns the value of the specified property.
- **getPropertyPriority(propertyName)** - Returns the priority of the specified property (e.g., 'important').
```

--------------------------------

### Access CSS Properties by Index

Source: https://context7.com/jsdom/cssstyle/llms.txt

The item() method allows access to CSS property names by their index, which is useful for iterating through all set properties. Properties are also accessible via bracket notation.

```javascript
const { CSSStyleDeclaration } = require("cssstyle");

const globalObject = { DOMException: globalThis.DOMException, TypeError: globalThis.TypeError };
const style = new CSSStyleDeclaration(globalObject);

style.cssText = "color: blue; background-color: red; width: 78%;";

// Access by index using item()
console.log(style.item(0));          // "color"
console.log(style.item(1));          // "background-color"
console.log(style.item(2));          // "width"
console.log(style.item(99));         // "" (out of range)

// Also accessible via bracket notation
console.log(style[0]);               // "color"
console.log(style[1]);               // "background-color"

// Iterate over all properties
for (let i = 0; i < style.length; i++) {
  const prop = style.item(i);
  const value = style.getPropertyValue(prop);
  console.log(`${prop}: ${value}`);
}
// Output:
// color: blue
// background-color: red
// width: 78%
```

--------------------------------

### Shorthand CSS Properties Expansion

Source: https://context7.com/jsdom/cssstyle/llms.txt

Shorthand CSS properties like border, background, margin, padding, and font automatically expand to their corresponding longhand properties when set.

```javascript
const { CSSStyleDeclaration } = require("cssstyle");

const globalObject = { DOMException: globalThis.DOMException, TypeError: globalThis.TypeError };
const style = new CSSStyleDeclaration(globalObject);

// Border shorthand
style.border = "1px solid black";
console.log(style.borderWidth);      // "1px"
console.log(style.borderStyle);      // "solid"
console.log(style.borderColor);      // "black"
console.log(style.borderTopWidth);   // "1px"
console.log(style.borderLeftStyle);  // "solid"
console.log(style.borderBottomColor);// "black"

// Background shorthand
style.background = "blue url(http://example.com/img.jpg)";
console.log(style.backgroundColor);  // "blue"
console.log(style.backgroundImage);  // 'url("http://example.com/img.jpg")'

// Margin/padding shorthand (1-4 values)
style.margin = "10px 20px";          // top/bottom: 10px, left/right: 20px
console.log(style.marginTop);        // "10px"
console.log(style.marginRight);      // "20px"
console.log(style.marginBottom);     // "10px"
console.log(style.marginLeft);       // "20px"

style.padding = "5px 10px 15px 20px"; // top, right, bottom, left
console.log(style.paddingTop);       // "5px"
console.log(style.paddingRight);     // "10px"
console.log(style.paddingBottom);    // "15px"
console.log(style.paddingLeft);      // "20px"

// Font shorthand
style.font = "bold 12em monospace";
console.log(style.fontWeight);       // "bold"
console.log(style.fontSize);         // "12em"
console.log(style.fontFamily);       // "monospace"

// Flex shorthand
style.flex = "0 1 250px";
console.log(style.flexGrow);         // "0"
console.log(style.flexShrink);       // "1"
console.log(style.flexBasis);        // "250px"
```

--------------------------------

### cssFloat Property

Source: https://context7.com/jsdom/cssstyle/llms.txt

Accessing the 'float' CSS property using the cssFloat alias.

```APIDOC
## cssFloat Property

### Description
Since 'float' is a reserved keyword in JavaScript, the library provides the 'cssFloat' alias to access the CSS float property.
```

--------------------------------

### parsePropertyValue Function

Source: https://context7.com/jsdom/cssstyle/llms.txt

Parses and validates CSS property values, returning structured objects or keywords.

```APIDOC
## parsePropertyValue(property, value)

### Description
Parses a CSS property value string into a structured format or returns keywords/values as appropriate.

### Parameters
#### Arguments
- **property** (string) - Required - The CSS property name.
- **value** (string) - Required - The CSS value string to parse.

### Response
- **Returns** (Array|string|undefined) - Returns an array of parsed objects, a string for special cases like var(), or undefined if invalid.
```

--------------------------------

### Handle !important Declarations with CSSStyleDeclaration

Source: https://context7.com/jsdom/cssstyle/llms.txt

Manage !important declarations using the CSSStyleDeclaration class. Set importance via cssText or setProperty, and observe its inclusion in serialization.

```javascript
const { CSSStyleDeclaration } = require("cssstyle");

const globalObject = { DOMException: globalThis.DOMException, TypeError: globalThis.TypeError };
const style = new CSSStyleDeclaration(globalObject);

// Set important via cssText
style.cssText = "color: red !important; background: blue;";
console.log(style.getPropertyPriority("color"));      // "important"
console.log(style.getPropertyPriority("background")); // ""

// Set important via setProperty
style.setProperty("margin", "10px", "important");
console.log(style.getPropertyPriority("margin"));     // "important"

// Serialization includes !important
console.log(style.cssText);
// "color: red !important; background: blue; margin: 10px !important;"

// Shorthand serialization with mixed priorities
style.cssText = "margin-top: 10px; margin-right: 10px !important; margin-bottom: 10px; margin-left: 10px;";
// Properties with different priorities are not combined into shorthand
console.log(style.margin);           // "" (can't combine)

// All same priority combines into shorthand
style.cssText = "margin-top: 10px !important; margin-right: 10px !important; margin-bottom: 10px !important; margin-left: 10px !important;";
console.log(style.cssText);          // "margin: 10px !important;"
```

--------------------------------

### removeProperty Method

Source: https://context7.com/jsdom/cssstyle/llms.txt

Removes a specific CSS property from the style declaration and returns its previous value.

```APIDOC
## removeProperty

### Description
Removes a CSS property and returns its previous value.

### Parameters
#### Arguments
- **propertyName** (string) - Required - The name of the CSS property to remove.

### Response
- **returnValue** (string) - The value of the property before it was removed.
```

--------------------------------

### Remove CSS Property

Source: https://context7.com/jsdom/cssstyle/llms.txt

Use removeProperty to remove a CSS property and retrieve its previous value. Assigning null or an empty string to a property also effectively removes it.

```javascript
const { CSSStyleDeclaration } = require("cssstyle");

const globalObject = { DOMException: globalThis.DOMException, TypeError: globalThis.TypeError };
const style = new CSSStyleDeclaration(globalObject);

style.cssText = "color: blue; background-color: red; width: 100px;";
console.log(style.length);           // 3

// Remove a property and get its old value
const oldColor = style.removeProperty("color");
console.log(oldColor);               // "blue"
console.log(style.color);            // ""
console.log(style.length);           // 2
console.log(style.cssText);          // "background-color: red; width: 100px;"

// Also works with null or empty string assignment
style.width = null;
console.log(style.width);            // ""
console.log(style.cssText);          // "background-color: red;"
```

--------------------------------

### Access 'float' via cssFloat Alias

Source: https://context7.com/jsdom/cssstyle/llms.txt

Use the cssFloat alias to access the 'float' CSS property, as 'float' is a reserved word in JavaScript. setProperty also accepts 'float'.

```javascript
const { CSSStyleDeclaration } = require("cssstyle");

const globalObject = { DOMException: globalThis.DOMException, TypeError: globalThis.TypeError };
const style = new CSSStyleDeclaration(globalObject);

// 'float' is a reserved word, use cssFloat
style.cssFloat = "left";
console.log(style.cssFloat);         // "left"
console.log(style.float);            // "left" (also works)

// Via setProperty (accepts 'float')
style.setProperty("float", "right");
console.log(style.getPropertyValue("float")); // "right"
console.log(style.cssFloat);                   // "right"
```

--------------------------------

### Parse CSS Property Values with parsePropertyValue

Source: https://context7.com/jsdom/cssstyle/llms.txt

Use parsePropertyValue to parse and validate CSS property values. It returns an array of parsed tokens or undefined for invalid values. Empty strings are returned as is.

```javascript
const { parsePropertyValue } = require("cssstyle");

// Parse valid property values
const colorValue = parsePropertyValue("color", "rgb(255, 0, 0)");
console.log(colorValue);
// [{ type: 'Function', name: 'rgb', value: '255, 0, 0' }]

const widthValue = parsePropertyValue("width", "100px");
console.log(widthValue);
// [{ type: 'Dimension', value: '100', unit: 'px' }]

const marginValue = parsePropertyValue("margin", "10px 20px");
console.log(marginValue);
// [
//   { type: 'Dimension', value: '10', unit: 'px' },
//   { type: 'Dimension', value: '20', unit: 'px' }
// ]

// Global keywords
const globalValue = parsePropertyValue("color", "inherit");
console.log(globalValue);
// [{ type: 'GlobalKeyword', name: 'inherit' }]

// Invalid values return undefined
const invalid = parsePropertyValue("width", "invalid-value");
console.log(invalid);                // undefined

// Empty string handling
const empty = parsePropertyValue("color", "");
console.log(empty);                  // ""

// var() is preserved as-is
const varValue = parsePropertyValue("width", "var(--custom)");
console.log(varValue);               // "var(--custom)"
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.