CSS MATCHER

A javascript function to retrieve all the css rules associated with a DOM element

cssMatcher(document.body,styles)

Parameters

element
    the DOM element
styles
    The styleSheets property present in the return value of css-mapper

Return value

an object with the following properties:
ancestors : an array of objects that map all the CSSStyleRules associated with the ancestor elements,structured as follows:

• ancestor : ancestor element
• ancestorStyle : an object structured as follows
  • inheritedProps: boolean that indicates that is inherited. In this case, it will be true
  • isStyle: boolean that indicates if is a ‘style’ rule (associated with the element by attribute). In this case, it will be true
  • properties: an object as follows
    • property : property name
    • value: style property value
    • isInherited : if this property is inherited. In this case, it will be true
  • rule: ancestor element if isStyle
• matches: an array of objects similar to cssMatches, with the difference that inheritedProps will be valorized to true and the properties inside the properties object will have ‘isInherited’ setted to true

cssMatches : an array of objects that map all the CSSStyleRules associated with the element, structured as follows

• href : URL location of the stylesheet associated with the CSSStyleRule. If isStyle, it will not be setted
• inheritedProps : setted to false or undefined
• isStyle : boolean that indicates if it is a ‘style’ rule (associated with the element by attribute)
• properties : an object as follows
  • property : property name
  • value: style property value
  • isInherited : if this property is inherited. In this case, it will be false
  • rule: element if isStyle, othherwise the CSSStyleRule
  • selectors: an array with all the selectors presents in the CSSStyleRule.selector ( splitted by ‘,’)
    • match : if the selector match the element
    • selectorText : a string representing css selector
  • specifity: the rule specificity

properties: a list of all the css properties retrieved from all the rules that match the element.
pseudoStates: an array of objects similar to cssMatches, with the property pseudos that is an array of some pseudo classes associated with the rule. The pseudo classes are :hover|:active|:focus|:focus-within|:visited.
pseudoElements: an array of objects similar to cssMatches, with the property pseudos that is an array of all the pseudo elements associated with the rule
getCssTextProperties: a function that parse all the properties present in a CSSStyleDeclaration.cssText string. This property is associated with window.getCssTextProperties
isShortHand: a function to verify if a css property is a css shorthand

Dependencies

This project uses the following libraries:

• css-specificity
• css-mapper

Running the tests

At the moment there are not automated tests for this part. However, you can test manually in test.html or in pseudosTest.html.