CSS MAPPER

A javascript function to map document.styleSheets.
The return values is an (Promise)[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise] that resolves to an object with the following properties:

• animations : a list of all CSSKeyframesRule defined
• conditionalGroups : a list of all the rules that have the cssRules property (@media, @supports…), mapped as follows:
  • conditionText : rule condition text
  • inheritedConditionText : string with a list of all the conditionText properties associated with parentRules, separated by a comma, in a descending order from the deepest.
  • rule : actual CSSRule
• fontDeclarations : All the font-family properties declared
• fonts : A list of all CSSfontFaceRule mapped as follows:
  • cssText : the same value of CSSfontFaceRule.cssText
  • fontFaceRule : CSSFontFaceRule
  • mapped : the styles associated with the CSSfontFaceRule
• mediaQueries : a list of all CSSMediaRule, including those associated with CSSStyleSheet and CSSImportRule
• styleSheets : all the CSSStyleSheet, including those that are not in the same domain ( which cssRules are not readable in document.styleSheets ). Browser default stylesheet is not included. Stylesheets are mapped as follows:
  • href : Returns a DOMString representing the location of the stylesheet. For html <style> tag is null.
  • sheet : actual CSSStyleSheet
  • type : This property is used to indicate stylesheets that cannot be accessed from document.stylesheet. “External” is added when we need to retrieve the style sheet, otherwise this property will be set with the style sheet type ( equal to stylesheet type ).

Usage

await cssMapper(document);
/* logs something like this:
animations:  [CSSKeyframesRule, CSSKeyframesRule]
conditionalGroups: [
    {conditionText: '@supports (display:grid)', inheritedConditionText: '', rule: CSSSupportsRule}
    {conditionText: '@media screen and (max-width: 900px)', inheritedConditionText: '@supports (display:grid)', rule: CSSMediaRule}
    {conditionText: '@media screen and (max-width: 600px)', inheritedConditionText: '@media screen and (max-width: 900px), @supports (display:grid)', rule: CSSMediaRule}
    {conditionText: '@media screen and (min-width: 900px)', inheritedConditionText: '', rule: CSSMediaRule}
]
fontDeclarations: [
    "\"Titillium Web\", sans-serif"
    "Roboto, sans-serif"
]
fonts: [
    {mapped: {…}, fontFaceRule: CSSFontFaceRule, cssText: '@font-face { font-family: Roboto; font-style: norm… U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; }'}
    {mapped: {…}, fontFaceRule: CSSFontFaceRule, cssText: '@font-face { font-family: Roboto; font-style: norm…range: U+400-45F, U+490-491, U+4B0-4B1, U+2116; }'}
    {mapped: {…}, fontFaceRule: CSSFontFaceRule, cssText: '@font-face { font-family: Roboto; font-style: norm…") format("woff2"); unicode-range: U+1F00-1FFF; }'}
    {mapped: {…}, fontFaceRule: CSSFontFaceRule, cssText: '@font-face { font-family: Roboto; font-style: norm…f2") format("woff2"); unicode-range: U+370-3FF; }'}
    {mapped: {…}, fontFaceRule: CSSFontFaceRule, cssText: '@font-face { font-family: Roboto; font-style: norm…169, U+1A0-1A1, U+1AF-1B0, U+1EA0-1EF9, U+20AB; }'}
    {mapped: {…}, fontFaceRule: CSSFontFaceRule, cssText: '@font-face { font-family: Roboto; font-style: norm… U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }'}
    {mapped: {…}, fontFaceRule: CSSFontFaceRule, cssText: '@font-face { font-family: Roboto; font-style: norm…U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }'}
    {mapped: {…}, fontFaceRule: CSSFontFaceRule, cssText: '@font-face { font-family: "Titillium Web"; font-st… U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }'}
    {mapped: {…}, fontFaceRule: CSSFontFaceRule, cssText: '@font-face { font-family: "Titillium Web"; font-st…U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }'}
]
mediaQueries: [
    {rule: CSSMediaRule, children: Array(1)}
    {rule: CSSImportRule, children: Array(0)}
    {rule: CSSMediaRule, children: Array(0)}
    {rule: CSSStyleSheet, children: Array(0)}
    {rule: CSSStyleSheet, children: Array(0)}
]
styleSheets: [
    {href: 'https://fonts.googleapis.com/css?family=Roboto:400…cyrillic-ext,greek,greek-ext,latin-ext,vietnamese', sheet: CSSStyleSheet, type: 'external'}
    {href: 'https://fonts.googleapis.com/css?family=Titillium+Web:400,400i,700,700i&display=swap', sheet: CSSStyleSheet, type: 'external'}
    {href: 'http://localhost:63342/webtile-node-test/www/css-mapper/css.css', sheet: CSSStyleSheet, type: 'text/css'}
    {href: 'http://localhost:63342/webtile-node-test/www/css-mapper/widescreen.css', sheet: CSSStyleSheet, type: 'text/css'}
    {href: 'http://localhost:63342/webtile-node-test/www/css-mapper/smallscreen.css', sheet: CSSStyleSheet, type: 'text/css'}
    {href: null, sheet: CSSStyleSheet, type: 'text/css'}
]

Running the tests

Tests are in test/test.html