Skip to content

Make Sass implementation agnostic ( supporting dart-sass ) #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 19 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Node SASS Asset functions [![Build Status](https://travis-ci.org/fetch/node-sass-asset-functions.svg?branch=master)](https://travis-ci.org/fetch/node-sass-asset-functions) [![npmjs](https://badge.fury.io/js/node-sass-asset-functions.svg)](https://www.npmjs.com/package/node-sass-asset-functions)

To ease the transitioning from Compass to Libsass, this module provides some of Compass' asset functions for [node-sass](https://github.com/sass/node-sass)
To ease the transitioning from Compass to Libsass, this module provides some of Compass' asset functions for [node-sass](https://github.com/sass/node-sass) or [sass](https://github.com/sass/sass)

_**NB** Please note that the `functions` option of node-sass is still experimental (>= v3.0.0)._

Expand Down Expand Up @@ -86,6 +86,24 @@ sass.render({
}, function(err, result) { /*...*/ });
```

#### `implementation`: a function to switch sass implementation

If you like to use other sass implementation (like `sass`), you can use `implementation` option to pass the module.

When you omit `implementation` option, `node-sass` ( version `^4.9.3` ) is implicitly used. ( See `devDependencies` of [package.json](https://github.com/fetch/node-sass-asset-functions/blob/master/package.json) )

```js
var sass = require('sass')

sass.render({
functions: assetFunctions({
implementation: sass,
}),
file: scss_filename,
[, options..]
}, function(err, result) { /*...*/ });
```

##### A more advanced example:

Here we include the file's hexdigest in the path, using the [`hexdigest`](https://github.com/koenpunt/node-hexdigest) module.
Expand Down
54 changes: 29 additions & 25 deletions __tests__/test.js
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
var fs = require('fs')
var path = require('path')
var sass = require('node-sass')
var assetFunctions = require('../')

var renderAsync = function(file, options, done) {
var renderAsync = function(sass, file, options, done) {
options = options || {}
options.images_path = __dirname + '/images'
options.fonts_path = __dirname + '/fonts'
options.implemantation = sass
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
options.implemantation = sass
options.implementation = sass


return sass.render({
functions: assetFunctions(options),
file: __dirname + '/scss/' + file
file: __dirname + '/scss/' + file,
}, done)
}

var equalsFileAsync = function(file, suite, options, done) {
renderAsync(file, options, function(err, result) {
var equalsFileAsync = function(sass, file, suite, options, done) {
renderAsync(sass, file, options, function(err, result) {
expect(err).toBeNull()
var cssPath = path.join(cssDir, suite, file.replace(/\.scss$/, '.css'))
fs.readFile(cssPath, function(err, expected) {
Expand Down Expand Up @@ -44,42 +44,46 @@ var path_asset_cache_buster = function(http_path, real_path, done) {
var extname = path.extname(http_path)
, basename = path.basename(http_path, extname)
, dirname = path.dirname(http_path)

done({path: path.join(dirname, basename + '-v123') + extname, query: null})
}, 10)
}

var files = fs.readdirSync(sassDir)

describe('basic', function() {
files.forEach(function(file) {
test(file, function(done) {
equalsFileAsync(file, 'basic', {}, done)
})
})
})
describe.each(['node-sass', 'sass'])('with require("%s")', function(impl) {
Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Currently installed version of jest did not support describe.each, so I updated jest

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just for the record, the test failure was not due to the jest version ( it also failed with jest@16.0.2 with ['node-sass', 'sass'].forEach instead of describe.each )

var sass = require(impl)

describe('asset_host', function() {
files.forEach(function(file) {
test(file, function(done) {
equalsFileAsync(file, 'asset_host', { asset_host: asset_host }, done)
describe('basic', function() {
files.forEach(function(file) {
test(file, function(done) {
equalsFileAsync(sass, file, 'basic', {}, done)
})
})
})
})

describe('asset_cache_buster', function() {
describe('using query', function() {
describe('asset_host', function() {
files.forEach(function(file) {
test(file, function(done) {
equalsFileAsync(file, 'asset_cache_buster/query', { asset_cache_buster: query_asset_cache_buster }, done)
equalsFileAsync(sass, file, 'asset_host', { asset_host: asset_host }, done)
})
})
})

describe('using path', function() {
files.forEach(function(file) {
test(file, function(done) {
equalsFileAsync(file, 'asset_cache_buster/path', { asset_cache_buster: path_asset_cache_buster }, done)
describe('asset_cache_buster', function() {
describe('using query', function() {
files.forEach(function(file) {
test(file, function(done) {
equalsFileAsync(sass, file, 'asset_cache_buster/query', { asset_cache_buster: query_asset_cache_buster }, done)
})
})
})

describe('using path', function() {
files.forEach(function(file) {
test(file, function(done) {
equalsFileAsync(sass, file, 'asset_cache_buster/path', { asset_cache_buster: path_asset_cache_buster }, done)
})
})
})
})
Expand Down
13 changes: 11 additions & 2 deletions index.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,18 @@
var sass = require('node-sass');
var Processor = require('./lib/processor');

function omit(original, omitted) {
return Object.keys(original).reduce(function (result, key) {
if (key !== omitted) {
result[key] = original[key];
}
return result;
}, {});
}

module.exports = function(options) {
var opts = options || {};
var processor = new Processor(opts);
var processor = new Processor(omit(opts, 'implementation'));
var sass = opts.implementation || require('node-sass')

return {
'image-url($filename, $only_path: false)': function(filename, only_path, done) {
Expand Down
7 changes: 4 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,11 @@
"homepage": "https://github.com/fetch/node-sass-asset-functions",
"dependencies": {
"image-size": "^0.3.5",
"mime": "^1.3.4",
"node-sass": ">= 3.2 < 5"
"mime": "^1.3.4"
},
"devDependencies": {
"jest": "^16.0.2"
"jest": "^23.6.0",
"node-sass": "^4.9.3",
"sass": "^1.13.4"
}
}