Skip to content

Instantly share code, notes, and snippets.

@tomhodgins
Created February 12, 2020 20:54
Show Gist options
  • Save tomhodgins/45d2ba2ea1c93f3797871e67b21b9639 to your computer and use it in GitHub Desktop.
Save tomhodgins/45d2ba2ea1c93f3797871e67b21b9639 to your computer and use it in GitHub Desktop.
Run these from your browser's JS console to get a report of everything JS can read from CSSOM
import(`https://unpkg.com/cssomtools`).then(({process, property}) => {
const found = new Set
process(
[
property('color', true),
property('background-color', true)
],
rule => {
if (rule.style.color) {
found.add(rule.style.color)
}
if (rule.style.backgroundColor) {
found.add(rule.style.backgroundColor)
}
}
)
console.group('Colors used on site')
console.log(found)
console.groupEnd()
})
import(`https://unpkg.com/cssomtools`).then(({process, property}) => {
const found = new Set()
process(
[
property('font', true),
property('font-family', true)
],
rule => {
if (rule.style.fontFamily) {
found.add(rule.style.fontFamily)
}
if (rule.style.font) {
found.add(rule.style.fontFamily)
}
}
)
console.group('Fonts used on site')
console.log(found)
console.groupEnd()
})
import('https://unpkg.com/cssomtools').then(({process, query}) => {
const found = new Set
process(
query(),
rule => {
if (
rule.media
&& rule.media.mediaText
) {
found.add(rule.media.mediaText)
}
}
)
console.group('Media query breakpoints used on site')
console.log(found)
console.groupEnd()
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment