dart-league / dart-sass Goto Github PK

Transformer is processing commented @import, for example trying to use bootstrap_sass 4.0.0-alpha.3 causes transformer to try to get cyclical dependency. This is casued because of this line:

https://github.com/dart-league/bootstrap_sass/blob/1043992c9ad7ef006847f3a5b6f4ef332652f921/lib/scss/_reboot.scss#L47

Please reconsider to use aggregate transformer as stated in this pull request: https://github.com/bwu-dart-contributing/dart-sass/pull/2

Really happy to see this transformer, but I noticed that the transformer does not output source maps, which makes sense for pub build, but not when we are developing using pub serve. What am I missing here?

The system cannot import files located in the web directory. For example, I have a config.scss file under the web directory:

// current file: lib/login_view.scss
@import 'web/config';

And the previous line throws the following error:

Build error:
Transform Sass on my_app|lib/login_view.scss threw error: could not resolve import 'Instance of '_SassImport'' (tried [my_app|lib/web/config.scss, my_app|lib/web/config.sass, my_app|lib/web/_config.scss, my_app|lib/web/_config.sass])

Since sass 3.2/3.4 sass supports relative search path via SASS_PATH. This is a cool, underrated, feature.

With SASS_PATH it's possible to use scss-files from other packages!
More on SASS_PATH: http://technology.customink.com/blog/2014/10/09/understanding-and-using-sass-load-paths/

cmdline:

export SASS_PATH="/Volumes/Daten/DevLocal/DevDart/MaterialDesignLite/lib/:/Volumes/Daten/DevLocal/DevDart/MobiAd.REST.UI.MDL/lib"

styles.scss:

// This imports "_variables.scss" from 
// /Volumes/Daten/DevLocal/DevDart/MaterialDesignLite/lib/assets/styles/button/_variables.scss
@import "assets/styles/button/variables";

I don't fully understand the issues, but a comment (dart-lang/sdk#24812 (comment)) in the Dart sdk repository indicates that the removal of the packages directory might cause problems for this transformer. Additional background is available in the follow-up comment (dart-lang/sdk#24812 (comment)).

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;
}

Importing file with a dot in the name failed with this error :

Filename to import : default.date.scss

Build error:
Transform Sass on project|web/sass/style.scss threw error: could not resolve import 'Instance of '_SassImport'' (tried [project|web/sass/materialize/components/date_picker/default.date, project|web/sass/materialize/components/date_picker/_default.date])
null

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

Should be generated as

a {
  background-color: transparent;
}

I am trying to use this transformer with sassc:

transformers:
  - dart_sass_transformer:
      executable: sassc

When I run pub serve, it says:

root@7c723f4fdc37:/starbelly/static/dart# pub serve
Loading source assets... 
Loading angular2, dart_sass_transformer and dart_to_js_script_rewriter transformers... 
Serving starbelly web on http://localhost:8080
Build error:
Transform Sass on ng2_fontawesome|lib/font-awesome/scss/font-awesome.scss threw error: Usage: sassc [options] SCSS_FILE [OUT_CSS_FILE]

sassc: error: too few arguments

Am I am doing something wrong or is this package not compatible with sassc?

Sass team now provides Dart implementation of Sass. Consider switching to that when it becomes stable? That way we no longer rely on separate Sass on the path.

I've noticed that the transformer is not able to find sass stylesheets from other packages. Is there anyway this can be accomplished or is this something that can be added in a future release.

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