Bash script for producing Google Font css PostCSS artifacts?

Question

I'm looking for a few sed expressions that I can use to produce some postcss artifacts. It's possible that I should break this up into 2 questions. Just let me know.

I'm creating this superfly-css-utility-fonts module. It's going to have font utilities like these:

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

I plan on producing these using a PostCSS each loop like this:

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

I have a list of all the google fonts that looks like this:

@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');

With that input I need to output the comma separated values to be used in the loop. In other words:

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

I also need to produce css variables like these:

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

Ideally there would be 2 sed expressions to accomplish this goal, but other solutions would be great as well.

Answer 1

Just now checked your github link, so..

... the following could help:

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

output from the make_css_vars

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

output from the make_the_each

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

Few comments:

• are you sure, that the names in the @each list could contain the - character like abhaya-libre? IMHO the list could contain only \w+ e.g. only word-characters (letters, numbers, _)
• you could generate the whole output files directly from the above script, by adding the following lines to the end of the above script:

cat <<INDEXCSS
/*
     some static content
*/

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

Output:

/*
 some static content
*/

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