sass / dart-sass Goto Github PK
View Code? Open in Web Editor NEWThe reference implementation of Sass, written in Dart.
Home Page: https://sass-lang.com/dart-sass
License: MIT License
The reference implementation of Sass, written in Dart.
Home Page: https://sass-lang.com/dart-sass
License: MIT License
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
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.
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.
This would enable in-browser use, use in a service worker, etc.
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.
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()
@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.
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.
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?
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.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;
}
a {
background-color: rgba(0, 0, 0, 0);
}
Should be generated as
a {
background-color: transparent;
}
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:
file
, data
, includePaths
, indentedSyntax
)indentType
, indentWidth
, linefeed
, outputStyle
)importer
functions
render()
return valuerender()
errorThe 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).... should go here, or should it go in another package (i.e. sass_generator
)?
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.
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 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.
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.
dart-sass
1.0.0-alpha.8 with: npm install dart-sass
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);
});
dart-sass
:foo.scss:
:host {
display: block;
padding: 10px;
--view1-card: {
'foo /* intentionally unterminated string */
}
}
The callback's err
object included file and line info.
Only message
(without file/line info) is provided in err
. The message
contains:
Expected '.
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
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 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.
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.
dart-sass
1.0.0-alpha.8I 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?
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.
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.
filter: alpha(opacity=$opacity-ie);
^
@mixin opacity($opacity) {
opacity: $opacity;
// IE8 filter
$opacity-ie: ($opacity * 100);
filter: alpha(opacity=$opacity-ie);
}
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.
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
.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.
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.
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 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.
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.
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";
$ 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"
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.
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!
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.
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.
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?
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 loudComment
s. 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
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"
;
}
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.