LESSからSCSSへの移行

.postcssrc.yml

@@ -0,0 +1,5 @@
+plugins:
+  autoprefixer:
+    remove: false
+  postcss-clean:
+    level: 2

index.js

@@ -5,12 +5,13 @@ const Metalsmith = require('metalsmith');
 const assetsConvention = require('metalsmith-assets-convention');
 const babel = require('metalsmith-babel');
 const collections = require('metalsmith-collections');
+const sass = require('metalsmith-dart-sass');
 const directoryMetadata = require('metalsmith-directory-metadata');
 const excerpts = require('metalsmith-excerpts');
 const htmlValidator = require('metalsmith-html-validator');
 const ignore = require('metalsmith-ignore');
 const permalinks = require('metalsmith-permalinks');
-const postcss = require('metalsmith-postcss');
+const postcss = require('metalsmith-postcss2');
 const {
   compile: pugCompile,
   render: pugRender,
@@ -28,7 +29,6 @@ const childPages = require('./src/plugins/child-pages');
 const commentFrontmatter = require('./src/plugins/comment-matters');
 const copyConvention = require('./src/plugins/copy-convention');
 const downloadConvention = require('./src/plugins/download-convention');
-const less = require('./src/plugins/less');
 const mergePreloadDependencies = require('./src/plugins/merge-preload-dependencies');
 const modernizr = require('./src/plugins/modernizr');
 const mustache = require('./src/plugins/mustache');
@@ -164,19 +164,18 @@ Metalsmith(__dirname)
   .use(
     anotherSource('./src/styles')
       .use(commentFrontmatter())
-      .use(less({ sourceMap: false }))
       .use(
-        postcss({
-          // Source Mapのファイル名が<input css>になってしまうため無効化
-          map: false,
-          plugins: [
-            { autoprefixer: { remove: false } },
-            { 'postcss-clean': { level: 2 } },
-          ],
-        }),
+        sass((_files, _metalsmith, defaultOptions) => ({
+          dependenciesKey: 'dependencies',
+          pattern: [...defaultOptions.pattern, '!**/_*/**'],
+          sassOptions: {
+            includePaths: ['node_modules'],
+          },
+        })),
       )
+      .use(postcss())
       .use(mergePreloadDependencies())
-      .use(ignore('**/*.less')),
+      .use(ignore('**/*.scss')),
   )
   .use(
     anotherSource('./src/scripts')

package.json

@@ -24,7 +24,7 @@
     }
   },
   "lint-staged": {
-    "!(package).json|*.{html,css,less,yaml,yml,toml}": [
+    "!(package).json|*.{html,css,scss,yaml,yml,toml}": [
       "prettier --write",
       "git add"
     ],
@@ -58,19 +58,19 @@
     "image-size": "^0.7.4",
     "is-url": "^1.2.4",
     "keyv-file": "^0.1.13",
-    "less": "^3.9.0",
     "metalsmith": "^2.3.0",
     "metalsmith-assets-convention": "^2.1.1",
     "metalsmith-babel": "^5.1.0",
     "metalsmith-collections": "^0.9.0",
+    "metalsmith-dart-sass": "^1.0.1",
     "metalsmith-directory-metadata": "^1.0.0",
     "metalsmith-excerpts": "^1.2.0",
     "metalsmith-html-validator": "^1.0.0",
     "metalsmith-ignore": "^1.0.0",
     "metalsmith-in-place": "^4.4.0",
     "metalsmith-permalinks": "^2.2.0",
     "metalsmith-plugin-kit": "^1.0.1",
-    "metalsmith-postcss": "^4.2.0",
+    "metalsmith-postcss2": "^1.0.0",
     "metalsmith-pug-extra": "^1.0.1",
     "mime": "^2.4.3",
     "modernizr": "^3.7.1",

src/plugins/comment-matters.js

@@ -19,7 +19,16 @@ function stripIndent(text) {
 
 module.exports = opts => {
   const options = {
-    '**/*.less': text => {
+    '**/*.pug': text => {
+      const match = /^\/\/-(?:\r\n?|\n)((?:(?:| +[^\r\n]*)(?:\r\n?|\n|$))+)/.exec(
+        text,
+      );
+      if (match) {
+        const commentText = match[1];
+        return stripIndent(commentText);
+      }
+    },
+    '**/*.{scss,less}': text => {
       /*
        * 複数行コメントを処理
        */
@@ -43,15 +52,6 @@ module.exports = opts => {
         return stripIndent(commentText);
       }
     },
-    '**/*.pug': text => {
-      const match = /^\/\/-(?:\r\n?|\n)((?:(?:| +[^\r\n]*)(?:\r\n?|\n|$))+)/.exec(
-        text,
-      );
-      if (match) {
-        const commentText = match[1];
-        return stripIndent(commentText);
-      }
-    },
     ...opts,
   };
 

src/styles/_fn.scss

@@ -0,0 +1,8 @@
+/* see https://stackoverflow.com/a/38713737/4907315 */
+@function repeat($str, $count) {
+  $result: "";
+  @for $_ from 1 through $count {
+    $result: $result + $str;
+  }
+  @return $result;
+}

src/styles/_fontawesome/_base.scss

@@ -0,0 +1,5 @@
+$fa-font-path: "/fontawesome";
+
+@import "@fortawesome/fontawesome-free/scss/variables";
+@import "@fortawesome/fontawesome-free/scss/mixins";
+@import "@fortawesome/fontawesome-free/scss/core";

src/styles/_fontawesome.less → src/styles/_fontawesome/brands.scss

@@ -4,6 +4,5 @@
 //   - /fontawesome/fa-brands-400.woff2
 // ---
 
-@import "@fortawesome/fontawesome-free/less/fontawesome";
-@import "@fortawesome/fontawesome-free/less/brands";
-@fa-font-path: "/fontawesome";
+@import "base";
+@import "@fortawesome/fontawesome-free/scss/brands";

src/styles/_fontawesome/solid.less → src/styles/_fontawesome/solid.scss

@@ -4,6 +4,5 @@
 //   - /fontawesome/fa-solid-900.woff2
 // ---
 
-@import "@fortawesome/fontawesome-free/less/fontawesome";
-@import "@fortawesome/fontawesome-free/less/solid";
-@fa-font-path: "/fontawesome";
+@import "base";
+@import "@fortawesome/fontawesome-free/scss/solid";

src/styles/_mixins.scss

@@ -0,0 +1,15 @@
+@mixin invisible-text {
+  font-size: 0;
+  line-height: 0;
+}
+
+@mixin pseudo-image-resize($image, $width: 1em, $height: 1em) {
+  /* see https://saruwakakun.com/html-css/reference/change-before-after */
+  content: "";
+  display: inline-block;
+  width: $width;
+  height: $height;
+  background-image: $image;
+  background-size: contain;
+  vertical-align: middle;
+}

src/styles/default.less → src/styles/default.scss

@@ -1,5 +1,3 @@
-@import "_mixins";
-
 html {
   word-break: normal;
   word-wrap: break-word;

src/styles/footer.less → src/styles/footer.scss

@@ -11,9 +11,9 @@ footer.page {
   }
 
   & > * {
-    @margin-v: 0.5em;
-    margin-top: @margin-v;
-    margin-bottom: @margin-v;
+    $margin-v: 0.5em;
+    margin-top: $margin-v;
+    margin-bottom: $margin-v;
   }
 
   small {