Last active
April 28, 2020 12:48
-
-
Save Rarst/aed61335fc68694a84f0a1131a4ef5fd to your computer and use it in GitHub Desktop.
Automagically add Tailwind–like CSS from Frontend Mentor style guide files. https://www.frontendmentor.io/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
fetch('style-guide.md') | |
.then((response) => { | |
return response.text(); | |
}) | |
.then((markdown) => { | |
parseMarkdown(markdown) | |
}); | |
function parseMarkdown(markdown) { | |
let css = ''; | |
const colors = parseColors(markdown); | |
colors.forEach(color => { | |
css += `.text-${color.cssName} { color: ${color.value} } | |
.bg-${color.cssName} { background-color: ${color.value} } | |
.border-${color.cssName} { border-color: ${color.value} }\n`; | |
}) | |
const fonts = parseFonts(markdown); | |
fonts.forEach(font => { | |
let urlSafeName = font.name.replace(/ /g, '+'); | |
let weights = font.weights.join(';'); | |
let url = `https://fonts.googleapis.com/css2?family=${urlSafeName}:wght@${weights}&display=swap`; | |
addStyleLink(url); | |
css += `.font-${font.cssName} { font-family: '${font.name}' }\n`; | |
}); | |
addStyleTag(css); | |
} | |
function parseColors(markdown) { | |
const colorRegex = /-\s*(?<name>[\s\w]+)\s*:\s*(?<value>hsl\(.+\))/g; | |
let colors = markdown.matchAll(colorRegex); | |
let output = []; | |
for (let {groups: {name, value}} of colors) { | |
output.push({name, cssName: parseColorName(name), value}); | |
} | |
return output; | |
} | |
function parseColorName(colorName) { | |
colorName = colorName.toLowerCase(); | |
let parts = colorName.split(' '); | |
if (2 > parts.length) { | |
return colorName; | |
} | |
parts.unshift(parts.pop()) | |
return parts.join('-'); | |
} | |
function parseFonts(markdown) { | |
const fontRegex = /Family\s*:\s*\[(?<name>[\s\w]+)].+?Weights:\s*(?<weights>[\s\d,]+)/gms; | |
let fonts = markdown.matchAll(fontRegex); | |
let output = []; | |
for (let {groups: {name, weights}} of fonts) { | |
let cssName = name.toLowerCase().replace(/ /g, '-'); | |
weights = weights.replace(/\s/g, '').split(','); | |
output.push({name, cssName, weights}); | |
} | |
return output; | |
} | |
function addStyleTag(css) { | |
let style = document.createElement('style'); | |
style["type"] = 'text/css'; | |
style.innerHTML = css; | |
document.getElementsByTagName('head')[0].appendChild(style); | |
} | |
function addStyleLink(url) { | |
let link = document.createElement('link'); | |
link.setAttribute('rel', 'stylesheet'); | |
link.setAttribute('type', 'text/css'); | |
link.setAttribute('href', url); | |
document.getElementsByTagName('head')[0].appendChild(link); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment