Disabling sourcemaps and Sass 3.4 #113

Closed
caiquecastro opened this Issue Aug 22, 2014 · 36 comments

Projects

None yet
@caiquecastro

Hi everyone, are you facing problems with Sass 3.4? its generating a map file instead of the compiled css.

@chrisfosterelli

Yes, having this issue as well. Even passing in { sourcemap : false } still generates the map file, and since I'm using gulp-rename it seems to overwrite the actual CSS....

@caiquecastro

I think that a better solution is to downgrade the sass gem. Do you know how to do it easily (without uninstalling the 3.4 version as my system contains 3.2, 3.3 and 3.4 sass versions) only changing the gem version?

@chrisfosterelli

Sorry, my comment was not a solution, just describing my scenario where this is broken. I'm not familiar with how to downgrade the ruby gem.

@UltCombo
Contributor

@caiquecastro are you saying that you get a .map file but no .css file out of the stream? Could you post a sample gulpfile which reproduces the issue?

@chrisfosterelli Sass 3.4 has source maps enabled by default, the only way to disable them would be passing the --sourcemap=none option but our dependency which transforms the options object into CLI args does not support the param=value syntax AFAIK (see dargs). You should probably open a separate issue. CCing @robwierzbowski and @sindresorhus for this.

edit: Oh wait, dargs 2.0.0 does actually support param=value syntax, I wonder if updating our dependency will not break this plugin's other options though.

@caiquecastro

/**

  • Loading gulp
    */

var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
compass = require('gulp-compass'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
autoprefixer = require('gulp-autoprefixer'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
changed = require('gulp-changed');

/**

  • Defining paths
    */

var paths = {
dist: {
scripts: "dist/js/",
styles: "dist/stylesheets/",
images: "dist/images/"
},
source: {
scripts: "src/js/",
styles: "src/stylesheets/",
images: "src/images/"
}
};

/**

  • Defining tasks
    */

gulp.task('styles', function() {
return gulp.src(paths.source.styles + 'main.scss')
.pipe(sass({ style: 'expanded', noCache: true }))
.on('error', function (err) { console.log(err.message); })
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
.pipe(rename('style.css'))
.pipe(gulp.dest(paths.dist.styles))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest(paths.dist.styles));
});

@chrisfosterelli

I'm willing to bet your issue is the rename('styles.css') line, like it
was for me. When Sass just generates the CSS, rename changes the single
files name to "styles.css". However, when Sass is generating two files
(.css and .map.css) the rename function seems to try and call them
both "styles.css" and the map file overrides your actual CSS.

Temporary fix is to make rename handle more than one file:

.pipe(rename({ base : 'styles'}))

Something like that should do the trick for now, but you'll still end up
with the .map file in that directory.
On Aug 23, 2014 5:09 AM, "Caíque de Castro Soares da Silva" <
notifications@github.com> wrote:

/**

  • Loading gulp */

var gulp = require('gulp'),
sass = require('gulp-ruby-sass'),
compass = require('gulp-compass'),
minifycss = require('gulp-minify-css'),
jshint = require('gulp-jshint'),
autoprefixer = require('gulp-autoprefixer'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
rename = require('gulp-rename'),
imagemin = require('gulp-imagemin'),
changed = require('gulp-changed');

/**

  • Defining paths */

var paths = {
dist: {
scripts: "dist/js/",
styles: "dist/stylesheets/",
images: "dist/images/"
},
source: {
scripts: "src/js/",
styles: "src/stylesheets/",
images: "src/images/"
}
};

/**

  • Defining tasks */

gulp.task('styles', function() {
return gulp.src(paths.source.styles + 'main.scss')
.pipe(sass({ style: 'expanded', noCache: true }))
.on('error', function (err) { console.log(err.message); })
.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera
12.1', 'ios 6', 'android 4'))
.pipe(rename('style.css'))
.pipe(gulp.dest(paths.dist.styles))
.pipe(rename({suffix: '.min'}))
.pipe(minifycss())
.pipe(gulp.dest(paths.dist.styles));
});


Reply to this email directly or view it on GitHub
#113 (comment)
.

@chrisfosterelli

@UltCombo It looks like the only difference between dargs 0.1.x and 2.0.0 is that they format args in the "argument=parameter" format. The "sourcemap" parameter requires that format, but the other arguments don't. I don't know if you can pass SASS other arguments in that format optionally either.

@UltCombo
Contributor

@caiquecastro seems like your code renames both css and map file to the same name, so the map file ends up overwriting the css one when written to disk. Try using @chrisfosterelli's workaround for the time being.

It looks like Sass' CLI args parser does support param=value, I've just tested passing precision=10 in Sass 3.4.1. We should be able to upgrade to dargs 2.0.0.

@robwierzbowski I'm wondering, is the source mapping API going to be rewritten soon to use gulp-sourcemaps? Is it worth updating dargs in order to support sourcemap: 'none' for the time being?

@robwierzbowski
Collaborator

Why can't someone just add sourcemaps: 'none' as an options param now?

On Saturday, August 23, 2014, Fabrício Matté notifications@github.com
wrote:

@caiquecastro https://github.com/caiquecastro seems like your code
renames both css and map file to the same name, so the map file ends up
overwriting the css one when written to disk. Try using @chrisfosterelli
https://github.com/chrisfosterelli's workaround for the time being.

It looks like Sass' CLI args parser does support param=value, I've just
tested passing precision=10 in Sass 3.4.1. We should be able to upgrade
to dargs 2.0.0.

@robwierzbowski https://github.com/robwierzbowski I'm wondering, is the
source mapping API going to be rewritten soon to use gulp-sourcemaps? Is it
worth upgrading dargs for sourcemaps: 'none' to work for the time being?


Reply to this email directly or view it on GitHub
#113 (comment)
.

Rob Wierzbowski
@robwierzbowski http://twitter.com/#!/robwierzbowski
http://github.com/robwierzbowski
http://robwierzbowski.com

@UltCombo
Contributor

@robwierzbowski because sass forces you to use --sourcemap=none, it does not accept --sourcemap none due to back-compat. It is well explained here.

We would need to update dargs in order to generate --option=value CLI options.

@radkodinev

In short, the purpose of sindresorhus/dargs#3 was to make dargs more bulletproof for commands with unusual format expectations for command-line options, such as the sass command regarding the --sourcemap option; this is more thoroughly explained in the comments for the PR in question (the link @UltCombo has already provided above).

@sindresorhus immediately released dargs 2.0.0 and grunt-contrib-sass 0.8.0. Updating dargs to 2.0.0 would fix the command-line option issue for Sass 3.4 sourcemaps.

@milesj
milesj commented Aug 28, 2014

I temporarily fixed this issue by writing sass({ style: 'expanded', 'sourcemap=none': true }). However, I am still having issues where the order of CSS files defined in gulp.src(cssPaths) is not preserved.

@UltCombo
Contributor

@sindresorhus this thread may seem like a non-issue, but there is clearly an issue with the outdated dargs and Sass 3.4's sourcemap option.

@milesj nice hack hahah. As for the source order, you should make a test case and possibly report it in the gulp repository.

@sindresorhus
Owner

this thread may seem like a non-issue, but there is clearly an issue with the outdated dargs and Sass 3.4's sourcemap option.

As commented by @radkodinev this was fixed in the latest version.

nice hack hahah. As for the source order, you should make a test case and possibly report it in the gulp repository.

Gulp streams aren't ordered. This is documented and there are known workarounds in the recipe section in the docs.

@UltCombo
Contributor

As commented by @radkodinev this was fixed in the latest version.

I meant that we have to update the package.json dependency here. I guess it was easier to just submit a patch rather than @'ing you, heh. See #114.

Gulp streams aren't ordered. This is documented and there are known workarounds in the recipe section in the docs.

@sindresorhus @milesj AFAIK gulp.src() is ordered. Plugins' output streams are not ordered, but you can use gulp-order to workaround that.

@sindresorhus
Owner

I meant that we have to update the package.json dependency here. I guess it was easier to just submit a patch rather than @'ing you, heh. See #114.

Oh, I'm sorry. I thought I was on the grunt-contrib-sass issue tracker. Lol...

Plugins' output streams are not ordered, but you can use gulp-order to workaround that.

Or better yet, don't be order dependent in your code.

@UltCombo
Contributor

Oh, I'm sorry. I thought I was on the grunt-contrib-sass issue tracker. Lol...

Hah, no problem, you just have way too many projects to maintain. =]

Or better yet, don't be order dependent in your code.

Good advice.

@xpepermint

LOL :)

@milesj
milesj commented Aug 28, 2014

I pass an ordered array to gulp.src() as the order of dependencies is required. After updating Sass/NPM, the order seems to be sorted alphabetically. Not sure where it's happening though, so have to dig around.

Edit: Tested versions and it seems like the 0.6.0 changes is what caused the issues. Going to have to stick to 0.5.0.

@chrisfosterelli

This issue should still be open pending merge of #114, shouldn't it?

@sindresorhus sindresorhus reopened this Aug 29, 2014
@robwierzbowski
Collaborator

