sass / dart-sass Goto Github PK

The Chocolatey package manager seems to be the gold-standard for distributing open-source software on Windows. Many of our users are on Windows, so we should add Chocolatey to our standard release process.

In the README.md it says:

Disclaimer: this is not an official Google product.

In the CONTRIBUTING.md it says:

Before we can use your code, you must sign the
Google Individual Contributor License Agreement
(CLA), which you can do online.

I fail to see the correlation in me having to sign the CLA if I want to contribute if this is not an official Google Product.

Care to explain? This seems really weird to me.

We should ship the source map for the JS-compiled version of Sass with the npm package, and use the source_map_stack_trace package to convert JS traces to Dart-like traces.

Since #55 adds CLI tests, it's now relevant to test across operating systems to avoid bugs like #51. AppVeyor seems like the best place to do this. It should be fairly straightforward to port the Travis config, especially since we only care about running unit tests against Dart and Node.

We should distribute a snapshot via Homebrew to make it easier for Mac OS users to use Dart Sass. Ideally we'd depend on the Dart VM's Homebrew package, which probably means that we'll have to set up our own tap.

Test using the npm package

@media all and (min-width: 100px) {
  @import "https://example.org"
}

Ruby Sass

@media all and (min-width: 100px) {
  @import "https://example.org";
}

Dart Sass 1.0.0-alpha.4

@media all and (min-width: 100px) {
  @import "https://example.org"
;
}

As mentioned in documentation - there are two arguments.
So this fail on bootstrap-sass version.
http://sass-lang.com/documentation/Sass/Script/Functions.html#fade_in-instance_method

📳 The same goes for other functions like
opacity(), opacify()

... should go here, or should it go in another package (i.e. sass_generator)?

This is a question/feature request.

Since Compass doesn't work with dart-sass, what would the recommended way to get fonts inlined be?
Is providing something like Compass' inline-font-files helper out of scope for dart-sass?
Our current build processes and git merge-drivers rely on running a single command to compile Sass, so it would be nice to be able to switch to dart-sass without having to introduce another step that inlines the fonts.

Thanks!

We need to support the node-sass API's importer option, which specifies custom importers that locate and load source files. Note that this may require the use of something like synchronize.js, since Dart Sass is entirely synchronous.

We need to support the full API of the object returned by node-sass's render() API, both in the success case and in the error case. The only exception is the map field, which won't be set until we support source maps (#2).

At least internally, we spin up a worker and use it for incremental rebuilds. This means the code/snapshot is already loaded, already JITd, and kept warm for the development cycle. This is more likely than spinning up to do a one-time build and closing.

The JS-compiled version of Dart Sass hovers around 2.5x and 3x slower than when running on the Dart VM. Some slowdown is inevitable, but this seems extreme. We should put dedicated effort into profiling the JS output and optimizing hot spots.

It would be easier to switch between different Sass compilers, if each of them would use the exact same command-line arguments. While dart-sass doesn't (yet) offer all of the same features as its brothers, there are already some differences.

For example, in dart-sass the shorthand for --style is -s, while it's -t in both,sass and sassc. In dart-sass the shorthand for --color is -c, while-c is used as the shorthand for --check in sass.

I understand that there might be no plans to bring all the features of sass (or sassc) to dart-sass, yet I think the advantages of consistent arguments are obvious.

We need to support the node-sass API's options for formatting its output:

• indentType controls whether tabs or spaces are emitted.
• indentWidth controls how many tabs or spaces are emitted per indentation.
• linefeed, which controls what line break sequence to use in the resulting CSS.
• outputStyle, which controls the style of CSS emitted. Note that this will only support the value expanded for the time being, and unlike node-sass, it will default to expanded.

Reproduce with the example:

test/
├── bar/
│   ├── _bar.scss
├── foo.scss

foo.scss contains the lines:

@import 'bar/bar';
body {
  background: $color;
}

_bar.scss contains the line:

$color: rgba(#000, 1);

When I run dart-sass I get the following stack trace:

$ dart ../dart-sass/bin/sass.dart foo.scss
Unexpected exception:
RangeError (index): Invalid value: Only valid value is 0: 1

dart:core                                                            List.[]
package:sass/src/environment.dart 198:41                             Environment.getFunction
package:sass/src/visitor/perform.dart 927:50                         _PerformVisitor.visitFunctionExpression
package:sass/src/ast/sass/expression/function.dart 32:15             FunctionExpression.accept
package:sass/src/visitor/perform.dart 784:36                         _PerformVisitor.visitVariableDeclaration
package:sass/src/ast/sass/statement/variable_declaration.dart 39:15  VariableDeclaration.accept
package:sass/src/visitor/perform.dart 505:21                         _PerformVisitor._visitDynamicImport.<fn>.<fn>
package:sass/src/visitor/perform.dart 1276:26                        _PerformVisitor._withEnvironment
package:sass/src/visitor/perform.dart 503:7                          _PerformVisitor._visitDynamicImport.<fn>
package:sass/src/visitor/perform.dart 1361:26                        _PerformVisitor._withStackFrame
package:sass/src/visitor/perform.dart 502:5                          _PerformVisitor._visitDynamicImport
package:sass/src/visitor/perform.dart 490:9                          _PerformVisitor.visitImportRule
package:sass/src/ast/sass/statement/import_rule.dart 22:15           ImportRule.accept
package:sass/src/visitor/perform.dart 157:13                         _PerformVisitor.visitStylesheet
package:sass/src/visitor/perform.dart 147:5                          _PerformVisitor.run
package:sass/src/visitor/perform.dart 46:10                          evaluate
package:sass/sass.dart 24:17                                         render
package:sass/src/executable.dart 50:15                               main

I see you have the engine set to >=0.10.0. Is that the intended support, because I am having some issues with v4.x?

On Windows CMD and GitBash, it seems path seperator often cause some error.

Test the following code, where ./test.scss is any given valid scss file in the same folder:

var sass = require('dart-sass');
var res = sass.renderSync({ file: './test.scss' });
console.log(res);

Then got:

In dart.Uri_parse‘s body, insert a new line at the begining, uri = uri.replace(/\\/g, '/') will work,

So this maybe a problem to be solved.

We need to support the node-sass API's functions option, which specifies custom functions that can be called from Sass stylesheets. This will involve exposing SassScript objects, and making them API-compatible with node-sass.

Right now, we do our benchmarking and application snapshot training on artificial files full of many repeated style rules that are individually very simple. These are useful for measuring a few aspects of performance, but they aren't representative of the performance characteristics of real-world Sass. We need to find a collection of stylesheets, ideally those pulled from real apps, that we can use instead or in addition.

I understand that this is still in alpha, so this might be a bit premature, but since there is no transformer anymore, I wonder how this is supposed to be used within a dart project. Is this already assuming that Bazel will be used in the future to build projects? Or is it planned that the transformer would be able to use the dart sass package?

We need to support source maps, as close to Ruby Sass and LibSass as possible. Hopefully this shouldn't be too difficult, since we're already tracking source spans everywhere.

• Add support to the Dart API.
• Add support to the JS API.
• Add support to the CLI.
• Track variable definitions.

I want to implement SASS parser for @postcss - written by @ai. But for this purpose I need convert SASS AST to PostCSS AST. It would be great, if I can use official parser from @sass (i'm really appreciate that you implemented SASS on compiled to JS language).

So, @nex3 - what you think if I will try to write a new method which return SASS AST? I'm newbie in @Dart, so it will take some time to learn it:D I think it will be a method very similar to render() from node-sass.

I attempted to compile MDL's SCSS files with dart-sass as a test, unfortunately I ran into an issue. Given the following sample partial:

/**
* Whatever comment
**/
@import "color-definitions";
/* close comment block */
$preferred_font: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;

The output contains @import "color-definitions"; Other than that it seems to be ok. I believe it's related to loudComments. I ran a couple more tests:

1) If I remove the 2nd comment block, the the compilation fails:

Error on line 7, column 1 of web\_p2.scss: expected more input.

^
package:sass/src/parse/parser.dart 518:7                    Parser.wrapSpanFormatException
package:sass/src/parse/stylesheet.dart 63:12                StylesheetParser.parse
package:sass/src/ast/sass/statement/stylesheet.dart 40:56   Stylesheet.Stylesheet.parseScss
package:sass/src/visitor/perform.dart 541:17                _PerformVisitor._loadImport.<fn>
dart:collection                                             _HashVMBase&MapMixin&&_LinkedHashMapMixin.putIfAbsent
package:sass/src/visitor/perform.dart 536:27                _PerformVisitor._loadImport
package:sass/src/visitor/perform.dart 502:22                _PerformVisitor._visitDynamicImport
package:sass/src/visitor/perform.dart 492:9                 _PerformVisitor.visitImportRule
package:sass/src/ast/sass/statement/import_rule.dart 22:15  ImportRule.accept
package:sass/src/visitor/perform.dart 157:13                _PerformVisitor.visitStylesheet
package:sass/src/visitor/perform.dart 147:5                 _PerformVisitor.run
package:sass/src/visitor/perform.dart 46:10                 evaluate
package:sass_builder/src/compilation_strategies.dart 27:19  DartSassCompilationStrategy._renderScss
... ...

2) If I adjust the source to look like so (removed a * from the block comment closing):

/**
* Whatever comment
*/
@import "color-definitions";
/* close comment block */
$preferred_font: 'Roboto', 'Helvetica', 'Arial', sans-serif !default;

Everything is happy and good.

With a little quirk in ScssParser class things seem to work. (Attached the diff - typo in filename :S )
parser-patch.txt

Currently dart-sass doesn't work in Linux when you call it through a symlink located on a different path.

It's common practice to install a package in one place and create a symlink to the binary from a location already in $PATH. E.g.:

sudo ln -sf $HOME/Downloads/dart-sass/dart-sass /usr/local/bin/sass

$ dart-sass --version
/usr/local/bin/sass: line 11: /usr/local/bin/src/dart: No such file or directory

In order for this to work the path resolution must be changed from:

path=`dirname "$0"`

to:

path="$(dirname "$(readlink -f "$0")")"

This expression correctly returns the directory of the script, and supports calling the binary directly linked through a symlink. It is posix compatible, and it has been tested with posh (Policy-compliant Ordinary SHell).

The only problem with it is that it is not compatible with Mac OS X, because apparently it doesn't support the -f flag in readlink, under normal conditions. And I can see the same script is used for Mac OS too.

So the simplest way I can see to support both cases, is to check first if the target path can be resolved, and only if it fails, use the new resolution formula. Like this:

path=$(dirname "$0")
if [ ! -f "$path/src/dart" ]; then
    path="$(dirname "$(readlink -f "$0")")"
fi

Tried a simple test on my machine and got the following error.

/Users/Wayne/src/github.com/wayneashleyberry/styleguide/node_modules/dart-sass/sass.dart.js:10549
        throw H.wrapException(P.NoSuchMethodError$(this, invocation.get$memberName(), invocation.get$positionalArguments(), invocation.get$namedArguments(), null));
        ^

NoSuchMethodError: method not found: 'call'
Receiver: Closure '_render'
Arguments: [Instance of 'PlainJavaScriptObject']
    at Object.wrapException (/Users/Wayne/src/github.com/wayneashleyberry/styleguide/node_modules/dart-sass/sass.dart.js:4154:17)
    at StaticClosure.noSuchMethod$1 (/Users/Wayne/src/github.com/wayneashleyberry/styleguide/node_modules/dart-sass/sass.dart.js:10549:17)
    at Object.J.noSuchMethod$1$ (/Users/Wayne/src/github.com/wayneashleyberry/styleguide/node_modules/dart-sass/sass.dart.js:31521:39)
    at Object.Primitives_functionNoSuchMethod (/Users/Wayne/src/github.com/wayneashleyberry/styleguide/node_modules/dart-sass/sass.dart.js:4050:16)
    at Object.Primitives__genericApplyFunctionWithPositionalArguments (/Users/Wayne/src/github.com/wayneashleyberry/styleguide/node_modules/dart-sass/sass.dart.js:4091:20)
    at Object.Primitives_applyFunctionWithPositionalArguments (/Users/Wayne/src/github.com/wayneashleyberry/styleguide/node_modules/dart-sass/sass.dart.js:4077:16)
    at dart._callDartFunctionFast (/Users/Wayne/src/github.com/wayneashleyberry/styleguide/node_modules/dart-sass/sass.dart.js:13268:16)
    at Object.render (/Users/Wayne/src/github.com/wayneashleyberry/styleguide/node_modules/dart-sass/sass.dart.js:13260:18)
    at Object.<anonymous> (/Users/Wayne/src/github.com/wayneashleyberry/styleguide/test.js:2:19)
    at Module._compile (module.js:573:32)

The command I ran was node test.js, here are the contents of test.js:

var sass = require('dart-sass');

var result = sass.render({
    'file': 'assets/sass/main.scss'
});

console.log(result)

The contents of assets/sass/main.scss are:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

I'm running node v7.0.0, macOS 10.12.1 and tried installing dart-sass with both yarn 0.16.1 and npm 3.10.9

I want to get CSS from SASS with npm package. I run that code:

var sass = require('dart-sass');

scss_filename = "basic.sass"

sass.render({file: scss_filename}, function(err, result) {
  console.log(result);
  console.log(err);
});

And every time I get an error: "Expected tabs, was spaces."
To make sure, that is no error in my markdown of SASS in a text editor (I'm using Sublime Text). I download a file from your tests in sass repo. But I still have the same error. The result is:

null
{ message: 'Expected tabs, was spaces.' }

Am I doing something wrong?

To measure benchmarks today, I just manually run a bunch of different options by hand, which takes a long time and is prone to mistakes. We should at least have a script to run all benchmarks and collate the output, and ideally we should run that script automatically if we can find a way to do that without varying the underlying specifications too dramatically.

SCSS example:

$state: active;
$background: white;

.table-hover > tbody > tr {
  > td.#{$state}:hover,
  > th.#{$state}:hover,
  &.#{$state}:hover > td,
  &:hover > .#{$state},
  &.#{$state}:hover > th {
    background-color: darken($background, 5%);
  }
}

Compiles to INVALID:

> td.active:hover, > th.active:hover, .table-hover > tbody > tr.active:hover > td, .table-hover > tbody > tr:hover > .active, .table-hover > tbody > tr.active:hover > th {
  background-color: #f2f2f2;
}

Should be:

.table-hover > tbody > tr > td.active:hover,
.table-hover > tbody > tr > th.active:hover,
.table-hover > tbody > tr.active:hover > td,
.table-hover > tbody > tr:hover > .active,
.table-hover > tbody > tr.active:hover > th {
  background-color: #f2f2f2;
}

The Dart dev compiler produces much nicer-looking JavaScript output than dart2js, and makes JavaScript interop much nicer by guaranteeing that all Dart objects can be used directly in JS without extra wrappers. This will be very useful for custom functions, which will need to be able to interact with SassScript values with as little overhead as possible.

This is currently blocked on dart-lang/sdk#27607.

Source:

.ic-icon-ic-more-information:before {
    content: "\e906";
}

Output (change from node-sass to dart-sass):

The following code:

a {b: c}

@for $n from 1 through 100 {
  @for $i from 1 through 100 {
    x#{$i} { @extend a; }
  }
}

Takes approximately 45s to compile on Dart Sass, and produces hundreds of redundant selectors. it takes about 2s on Ruby Sass and 300ms on LibSass, and produces output with redundant selectors optimized out.

I suspect that something is wrong in how we're batching up groups of selectors before trimming. The pre-existing selectors shouldn't be compared against each other and shouldn't count against the 100-chunk limit, but this doesn't seem to be the case.

See sass/libsass#2253 (comment).

sass-darken() instead of darken(). This was supposed to make it into Sass v4, but it'd be awesome to get it in here asap.

See sass#2078 for more information.

When dart-sass detects an error in a .scss file, it invokes the callback with an err object that contains message, but there's no file/line info for correlation.

Steps to reproduce

1. Install dart-sass 1.0.0-alpha.8 with: npm install dart-sass
2. Create a Gulp task that calls dart-sass like this:

dartSass.render({file: file.path}, (err, result) => {
    if (err) {
      console.error('sass error', err);
    } else {
      file.contents = result.buffer;
    }
    cb(err, file);
});

3. Pipe the following file to dart-sass:

foo.scss:

:host {
  display: block;
  padding: 10px;

  --view1-card: {
    'foo   /* intentionally unterminated string */
  }
}

Expected result

The callback's err object included file and line info.

Actual result

Only message (without file/line info) is provided in err. The message contains:

Expected '.

Environment

• dart-sass 1.0.0-alpha.8
• node 7.5.0
• gulp 3.9.1
• macOS Sierra 10.12

The Dart ecosystem allows for transformers to be applied to various assets within a source directory at build time. By providing a transformer as part of the the dart-sass library it would be possible for SASS to be treated as a first class source file type in the pub build process; Simplifying the build tooling around a Dart web application.

Hi, I was wondering if there exists good documentation on how to switch from ruby sass to dart sass. For example, we use compass and have multiple import path right now using ruby sass and also via grunt plugin. Is there any documentation on how to do the same using dart sass?

Thanks

We need to support the node-sass API's input options:

• file, which supplies a source file path.
• data, which supplies a source file as a string.
• includePaths, which indicates paths to search for imported files.
• indentedSyntax, which indicates whether the input is indented or not.

Im using: 1.0.0-alpha.1 compiled with dart2js 1.20.1
I got the following error:

Unexpected exception:RangeError (index): Index out of range: index should be less than 1: 1
node_modules/dart-sass/sass.dart.js 4154:17   wrapException
node_modules/dart-sass/sass.dart.js 4104:15   ioore
node_modules/dart-sass/sass.dart.js 17688:22  Environment.getFunction$1
node_modules/dart-sass/sass.dart.js 27465:66  _PerformVisitor.visitFunctionExpression$1
node_modules/dart-sass/sass.dart.js 16014:24  FunctionExpression.accept$1
node_modules/dart-sass/sass.dart.js 27370:75  _PerformVisitor.visitVariableDeclaration$1
node_modules/dart-sass/sass.dart.js 16637:24  VariableDeclaration.accept$1
node_modules/dart-sass/sass.dart.js 31349:41  J.accept$1$x
node_modules/dart-sass/sass.dart.js 28126:13  _PerformVisitor__visitDynamicImport__closure.call$0
node_modules/dart-sass/sass.dart.js 27703:27  _PerformVisitor._withEnvironment$2

My environment is:
package.json

{
  "name": "untitled",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "dart-sass ./src/main.scss dist/main.css  > ./dist/main.css"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "bootstrap-sass": "^3.3.7"
  },
  "devDependencies": {
    "dart-sass": "^1.0.0-alpha.1"
  }
}

