Skip to content

Commit

Permalink
Add support for Dart Sass (#283)
Browse files Browse the repository at this point in the history
  • Loading branch information
nex3 authored and sindresorhus committed Jun 27, 2018
1 parent 683ad07 commit 64f6444
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 13 deletions.
5 changes: 5 additions & 0 deletions gruntfile.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,12 @@
'use strict';
const sass = require('node-sass');

module.exports = grunt => {
grunt.initConfig({
sass: {
options: {
implementation: sass
},
compile: {
files: {
'test/tmp/compile.css': 'test/fixtures/test.scss',
Expand Down
4 changes: 1 addition & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,12 @@
"preprocess",
"libsass"
],
"dependencies": {
"node-sass": "^4.7.2"
},
"devDependencies": {
"grunt": "^1.0.1",
"grunt-cli": "^1.2.0",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-nodeunit": "^1.0.0",
"node-sass": "^4.7.2",
"xo": "*"
},
"peerDependencies": {
Expand Down
55 changes: 49 additions & 6 deletions readme.md
Original file line number Diff line number Diff line change
@@ -1,18 +1,30 @@
# grunt-sass [![Build Status](https://travis-ci.org/sindresorhus/grunt-sass.svg?branch=master)](https://travis-ci.org/sindresorhus/grunt-sass)

[<img src="https://rawgit.com/sass/node-sass/master/media/logo.svg" width="150" align="right">](https://github.com/sass/node-sass)
[<img src="https://github.com/sass/sass-site/blob/master/source/assets/img/logos/logo-seal.png" width="150" align="right">](https://sass-lang.com)

> Compile Sass to CSS using [node-sass](https://github.com/sass/node-sass)
> Compile Sass to CSS using [Dart Sass][] or [Node Sass][].
*The issue tracker is disabled because of continuous abuse. Use [Stack Overflow](https://stackoverflow.com/questions/tagged/node-sass) for support questions. Issues with the output should be reported on the libsass [issue tracker](https://github.com/hcatlin/libsass/issues). Install issues should be reported on the node-sass [issue tracker](https://github.com/sass/node-sass/issues). Learn how [semver works](https://nodesource.com/blog/semver-tilde-and-caret) before opening a PR updating node-sass.*
[Dart Sass]: http://sass-lang.com/dart-sass
[Node Sass]: https://github.com/sass/node-sass

This task uses [libsass](http://libsass.org), which is a Sass compiler in C++. It's a lot faster than the original Ruby compiler and [fully compatible](http://sass-compatibility.github.io/).
Before filing an issue with this repository, please consider:

* Asking support questions on Use [Stack Overflow][].

* Reporting issues with the output on the [Dart Sass][Dart Sass issues] or [LibSass][LibSass issues] issue trackers, depending which implementation you're using.

* Reporting installation issues on the [Dart Sass][Dart Sass issues] or [Node Sass][Node Sass issues] issue trackers, depending on which implementation you're using.

[Stack Overflow]: https://stackoverflow.com/questions/tagged/node-sass
[Dart Sass issues]: https://github.com/sass/dart-sass/issues/new
[LibSass issues]: https://github.com/sass/libsass/issues/new
[Node Sass issues]: https://github.com/sass/node-sass/issues/new


## Install

```
$ npm install --save-dev grunt-sass
$ npm install --save-dev node-sass grunt-sass
```

<a href="https://www.patreon.com/sindresorhus">
Expand All @@ -23,11 +35,42 @@ $ npm install --save-dev grunt-sass
## Usage

```js
const sass = require('node-sass');

require('load-grunt-tasks')(grunt);

grunt.initConfig({
sass: {
options: {
implementation: sass,
sourceMap: true
},
dist: {
files: {
'main.css': 'main.scss'
}
}
}
});

grunt.registerTask('default', ['sass']);
```

You can choose whether to use [Dart Sass][] or [Node Sass][] by passing the module to the `implementation` option. One implementation or the other *must* be passed.

Note that when using Dart Sass, **synchronous compilation is twice as fast as asynchronous compilation** by default, due to the overhead of asynchronous callbacks. To avoid this overhead, you can use the [`fibers`](https://www.npmjs.com/package/fibers) package to call asynchronous importers from the synchronous code path. To enable this, pass the `Fiber` class to the `fiber` option:

```js
const Fiber = require('fibers');
const sass = require('node-sass');

require('load-grunt-tasks')(grunt);

grunt.initConfig({
sass: {
options: {
implementation: sass,
fiber: Fiber,
sourceMap: true
},
dist: {
Expand All @@ -46,7 +89,7 @@ Files starting with `_` are ignored to match the expected [Sass partial behaviou

## Options

See the `node-sass` [options](https://github.com/sass/node-sass#options), except for `file`, `outFile`, `success`, `error`.
See the Node Sass [options](https://github.com/sass/node-sass#options), except for `file`, `outFile`, `success`, `error`.

The default value for the `precision` option is `10`, so you don't have to change it when using Bootstrap.

Expand Down
10 changes: 6 additions & 4 deletions tasks/sass.js
Original file line number Diff line number Diff line change
@@ -1,26 +1,28 @@
'use strict';
const util = require('util');
const path = require('path');
const sass = require('node-sass');

module.exports = grunt => {
grunt.verbose.writeln(`\n${sass.info}\n`);

grunt.registerMultiTask('sass', 'Compile Sass to CSS', async function () {
const done = this.async();

const options = this.options({
precision: 10
});

if (!options.implementation) {
grunt.fatal('The implementation option must be passed to the Sass task.');
}
grunt.verbose.writeln(`\n${options.implementation.info}\n`);

await Promise.all(this.files.map(async item => {
const [src] = item.src;

if (!src || path.basename(src)[0] === '_') {
return;
}

const result = await util.promisify(sass.render)(Object.assign({}, options, {
const result = await util.promisify(options.implementation.render)(Object.assign({}, options, {
file: src,
outFile: item.dest
}));
Expand Down

0 comments on commit 64f6444

Please sign in to comment.