gulp-sass - npm Package Compare versions

Comparing version 5.1.0 to 6.0.0

index.js

@@ -27,7 +27,13 @@ 'use strict';
  */
-const filePush = (file, sassObject, callback) => {
+const filePush = (file, compileResult, callback) => {
+  file.contents = Buffer.from(compileResult.css);
+  file.path = replaceExtension(file.path, '.css');
+
   // Build Source Maps!
-  if (sassObject.map) {
-    // Transform map into JSON
-    const sassMap = JSON.parse(sassObject.map.toString());
+  if (compileResult.sourceMap) {
+    const sassMap = compileResult.sourceMap;
+    if (!sassMap.file) {
+      sassMap.file = file.path;
+    }
+
     // Grab the stdout and transform it into stdin
@@ -59,5 +65,2 @@ const sassMapFile = sassMap.file.replace(/^stdout$/, 'stdin');
 
-  file.contents = sassObject.css;
-  file.path = replaceExtension(file.path, '.css');
-
   if (file.stat) {
@@ -76,3 +79,3 @@ file.stat.atime = file.stat.mtime = file.stat.ctime = new Date();
   const relativePath = path.relative(process.cwd(), filePath);
-  const message = `${picocolors.underline(relativePath)}\n${error.formatted}`;
+  const message = `${picocolors.underline(relativePath)}\n${error.message}`;
 
@@ -116,48 +119,44 @@ error.messageFormatted = message;
     const opts = clonedeep(options || {});
-    opts.data = file.contents.toString();
 
-    // We set the file path here so that libsass can correctly resolve import paths
-    opts.file = file.path;
-
-    // Ensure `indentedSyntax` is true if a `.sass` file
+    // Ensure `indented` if a `.sass` file
     if (path.extname(file.path) === '.sass') {
-      opts.indentedSyntax = true;
+      opts.syntax = 'indented';
     }
 
     // Ensure file's parent directory in the include path
-    if (opts.includePaths) {
-      if (typeof opts.includePaths === 'string') {
-        opts.includePaths = [opts.includePaths];
+    if (opts.loadPaths) {
+      if (typeof opts.loadPaths === 'string') {
+        opts.loadPaths = [opts.loadPaths];
       }
     } else {
-      opts.includePaths = [];
+      opts.loadPaths = [];
     }
 
-    opts.includePaths.unshift(path.dirname(file.path));
+    opts.loadPaths.unshift(path.dirname(file.path));
 
     // Generate Source Maps if the source-map plugin is present
     if (file.sourceMap) {
-      opts.sourceMap = file.path;
-      opts.omitSourceMapUrl = true;
-      opts.sourceMapContents = true;
+      opts.sourceMap = true;
+      opts.sourceMapIncludeSources = true;
     }
 
+    const fileContents = file.contents.toString();
     if (sync !== true) {
       /**
-       * Async Sass render
+       * Async Sass compile
        */
-      gulpSass.compiler.render(opts, (error, obj) => {
-        if (error) {
+      gulpSass.compiler
+        .compileStringAsync(fileContents, opts)
+        .then((compileResult) => {
+          filePush(file, compileResult, callback);
+        })
+        .catch((error) => {
           handleError(error, file, callback);
-          return;
-        }
-
-        filePush(file, obj, callback);
-      });
+        });
     } else {
       /**
-       * Sync Sass render
+       * Sync Sass compile
        */
       try {
-        filePush(file, gulpSass.compiler.renderSync(opts), callback);
+        filePush(file, gulpSass.compiler.compileString(fileContents, opts), callback);
       } catch (error) {
@@ -171,3 +170,3 @@ handleError(error, file, callback);
 /**
- * Sync Sass render
+ * Sync Sass compile
  */
@@ -180,3 +179,3 @@ gulpSass.sync = (options) => gulpSass(options, true);
 gulpSass.logError = function logError(error) {
-  const message = new PluginError('sass', error.messageFormatted).toString();
+  const message = new PluginError('sass', error).toString();
   process.stderr.write(`${message}\n`);
@@ -187,3 +186,3 @@ this.emit('end');
 module.exports = (compiler) => {
-  if (!compiler || !compiler.render) {
+  if (!compiler || !compiler.compile) {
     const message = new PluginError(
@@ -190,0 +189,0 @@ PLUGIN_NAME,

package.json

 {
   "name": "gulp-sass",
-  "version": "5.1.0",
+  "version": "6.0.0",
   "description": "Gulp plugin for sass",
@@ -13,5 +13,7 @@ "main": "index.js",
     "mocha": "mocha",
-    "test": "npm run test:node-sass && npm run test:dart-sass",
+    "test": "npm run test:node-sass && npm run test:dart-sass && npm run test:legacy-dart-sass && npm run test:sass-embedded",
     "test:node-sass": "mocha",
-    "test:dart-sass": "mocha -- --sass"
+    "test:dart-sass": "mocha -- --sass",
+    "test:legacy-dart-sass": "mocha -- --sass --legacy",
+    "test:sass-embedded": "mocha -- --embedded"
   },
@@ -34,3 +36,4 @@ "repository": {
   "files": [
-    "index.js"
+    "index.js",
+    "legacy.js"
   ],
@@ -60,4 +63,5 @@ "dependencies": {
     "sass": "^1.45.1",
+    "sass-embedded": "^1.49.9",
     "vinyl": "^2.2.1"
   }
 }

README.md

@@ -7,3 +7,3 @@ # gulp-sass ![npm package version](https://img.shields.io/npm/v/gulp-sass?label=npm%20version) [![Build Status](https://img.shields.io/github/workflow/status/dlmanning/gulp-sass/CI/master)](https://github.com/dlmanning/gulp-sass/actions?query=workflow%3ACI+branch%3Amaster) [![Join the chat at https://gitter.im/dlmanning/gulp-sass](https://img.shields.io/gitter/room/dlmanning/gulp-sass?color=%2346b091&label=chat&logo=gitter)](https://gitter.im/dlmanning/gulp-sass) ![Node.js support](https://img.shields.io/node/v/gulp-sass)
 
-**Migrating your existing project to version 5? Please read our (short!) [migration guide](#migrating-to-version-5).**
+**Migrating your existing project to version 5 or 6? Please read our (short!) [migration guides](#migrating-to-version-6).**
 
@@ -16,3 +16,3 @@ ## Support
 
-To use `gulp-sass`, you must install both `gulp-sass` itself *and* a Sass compiler. `gulp-sass` supports both [Dart Sass][] and [Node Sass][], although Node Sass is [deprecated](https://sass-lang.com/blog/libsass-is-deprecated). We recommend that you use Dart Sass for new projects, and migrate Node Sass projects to Dart Sass when possible.
+To use `gulp-sass`, you must install both `gulp-sass` itself *and* a Sass compiler. `gulp-sass` supports both [Embedded Sass][], [Dart Sass][] and [Node Sass][], although Node Sass is [deprecated](https://sass-lang.com/blog/libsass-is-deprecated). We recommend that you use Dart Sass for new projects, and migrate Node Sass projects to Dart Sass or Embedded Sass when possible.
 
@@ -47,3 +47,3 @@ Whichever compiler you choose, it's best to install these as dev dependencies:
 
-**⚠️ Note:** When using Dart Sass, **synchronous rendering is twice as fast as asynchronous rendering**. The Sass team is exploring ways to improve asynchronous rendering with Dart Sass, but for now, you will get the best performance from `sass.sync()`. If performance is critical, you can use `node-sass` instead, but bear in mind that `node-sass` may not support modern Sass features you rely on.
+**⚠️ Note:** When using Dart Sass, **synchronous rendering is twice as fast as asynchronous rendering**. The Sass team is exploring ways to improve asynchronous rendering with Dart Sass, but for now, you will get the best performance from `sass.sync()`. If performance is critical, you can use `sass-embedded` instead.
 
@@ -68,3 +68,3 @@ ### Render your CSS
 exports.watch = function () {
-  gulp.watch('./sass/**/*.scss', ['sass']);
+  gulp.watch('./sass/**/*.scss', buildStyles);
 };
@@ -85,8 +85,8 @@ ```
 
-To change the final output of your CSS, you can pass an options object to your renderer. `gulp-sass` supports [Node Sass's render options](https://github.com/sass/node-sass#options), with two unsupported exceptions:
+To change the final output of your CSS, you can pass an options object to your renderer. `gulp-sass` supports [Sass's JS API compile options](https://sass-lang.com/documentation/js-api/modules#compileString), with a few usage notes:
 
-- The `data` option, which is used by `gulp-sass` internally.
-- The `file` option, which has undefined behavior that may change without notice.
+- The `syntax` option is set to `indented` automatically for files with the `.sass` extension
+- The `sourceMap` and `sourceMapIncludeSources` options are set for you when using `gulp-sourcemaps`
 
-For example, to compress your CSS, you can call `sass({outputStyle: 'compressed'}`. In the context of a Gulp task, that looks like this:
+For example, to compress your CSS, you can call `sass({style: 'compressed'}`. In the context of a Gulp task, that looks like this:
 
@@ -96,3 +96,3 @@ ```js
   return gulp.src('./sass/**/*.scss')
-    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
+    .pipe(sass({style: 'compressed'}).on('error', sass.logError))
     .pipe(gulp.dest('./css'));
@@ -109,3 +109,3 @@ };
   return gulp.src('./sass/**/*.scss')
-    .pipe(sass.sync({outputStyle: 'compressed'}).on('error', sass.logError))
+    .pipe(sass.sync({style: 'compressed'}).on('error', sass.logError))
     .pipe(gulp.dest('./css'));
@@ -151,2 +151,23 @@ };
 
+<h2 id="migrating-to-version-6">Migrating to version 6</h2>
+
+`gulp-sass` version 6 uses the new [compile](https://sass-lang.com/documentation/js-api/modules#compileString) function internally by default. If you use any options, for instance custom importers, please compare the [new options](https://sass-lang.com/documentation/js-api/modules#compileString) with the [legacy options](https://sass-lang.com/documentation/js-api/modules#render) in order to migrate. For instance, the `outputStyle` option is now called `style`.
+
+```diff
+  function buildStyles() {
+    return gulp.src('./sass/**/*.scss')
+-     .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
++     .pipe(sass({style: 'compressed'}).on('error', sass.logError))
+      .pipe(gulp.dest('./css'));
+  };
+```
+
+If you want to keep using the legacy API while it's available, you can.
+
+```js
+const sass = require('gulp-sass/legacy')(require('sass'));
+```
+
+If you use source maps, you may see the result change somewhat. The result will typically be absolute `file:` URLs, rather than relative ones. The result may also be the source itself, URL encoded. You can [optionally add custom importers](https://sass-lang.com/documentation/js-api/interfaces/CompileResult#sourceMap) to adjust the source maps according to your own needs.
+
 <h2 id="migrating-to-version-5">Migrating to version 5</h2>
@@ -158,3 +179,3 @@
 
-As of version 5, `gulp-sass` _does not include a default Sass compiler_, so you must install one (either `node-sass` or `sass`) along with `gulp-sass`.
+As of version 5, `gulp-sass` _does not include a default Sass compiler_, so you must install one (either `sass`, `sass-embedded`, or `node-sass`) along with `gulp-sass`.
 
@@ -188,2 +209,24 @@ ```sh
 
+### Using the legacy Sass API
+
+If you need to use the deprecated `render` Sass API, `gulp-sass` still includes legacy support.
+
+```js
+'use strict';
+
+const gulp = require('gulp');
+const sass = require('gulp-sass/legacy')(require('sass'));
+
+function buildStyles() {
+  return gulp.src('./sass/**/*.scss')
+    .pipe(sass().on('error', sass.logError))
+    .pipe(gulp.dest('./css'));
+};
+
+exports.buildStyles = buildStyles;
+exports.watch = function () {
+  gulp.watch('./sass/**/*.scss', buildStyles);
+};
+````
+
 ### What about fibers?
@@ -203,2 +246,3 @@
 
+[Embedded Sass]: https://github.com/sass/embedded-host-node
 [Dart Sass]: https://sass-lang.com/dart-sass
@@ -205,0 +249,0 @@ [LibSass]: https://sass-lang.com/libsass

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

23871

increased by21.84%

Lines of code

322

increased by100%

Number of lines in readme file

241

increased by22.34%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

16

increased by6.67%

Number of low supply chain risk alerts

2

increased by100%

No dependency changes