src/main.scss

@import "../node_modules/bootstrap-sass/assets/stylesheets/_bootstrap";

This would enable in-browser use, use in a service worker, etc.

This is a meta-issue tracking all the issues necessary for the level of node-sass API compatibility that we want for 1.0.0:

• #7: input options (file, data, includePaths, indentedSyntax)
• #8: formatting options (indentType, indentWidth, linefeed, outputStyle)
• #9: importer
• #10: functions
• #11: render() return value
• #109: render() error

The following options will not be required for 1.0.0:

• precision: Allowing the precision to be customized is challenging in terms of code structure, and may cause some small performance degradation in numerically-intensive tasks due to the lack of constant folding. Since Dart Sass defaults to a much larger precision anyway, we won't support this option for the time being.
• sourceComments: Source comments are desirable, but low-priority.
• omitSourceMapUrl, outFile, sourceMap, sourceMapContents, sourceMapEmbed, sourceMapRoot: source map support is not considered blocking for 1.0.0 (see #2).

dart-sass happily ignores garbage inside native CSS mixins such as the following:

styles.scss

$color: #4285f4;
:host {
  display: block;
  padding: 10px;
  --view1-card: {
    border: solid 1px #{$color};
    foo();k;lfajkf;
    fdjkfldajl
  };
}

build.js:

const dartSass = require('dart-sass');
dartSass.render({file: 'styles.scss'}, (err: Error, result: Buffer) => {
  // ...
});

Running styles.scss through build.js results in no warnings or errors. The result contains the garbage as-is:

:host {
  display: block;
  padding: 10px;
  --view1-card: {
    border: solid 1px #4285f4;
    foo();k;lfajkf;
    fdjkfldajl
  };
}

I expected to see an error.

Environment

• macOS Sierra 10.12
• node 7.4.0
• dart-sass 1.0.0-alpha.8

Source:

%placeholder1 {
    display: none;
}

.class1 {
    @extend %placeholder1;
}

.class2:not(.class3):after {
    display: none;
}

dart-sass output:

.class1 {
  display: none;
}

.class2:not(.class3):not(.class3) {
  display: none;
}

node-sass output:

.class1 {
  display: none;
}

.class2:not(.class3):after {
  display: none;
}

@import statements should be able to resolve package: URLs when running in Dart mode. The CLI should probably also accept them as well for good measure. We'll want to do this by taking a SyncPackageResolver from the executable or the render() method.

$ pub global activate dart-sass
Resolving dependencies... (1.5s)
Could not find package dart-sass at https://pub.dartlang.org.

Environment:

$ dart --version
Dart VM version: 1.20.1 (Wed Oct 12 15:00:54 2016) on "macos_x64"

a {
  background-color: rgba(0, 0, 0, 0);
}

Should be generated as

a {
  background-color: transparent;
}

We should support the ability for users to define custom functions using the Dart API. Unfortunately, we'll probably have to require that these functions be synchronous, which may limit their functionality, but I don't see a way around that.