use postcss via hugo pipes instead of cli

assets/sass/components/_fonts.scss

@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-/*! Roboto Latin | Apache License 2.0 | fonts.google.com/specimen/Roboto */
+/*! Roboto Latin | Apache License 2.0 | https://fonts.google.com/specimen/Roboto */
 @include font-face("Roboto", "Roboto", "Roboto-Regular", "./fonts/roboto-latin-regular", normal, 400);
 @include font-face("Roboto", "Roboto Medium", "Roboto-Medium", "./fonts/roboto-latin-medium", normal, 500);
 @include font-face("Roboto", "Roboto Bold", "Roboto-Bold", "./fonts/roboto-latin-bold", normal, 700);

assets/sass/pages/_home.scss

@@ -66,7 +66,8 @@ main#home {
     // easter egg emoji cursor
     &#birthday {
       &:hover {
-        cursor: url("data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNiIgdmlld3BvcnQ9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZm9udC1zaXplOjE4cHgiPjx0ZXh0IHk9IjUwJSI+8J+nmjwvdGV4dD48L3N2Zz4=") 5 5, auto;
+        // stylelint-disable-next-line function-url-quotes
+        cursor: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzNiIgdmlld3BvcnQ9IjAgMCAxMDAgMTAwIiBzdHlsZT0iZm9udC1zaXplOjE4cHgiPjx0ZXh0IHk9IjUwJSI+8J+nmjwvdGV4dD48L3N2Zz4=) 5 5, auto;
       }
     }
   }

layouts/partials/head.html

@@ -13,8 +13,7 @@
 <link rel="preload" href="{{ "fonts/roboto-latin-regular.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>
 <link rel="preload" href="{{ "fonts/roboto-latin-medium.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>
 <link rel="preload" href="{{ "fonts/roboto-latin-bold.woff2" | absURL }}" as="font" type="font/woff2" crossorigin>
-{{ $style := resources.Get "sass/main.scss" | resources.ToCSS (dict "targetPath" "style.css") }}
+{{ partial "styles" . }}
-<link rel="stylesheet" href="{{ $style.Permalink }}">
 <link rel="apple-touch-icon" href="{{ "apple-touch-icon.png" | absURL }}">
 <link rel="mask-icon" href="{{ "safari-pinned-tab.svg" | absURL }}" color="#009cdf">
 <link rel="icon" href="{{ "favicon-192.png" | absURL }}" sizes="192x192">

layouts/partials/styles.html

@@ -0,0 +1,2 @@
+{{ $style := resources.Get "sass/main.scss" | resources.ToCSS (dict "targetPath" "style.css") | resources.PostCSS (dict "config" "postcss.config.js") }}
+<link rel="stylesheet" href="{{ $style.Permalink }}">

package.json

@@ -22,7 +22,6 @@
     "start": "hugo server --buildDrafts --buildFuture --port 1313 --bind 0.0.0.0 --verbose",
     "optimize": "run-s optimize:**",
     "optimize:html": "html-minifier --html5 --collapse-whitespace --collapse-boolean-attributes --preserve-line-breaks --minify-css --file-ext html --input-dir public --output-dir public **/*.html",
-    "optimize:css": "postcss public/style.css --use autoprefixer --no-map --replace --verbose && sleep 10 && cleancss -O0 --format 'keep-breaks' -o public/style.css public/style.css",
     "optimize:img": "find public/ -type d | xargs -n1 -P8 -I{} imagemin {}/* --plugin=jpegoptim --plugin.jpegoptim.progressive --plugin.jpegoptim.stripAll --plugin=pngquant --plugin.pngquant.speed=5 --plugin.pngquant.strip --plugin=optipng --plugin.optipng.optimizationLevel=2 --plugin=svgo --plugin=gifsicle --out-dir={}",
     "lint": "run-p lint:**",
     "lint:markdown": "markdownlint content/notes/**/*.md",
@@ -34,7 +33,6 @@
   "dependencies": {},
   "devDependencies": {
     "autoprefixer": "^9.7.3",
-    "clean-css-cli": "^4.3.0",
     "cross-env": "^6.0.3",
     "get-folder-size": "^2.0.1",
     "html-minifier": "^4.0.0",
@@ -50,6 +48,7 @@
     "markdownlint-cli": "~0.21.0",
     "netlify-cli": "^2.27.0",
     "npm-run-all": "^4.1.5",
+    "postcss-clean": "^1.1.0",
     "postcss-cli": "^7.1.0",
     "rimraf": "^3.0.0",
     "stylelint": "~12.0.1",
@@ -64,13 +63,5 @@
   },
   "hugo-bin": {
     "buildTags": "extended"
-  },
-  "postcss": {
-    "plugins": {
-      "autoprefixer": {},
-      "stylelint": {
-        "configFile": ".stylelintrc.json"
-      }
-    }
   }
 }

