Creates a new instance of StyleSheet to wrap the given CSSStyleSheet.
The wrapped CSSStyleSheet
The wrapped CSS stylesheet.
Styles the elements with the wrapped CSSStylesheet using the
adoptedStyleSheets property of Document and ShadowRoot objects.
If an element is neither a document nor a shadow root, an open shadow root is created for it and then the root is styled.
Rest ...elements: T[]The elements, document fragments, shadow roots or documents to add style
import { StyleSheet } from 'deleight/css';
const style = new StyleSheet(css);
style.add(...document.body.children)
Deletes the first style rule matching the given query. This uses the selectFirst function.
The starting text of the style rule to delete.
import { StyleSheet } from 'deleight/css';
const style = new StyleSheet(cssStyleSheet);
style.delete('div');
Deletes all css rules matching the given query.
The starting text of the style rules to delete.
import { StyleSheet, createStyle } from 'deleight/css'
const css = 'p {border: none;}, a {text-decoration: none;}'
const sheet = new StyleSheet(createStyle(css));
sheet.deleteAll('a, p'); // sheet.css.cssRules === [];
Returns the first style rule matching the given query (or undefined if there is none). This uses the selectFirst function.
The starting text of the style rule to get
The selected style rule
import { StyleSheet } from 'deleight/css';
const style = new StyleSheet(cssStyleSheet);
style.get('div');
// CSSRule{...}
Returns all the style rules matching the specified query using the selectAll function.
The starting text of the style rules to get.
The selected dtyle rules
import { StyleSheet } from 'deleight/css';
const style = new StyleSheet(cssStyleSheet);
[...style.getAll('p')];
Removes the wrapped stylesheet from the given documents, shadow roots or elements. For elements, the stylesheet is removed from their shadowRoot property.
Rest ...elements: T[]The elements, document fragments, shadow roots or documents to add unstyle
import { StyleSheet } from 'deleight/css';
const style = new StyleSheet(css);
style.add(...document.body.children)
style.remove(document.body.children[0], document.body.children[5])
Replaces the cssText of the first style rule matching the
given query with the given value. This uses the
selectFirst function.
The starting text of the style rule to update.
The new value to overwrite existing CSS text with
import { StyleSheet } from 'deleight/css';
const style = new StyleSheet(cssStyleSheet);
style.set('div', 'div {border: none;}');
Assigns the given values to the css rules matching the query (in the order they are specified in the query).
The starting text of the style rules to update.
Rest ...values: (string | CSSRule)[]The values to replace matching rules with.
import { StyleSheet, createStyle } from 'deleight/css'
const css = 'p {border: none;}, a {text-decoration: none;}'
const sheet = new StyleSheet(createStyle(css));
sheet.setAll('a, p', 'a {color: white;}', 'p {color: black}');
// sheet.css.cssRules.map(r => r.cssText) === ['p {color: black}', 'a {color: white;}''];
Wraps a CSSStyleSheet to provide convenient methods for styling and 'unstyling' elements and manipulating the CSSStyleSheet.
Example