switch to Dart Sass (#2661)

* switch to Dart Sass

* make hexo work wherever its installed?

bin/build-css.js

@@ -1,4 +1,4 @@
-const sass = require('node-sass')
+const sass = require('sass')
 const postcss = require('postcss')
 const autoprefixer = require('autoprefixer')
 const cssnano = require('cssnano')
@@ -23,9 +23,9 @@ function handleErr (err) {
 async function compileCSS () {
   const files = await glob('packages/{,@uppy/}*/src/style.scss')
   for (const file of files) {
+    const importedFiles = new Set()
     const scssResult = await renderScss({
       file,
-      importedFiles: new Set(),
       importer (url, from, done) {
         resolve(url, {
           basedir: path.dirname(from),
@@ -36,8 +36,8 @@ async function compileCSS () {
 
           res = fs.realpathSync(res)
 
-          if (this.options.importedFiles.has(res)) return done({ contents: '' })
-          this.options.importedFiles.add(res)
+          if (importedFiles.has(res)) return done({ contents: '' })
+          importedFiles.add(res)
 
           done({ file: res })
         })

package.json

@@ -171,7 +171,6 @@
     "multi-glob": "1.0.2",
     "namespace-emitter": "2.0.1",
     "nock": "9.6.1",
-    "node-sass": "4.14.0",
     "nodemon": "1.19.4",
     "npm-auth-to-token": "1.0.0",
     "npm-packlist": "1.4.8",
@@ -189,6 +188,7 @@
     "replacestream": "^4.0.3",
     "resolve": "^1.17.0",
     "rimraf": "2.7.1",
+    "sass": "1.29.0",
     "size-limit": "4.5.6",
     "stringify-object": "3.3.0",
     "supertest": "3.4.2",
@@ -255,15 +255,15 @@
     "web:build-examples": "cd website && node build-examples.js",
     "web:build": "npm-run-all web:inject-disc web:inject-bundles-misc web:generate web:build-examples web:inject-frontpagecodesample",
     "web:bundle-watch-inject": "onchange 'packages/uppy/dist/**/*.css' 'packages/uppy/dist/**/*.js' --initial --verbose -- npm run web:inject-bundles-misc",
-    "web:clean": "cd website && touch db.json && ./node_modules/.bin/hexo clean",
+    "web:clean": "cd website && touch db.json && npm run hexo clean",
     "web:prepare-deploy": "bash ./bin/prepare-web-deploy",
-    "web:generate": "cd website && touch db.json && ./node_modules/.bin/hexo generate",
+    "web:generate": "cd website && touch db.json && npm run hexo generate",
     "web:inject-bundles-misc": "cd website && node inject.js",
     "web:inject-disc": "npm run build:lib && node ./bin/disc.js",
     "web:inject-frontpagecodesample": "npm run web:generate && cp -f website/public/frontpage-code-sample.html website/themes/uppy/layout/partials/frontpage-code-sample.html && touch website/themes/uppy/layout/index.ejs",
     "web:start": "npm-run-all build:lib --parallel watch:css web:watch-examples web:bundle-watch-inject web:watch",
     "web:watch-examples": "cd website && node build-examples.js watch",
-    "web:watch": "cd website && touch db.json && ./node_modules/.bin/hexo server"
+    "web:watch": "cd website && touch db.json && npm run hexo server"
   },
   "jest": {
     "automock": false,

website/package.json

@@ -30,7 +30,6 @@
     "hexo-include-markdown": "^1.0.2",
     "hexo-renderer-ejs": "^1.0.0",
     "hexo-renderer-marked": "2.0.0",
-    "hexo-renderer-scss": "^1.2.0",
     "hexo-server": "^1.0.0",
     "hexo-util": "^1.9.1",
     "js-yaml": "^3.13.1",
@@ -42,6 +41,10 @@
     "node-notifier": "^5.2.1",
     "postcss-inline-svg": "^3.1.1",
     "prismjs": "^1.17.1",
+    "sass": "^1.29.0",
     "watchify": "^3.11.0"
+  },
+  "scripts": {
+    "hexo": "hexo"
   }
-}
+}

website/scripts/scss.js

@@ -0,0 +1,18 @@
+const sass = require('sass')
+
+function scssRenderer (data) {
+  const result = sass.renderSync({
+    data: data.text,
+    file: data.path,
+    outputStyle: 'nested',
+    sourceComments: false,
+    indentedSyntax: data.path.endsWith('.sass'),
+    ...this.theme.config.node_sass,
+    ...this.config.node_sass
+  })
+
+  return result.css.toString()
+}
+
+hexo.extend.renderer.register('scss', 'css', scssRenderer)
+hexo.extend.renderer.register('sass', 'css', scssRenderer)