This is becoming a catch-all issue. There are three separate issues here.

  1. only generating sourcemap output, no CSS; user error, fixed
  2. dargs update to allow turning sourcemaps on and off; pending PR
  3. dependencies out of order: Please open a separate issue. I'm not sure how you're using Sass where file order is being changed by this plugin. @importing dependencies in Sass files can't be affected by the order of gulp piping files.

From here on in, let's keep this issue about the sourcemaps / dargs update.

@robwierzbowski robwierzbowski changed the title from Problems with Sass 3.4 to Sourcemaps and Sass 3.4 Aug 29, 2014
@robwierzbowski robwierzbowski changed the title from Sourcemaps and Sass 3.4 to Disabling sourcemaps and Sass 3.4 Aug 29, 2014
@chrisfosterelli
1. Only generating sourcemaps; user error, fixed
2. dargs update; pending PR

I don't think these are separate issues, 1 is not a user error it's a bug. 2 is the fix for that bug.

@robwierzbowski
Collaborator

Only generating sourcemaps, not generating CSS: the issue was the rename plugin renamed all files in the pipe to style.css. If I understand correctly, compiling two Sass files without sourcemaps would have a similar issue, with only the last file coming through as style.css. so the root cause would be renaming multiple files to a single name.

@chrisfosterelli

Oh, yes that is a user error! I get what you meant. But the actual generation of the sourcemaps in the first place is not. 👍

@robwierzbowski
Collaborator

Updated comment for clarity :).

@sindresorhus
Owner
  1. That's how gulp and streams works. They are orderless. This also means better perf as one slow file in a plugin isn't blocking the rest.
@milesj
milesj commented Aug 29, 2014

I require an order, which has always worked fine up until version 0.6.0 I believe. I'll look into it more and submit an issue.

@sindresorhus
Owner

@milesj pre 0.6.0 this plugin weren't a real gulp plugin and didn't completely operate on the stream.

@robwierzbowski
Collaborator

Closing as the prevent-sourcemap fix has gone into master.

@cferdinandi

@robwierzbowski - What is the proper syntax for no sourcemaps? Based on the docs, it looks like this should do it:

.pipe(sass({sourcemap: 'none'}))

But it's resulting in this error:

gulp-ruby-sass: stderr: DEPRECATION WARNING: Passing --sourcemap without a value is deprecated.
Sourcemaps are now generated by default, so this flag has no effect.
gulp-ruby-sass: stderr: WARNING on line 2 of none:
This selector doesn't have any properties and will not be rendered.
@robwierzbowski
Collaborator

Try updating to master. A fix for this went in but I won't be releasing
anything until 1.0.

On Wednesday, October 15, 2014, Chris Ferdinandi notifications@github.com
wrote:

@robwierzbowski https://github.com/robwierzbowski - What is the proper
syntax for no sourcemaps? Based on the docs, it looks like this should do
it:

.pipe(sass({sourcemap: 'none'}))

But it's resulting in this error:

gulp-ruby-sass: stderr: DEPRECATION WARNING: Passing --sourcemap without a value is deprecated.Sourcemaps are now generated by default, so this flag has no effect.gulp-ruby-sass: stderr: WARNING on line 2 of none:This selector doesn't have any properties and will not be rendered.


Reply to this email directly or view it on GitHub
#113 (comment)
.

Rob Wierzbowski
@robwierzbowski http://twitter.com/#!/robwierzbowski
http://github.com/robwierzbowski
http://robwierzbowski.com

@benlau benlau referenced this issue in jgoux/generator-angulpify Oct 27, 2014
Open

Generate invalid bundle.css #19

@kevinSuttle

Still an issue. I get this same error when using any option other than true, except for an unquoted false, but the .map file is still generated, even though the aforementioned hack doesn't report .map file generation in the console.

Why not push out a dot release instead of waiting for a 1.0?

@robwierzbowski
Collaborator

Did you npm install the updates? Sounds like you downloaded the 1.0 branch but didn't update dargs (although I don't know how 1.0 would work without installing the dependencies).

I'm looking up how to do an alpha release now, so no need for a patch release.

@UltCombo UltCombo referenced this issue in sindresorhus/gulp-autoprefixer Nov 22, 2014
Closed

2.0.0 throws error #20

@sudarshanb11

thanks @milesj your solution helped me deal with issue, i.e., using 'sourcemap=none': true stopped printing the "map" output into my final css.
I'm using gulp and it looks something like this now.
/* inside a gulp task code /
return gulp.src(['app/styles/
'])
.pipe($.rubySass({
style: 'expanded',
precision: 10,
'sourcemap=none': true,
loadPath: ['./bower_components']
}))
.pipe($.autoprefixer('last 1 version'))
.pipe($.concat('app.css'))
.pipe(gulp.dest('../app/assets/stylesheets/'))
.pipe($.size());

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment