Merge pull request #18 from wide/feature.sass-embedded

Feature.sass embedded

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wide/forge",
-  "version": "2.3.3",
+  "version": "3.0.0-alpha.1",
   "description": "Zero-based configuration builder for frontend integration projects.",
   "license": "MIT",
   "author": "Aymeric Assier (https://github.com/myeti)",
@@ -17,7 +17,7 @@
     "forge": "./lib/cli.js"
   },
   "engines": {
-    "node": ">=12.18.0"
+    "node": ">=14.19.0"
   },
   "scripts": {
     "build": "babel src/ -d lib/ --presets=@babel/preset-env --plugins=@babel/plugin-syntax-object-rest-spread,@babel/plugin-transform-runtime",
@@ -40,7 +40,7 @@
     "parcel-bundler": "^1.12.5",
     "postcss": "^8.3.11",
     "rimraf": "^3.0.2",
-    "sass": "^1.43.4",
+    "sass-embedded": "^1.50.0",
     "svg-sprite": "^1.5.3",
     "twig": "^1.15.4",
     "yargs": "^17.2.1"

readme.md

@@ -163,7 +163,7 @@ Notes:
 
 - source files: `/src/assets/**/*.{sass,scss}`
 - destination: `/dist/assets/*.css` and `/dist/assets/*.css.map`
-- compiled using [`sass`](https://www.npmjs.com/package/sass)
+- compiled using [`sass-embedded`](https://www.npmjs.com/package/sass-embedded)
 
 ### Path config
 
@@ -209,10 +209,13 @@ To edit the config of `sass` itself, create a `.sassrc.js` file at the root of y
 module.exports = {
 
   // path to look-up
-  includePaths: [],
+  loadPaths: [],
 
-  // enable of disable minification, see https://github.com/sass/node-sass#outputstyle
-  outputStyle,
+  // enable of disable minification, see https://sass-lang.com/documentation/js-api/modules#OutputStyle
+  style: 'compressed', // or 'expanded'
+
+  // source map (by default enabled on dev instances)
+  sourceMap: true,
 
   // post-process middlewares
   postprocess: {
@@ -223,13 +226,14 @@ module.exports = {
   },
 
   // ... and all others props described here:
-  // https://github.com/sass/node-sass#options
+  // https://sass-lang.com/documentation/js-api/interfaces/Options
 }
 ```
 
 Notes:
-- `includePaths` includes `node_modules/` by default
-- `outputStyle` is `compressed` on `PRODUCTION` by default
+- `loadPaths` includes `./` and `./node_modules/` by default
+- `style` is `compressed` on `PRODUCTION` by default
+- `sourceMap` is disabled on `PRODUCTION` by default
 - `postprocess`: **Forge** comes with a set of post-process to enhance the quality of the generated CSS
   - `autoprefixer`: use [`autoprefixer`](https://www.npmjs.com/package/autoprefixer) to add browser-specific prefixes:
     - `false` disable the post-process

src/compiler/sass.js

@@ -1,14 +1,7 @@
+import * as sass from 'sass-embedded'
 import { env, loadRC, resolveOutput, postProcess, write } from '../workspace'
-import postprocess    from './sass/postprocess'
-import plugins        from './sass/plugins'
-import { promisify }  from 'util'
-import sass           from 'sass'
-
-
-/**
- * Enable await/async on render function
- */
-const render = promisify(sass.render)
+import postprocess from './sass/postprocess'
+import importers from './sass/importers'
 
 
 /**
@@ -21,13 +14,13 @@ export default async function(ctx, config, targetConfig) {
 
   // get .sassrc
   const rc = loadRC('sass', {
-    includePaths: [
+    loadPaths: [
+      './',
       './node_modules/'
     ],
-    importer: [],
-    outputStyle: env.prod ? 'compressed' : 'expanded',
+    importers: [],
+    style: env.prod ? 'compressed' : 'expanded',
     sourceMap: true,
-    sourceMapEmbed: true,
     postprocess: {
       autoprefixer: false
     },
@@ -36,9 +29,13 @@ export default async function(ctx, config, targetConfig) {
     }
   })
 
-  // add built-in plugins
-  for(let i = plugins.length; i--;) {
-    rc.importer.push(plugins[i](rc))
+  // add built-in importers
+  if (importers.length) {
+    const methods = {}
+    for(let i = importers.length; i--;) {
+      methods[importers[i].name] = importers[i](rc)
+    }
+    rc.importers.push(methods)
   }
 
   // compile files
@@ -65,10 +62,7 @@ async function compile(file, ctx, targetConfig, rc) {
   const { outfile, outmap } = resolveOutput(file, ctx, targetConfig, '.css')
 
   // compile sass
-  let { css, map } = await render({
-    file,
-    outFile: outfile,
-    outDir: ctx.dest,
+  let { css, sourceMap } = await sass.compileAsync(file, {
     ...rc
   })
 
@@ -78,8 +72,8 @@ async function compile(file, ctx, targetConfig, rc) {
 
   // prepare write files
   const outWrite = [await write(outfile, css)]
-  if(map) {
-    outWrite.push(await write(outmap, map))
+  if(sourceMap) {
+    outWrite.push(await write(outmap, JSON.stringify(sourceMap)))
   }
 
   // write files

src/compiler/sass/importers.js

@@ -0,0 +1,31 @@
+import path from 'path'
+import { pathToFileURL } from 'url'
+
+
+/**
+ * Replace SCSS alias with real path
+ * @param {Object} rc
+ * @return {Function}
+ */
+ function findFileUrl(rc) {
+  return function findFileUrl(url) {
+    for(let alias in rc.alias) {
+      if(url.startsWith(alias)) {
+        const urlWithoutAlias = url.substr(alias.length)
+        const realFilename = path.join(rc.alias[alias], urlWithoutAlias)
+
+        return new URL(pathToFileURL(realFilename))
+      }
+    }
+
+    return null
+  }
+}
+
+
+/**
+ * Expose importers
+ */
+export default [
+  findFileUrl
+]