用于生成 Google 字体 css PostCSS 工件的 Bash 脚本？

Question

我正在寻找一些可用于生成一些 postcss 工件的 sed 表达式。我可能应该把它分成两个问题。请告诉我。

我正在创建这个superfly-css-utility-fonts 模块。它将具有如下字体实用程序：

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

我计划使用 PostCSS 每个循环来生成这些，如下所示：

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

我有一个所有谷歌字体的列表，如下所示：

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

使用该输入，我需要输出要在循环中使用的逗号分隔值。换句话说：

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

我还需要生成像这样的 css 变量：

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

理想情况下，应该有 2 个 sed 表达式来实现这个目标，但其他解决方案也会很棒。

Answer 1

刚刚检查了你的 github 链接，所以..

...以下可能会有所帮助：

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

make_css_vars的输出

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

make_the_each 的输出

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

几个cmets：

• 您确定@each 列表中的名称可能包含- 字符，例如abhaya-libre？恕我直言，该列表只能包含\w+，例如仅限单词字符（字母、数字、_）
• 您可以直接从上述脚本生成整个输出文件，方法是将以下几行添加到上述脚本的末尾：

cat <<INDEXCSS
/*
     some static content
*/

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

输出：

/*
 some static content
*/

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