StyleSheet Internals

The Document StyleSheets Property

We wanted to take a look at all the CSS rules for an entire site. We discovered the

The code below:

Pulls all the styles sheets from the DOM
Maps each one
Collects the CSS rules for each

let styles = document.styleSheets;
this.getGetTexContent(styles);

private getTextContent(collection: StyleSheetList) {
    let oneArray = Array.from(collection);
    let cssRules = oneArray.map((stylesheet) => {
      let ss: any = stylesheet;
      try {
        if (ss.rules) {          
          return ss.rules;
        }
      } catch (error) {}
    });
    debugger;
    this.es.data.emit(cssRules);
  }

We had to include the try catch because of this error.

Uncaught DOMException: Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules

CSSRuleList Internals

The DOM contains the stylesheet list for entire site.
Each stylesheet contains a CSSRuleList.
Each Rule in that list may contain it's own CSSRuleList.
Each (Rule) known as a CSSStyleRule looks like this:

CSSStyleRule {
 selectorText: ".slider[_ngcontent-nko-c0]",
 style: CSSStyleDeclaration,
 styleMap: StylePropertyMap,
 type: 1,
 cssText: ".slider[_ngcontent-nko-c0] { 
  animation: 1s ease 0s 1 normal forwards running slidein; }",
 …}

cssText: ".slider[_ngcontent-nko-c0] { 
  animation: 1s ease 0s 1 normal forwards running slidein; }"
parentRule: null
parentStyleSheet: CSSStyleSheet {
 ownerRule: null,
 cssRules: CSSRuleList,
 rules: CSSRuleList,
 type: "text/css",
 href: null,
 …}

selectorText: ".slider[_ngcontent-nko-c0]"
style: CSSStyleDeclaration {
 0: "animation-duration",
 1: "animation-timing-function",
 2: "animation-delay",
 3: "animation-iteration-count",
 4: "animation-direction",
 5: "animation-fill-mode",
 6: "animation-play-state",
 7: "animation-name",
 alignContent: "",
 alignItems: "",
 alignSelf: "",
 alignmentBaseline: "",
 all: "",
 …}

styleMap: StylePropertyMap {size: 8}

type: 1

Now that we've discovered this; maybe it's the foundation for yet another CSS tool, like this tool we created to see if we could develop a Css refactoring tool. What is shown is a table of all styles where we did no parsing at all.

Material Tab Styling in Angular for a CSS Tool

John Peters ・ Jun 7 '20

#angular #material #typescript

Blog

John Peters

Material Tab Styling in Angular for a CSS Tool

John Peters ・ Jun 7 '20

Join Our Newsletter. No Spam, Only the good stuff.

Related