Script Bash pour produire des artefacts PostCSS Google Font css?

Question

Je cherche quelques expressions sed que je peux utiliser pour produire des artefacts postcss. Il est possible que je devrais diviser ceci en 2 questions. Faites le moi savoir. Je crée ce module superfly-css-utility-fonts. Il va avoir les services de police comme celles-ci:

.u-font-open-sans { 
    font-family: "Open Sans", var(--font-family-helvetica-neue) !important; 
} 

Je prévois la production de ces utilisant un PostCSS chaque boucle comme ceci:

@each $font in open-sans, lato, etc... 

J'ai une liste de toutes les polices google qui ressemble à ceci:

@import url('https://fonts.googleapis.com/css?family=Yeseva+One'); 
@import url('https://fonts.googleapis.com/css?family=Yesteryear'); 
@import url('https://fonts.googleapis.com/css?family=Yrsa'); 
@import url('https://fonts.googleapis.com/css?family=Zeyada'); 

Avec cette entrée j'ai besoin de sortir les valeurs séparées par des virgules à utiliser dans la boucle. En d'autres termes:

yeseva-one, yesteryear, yrsa, zeyada, etc. 

Je dois aussi produire des variables css comme celles-ci:

--font-yeseva-one: "Yeseva One"; 
--font-yrsa: "Yrsa"; 
... 

Idéalement il y aurait 2 expressions sed pour atteindre cet objectif, mais d'autres solutions serait super aussi.

Answer 1

Tout à l'heure vérifié votre lien github, donc ..

... ce qui suit pourrait aider:

fontlist="./fonts.css" 

#loads the list of all google fonts from the $fontlist into array 
#in the names are replaced the '+' with space (e.g. "Yeseva+One" -> "Yeseva One") 
mapfile -t google < <(sed "s/.*=\(.*\)'.*/\1/;s/+/ /g" "$fontlist") 

#functions 

# gfonts returns the content of array 
gfonts() { printf "%s\n" "${google[@]}"; } 

#make_css_vars - greate the font lines like: 
# --font-yeseva-one: "Yeseva One"; 
make_css_vars() { 
    while read -r gname; do 
     local lc_name="${gname,,}" 
     printf -- ' --font-%s: "%s";\n' "${lc_name// /-}" "$gname" 
    done < <(gfonts) 
} 

#make_the_each - create the @postCSS @each line like 
# @each $font in yeseva-one, yesteryear, yrsa, zeyada 
make_the_each() { 
    printf '@each $font in %s\n' "$(gfonts | tr '[:upper:]' '[:lower:]' | tr ' ' '-' | paste -sd, - | sed 's/,/, /g')" 
} 

#use the above functions as: 

make_css_vars # >somefile 
make_the_each # >anotherfile 

sortie du make_css_vars

--font-yeseva-one: "Yeseva One"; 
    --font-yesteryear: "Yesteryear"; 
    --font-yrsa: "Yrsa"; 
    --font-zeyada: "Zeyada"; 

sortie du make_the_each

@each $font in yeseva-one, yesteryear, yrsa, zeyada 

Peu de commentaires:

• êtes-vous sûr que les noms dans la liste @each pourraient contenir le caractère - comme abhaya-libre? À mon humble avis la liste pourrait contenir seulement \w+ par exemple. seulement mot-caractères (lettres, chiffres, _)
• vous pouvez générer l'ensemble des fichiers de sortie directement à partir du script ci-dessus, en ajoutant les lignes suivantes à la fin du script ci-dessus:

cat <<INDEXCSS 
/* 
    some static content 
*/ 

root: { 
$(make_css_vars) 
} 
/* other static content */ 
INDEXCSS 

sortie:

/* 
some static content 
*/ 

root: { 
    --font-yeseva-one: "Yeseva One"; 
    --font-yesteryear: "Yesteryear"; 
    --font-yrsa: "Yrsa"; 
    --font-zeyada: "Zeyada"; 
} 
/* other static content */