postcss.config.js

@@ -0,0 +1,26 @@
+module.exports = {
+  options: {
+    map: false
+  },
+  plugins: [
+    require('autoprefixer')(),
+    require('postcss-clean')({
+      compatibility: '*',
+      level: 0,
+      format: {
+        breaks: {
+          afterAtRule: true,
+          afterBlockBegins: true,
+          afterBlockEnds: true,
+          afterComment: true,
+          afterRuleEnds: true,
+          beforeBlockEnds: true
+        },
+        spaces: {
+          beforeBlockBegins: true
+        },
+        semicolonAfterLastProperty: true
+      }
+    })
+  ]
+};

yarn.lock

@@ -1447,16 +1447,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-clean-css-cli@^4.3.0:
+clean-css@^4.2.1, clean-css@^4.x:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/clean-css-cli/-/clean-css-cli-4.3.0.tgz#8502aa86d1879e5b111af51b3c2abb799e0684ce"
-  integrity sha512-8GHZfr+mG3zB/Lgqrr27qHBFsPSn0fyEI3f2rIZpxPxUbn2J6A8xyyeBRVTW8duDuXigN0s80vsXiXJOEFIO5Q==
-  dependencies:
-    clean-css "^4.2.1"
-    commander "2.x"
-    glob "7.x"
-
-clean-css@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
   integrity sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==
@@ -1681,7 +1672,7 @@ colors@^1.1.2:
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
   integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
 
-commander@2.x, commander@^2.11.0, commander@^2.19.0, commander@^2.3.0, commander@~2.20.3:
+commander@^2.11.0, commander@^2.19.0, commander@^2.3.0, commander@~2.20.3:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -3370,7 +3361,7 @@ glob-to-regexp@^0.3.0:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.3.0.tgz#8c5a1494d2066c570cc3bfe4496175acc4d502ab"
   integrity sha1-jFoUlNIGbFcMw7/kSWF1rMTVAqs=
 
-glob@7.x, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@~7.1.2:
+glob@^7.1.3, glob@^7.1.4, glob@^7.1.6, glob@~7.1.2:
   version "7.1.6"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
@@ -6542,6 +6533,14 @@ posix-character-classes@^0.1.0:
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
   integrity sha1-AerA/jta9xoqbAL+q7jB/vfgDqs=
 
+postcss-clean@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-clean/-/postcss-clean-1.1.0.tgz#c2d61d5d8caf19a585adba16897726c2674c4207"
+  integrity sha512-83g3GqMbCM5NL6MlbbPLJ/m2NrUepBF44MoDk4Gt04QGXeXKh9+ilQa0DzLnYnvqYHQCw83nckuEzBFr2muwbg==
+  dependencies:
+    clean-css "^4.x"
+    postcss "^6.x"
+
 postcss-cli@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/postcss-cli/-/postcss-cli-7.1.0.tgz#769b07b8865aaa3e98c7c63a3d256b4f51e3e237"
@@ -6684,7 +6683,25 @@ postcss-values-parser@^1.5.0:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
-postcss@^7.0.0, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.23, postcss@^7.0.7:
+postcss@^6.x:
+  version "6.0.23"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.23.tgz#61c82cc328ac60e677645f979054eb98bc0e3324"
+  integrity sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==
+  dependencies:
+    chalk "^2.4.1"
+    source-map "^0.6.1"
+    supports-color "^5.4.0"
+
+postcss@^7.0.0, postcss@^7.0.14, postcss@^7.0.2, postcss@^7.0.21, postcss@^7.0.23, postcss@^7.0.7:
+  version "7.0.24"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.24.tgz#972c3c5be431b32e40caefe6c81b5a19117704c2"
+  integrity sha512-Xl0XvdNWg+CblAXzNvbSOUvgJXwSjmbAKORqyw9V2AlHrm1js2gFw9y3jibBAhpKZi8b5JzJCVh/FyzPsTtgTA==
+  dependencies:
+    chalk "^2.4.2"
+    source-map "^0.6.1"
+    supports-color "^6.1.0"
+
+postcss@^7.0.17:
   version "7.0.26"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.26.tgz#5ed615cfcab35ba9bbb82414a4fa88ea10429587"
   integrity sha512-IY4oRjpXWYshuTDFxMVkJDtWIk2LhsTlu8bZnbEJA4+bYT16Lvpo8Qv6EvDumhYRgzjZl489pmsY3qVgJQ08nA==