# 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.