postcss / gulp-postcss Goto Github PK

It appears only at the very first compile which takes the longest.
I noticed that the log appears for every single postcss plugin I use (lostgrid and autoprefixer in my example), I use the latest release of gulp-postcss.

Container#eachAtRule is deprecated. Use Container#walkAtRules instead.
Container#eachDecl is deprecated. Use Container#walkDecls instead.
Node#removeSelf is deprecated. Use Node#remove.
Container#eachRule is deprecated. Use Container#walkRules instead.
Node#style() is deprecated. Use Node#raw()
Node#before is deprecated. Use Node#raws.before
Node#_value was deprecated. Use Node#raws.value

Still getting this error when using @import with latest versions of gulp-postcss and cssnext.

I was under the impression postcss-import and most plugins were up to speed with the new version now? Just going round in circles on github trying to work out where the problem lies. But as the error is thrown as gulp-postcss plugin. I'm raising the issue here.

Thanks in advance

Add note, that Sass has a issuue with Unicode and @encoding postcss/autoprefixer#430

On syntax error like

// Unhandled stream error in pipe.
CssSyntaxError: path.css:15:1: Unclosed block

Have to use gulp-plumber for this.

Can you do some improvements to fix this?

I followed the instructions in your readme and it ends up with this error message:

Error: Cannot find module 'autoprefixer-core'
    at Function.Module._resolveFilename (module.js:336:15)
    at Function.Module._load (module.js:278:25)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/verpixelt/projects/gulp-boilerplate/gulpfile.js:26:20)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)

> npm install [email protected]

npm ERR! Darwin 14.0.0
npm ERR! argv "node" "/Users/lexich/.nvm/v0.10.35/bin/npm" "install" "[email protected]"
npm ERR! node v0.10.35
npm ERR! npm  v2.1.18
npm ERR! code EPEERINVALID

npm ERR! peerinvalid The package postcss does not satisfy its siblings' peerDependencies requirements!

i think that problem is here
https://github.com/w0rm/gulp-postcss/blob/master/package.json#L30
https://github.com/w0rm/gulp-postcss/blob/master/package.json#L30

"postcss": "4.*", 4.* isn't valid version

Hi everyone. I am fighting to get sourcemaps working with gulp-postcss plugin but I've run out of ideas, and don't know how to fix it. My sass task looks like this:

gulp.task('sass:dev', function() {
    gulp.src('app/styles/**/*.scss)
        .pipe($.sourcemaps.init())
        .pipe($.sass(config.sass).on('error', $.sass.logError))
        .pipe($.postcss([
            autoprefixer({
                browsers: ['last 2 versions']
            })
        ]))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest('.tmp/assets/styles'))
        .pipe(reload({ stream: true }));
});

Above config generates app.css.map file in destination directory as it should but sourcemaps does not works in browser. Here you can see that source map file (broken): https://gist.github.com/sqal/f894149870da902707f8 However If i remove postcss from my task, everything works as it should: https://gist.github.com/sqal/d3328b6c283ddbfee88f
Is there some bug in postcss or am I missing something here? Any hints on why it is not working for me would be greatly appreciated :) Thanks.

// Forgot to mention. I am using gulp-postcss 5.1.6, gulp-sourcemaps 1.5.2 and autoprefixer-core 5.1.11

Postcss now accepts Processor instance in postcss() constructor too, so we can get rid of processors.forEach(processor.use.bind(processor)).

Tomorrow many plugin for 5.0 API will be released, so we need to update runners.

/cc @w0rm

Hi,

I recently installed Node v4.0.0 on my system, then after upgrading gulp-postcss to 6.0.0 the process exits with this error message:

Your current PostCSS version is 5.0.4, but postcss-custom-media uses 4.1.16. Perhaps this is the source of the error below.

Any idea what might be causing the problem? Thanks!

Hi,

i'm using gulp-postcss together with gulp-sass 1.2.4, autoprefixer-core 4.0.2, css-mqpacker 2.0.0 and csswring 2.0.0 like this:

gulp.task('build:css', function() {
    return gulp
        .src(config.paths.assetsDev + '/scss/main.scss')
        .pipe(g.sourcemaps.init())
        .pipe(g.sass())
        .pipe(g.postcss([
                autoprefixer(config.autoprefixer),
                mqpacker,
                csswring(config.csswring)
        ]))
        .pipe(g.sourcemaps.write('.', {
            includeContent: true,
            sourceRoot: '.'
        }))
        .pipe(gulp.dest(path.join(config.paths.assets, 'css')));
});

When using gulp-postcss 4.0.0 i get the following error:

TypeError: Cannot read property '_autoprefixerDisabled' of undefined at Processor.disabled (.../node_modules/autoprefixer-core/lib/processor.js:133:15)

Or if i disable autoprefixer and only use mqpacker and csswring, i get:

TypeError: Cannot read property 'length' of undefined at wringRule (.../node_modules/csswring/lib/csswring.js:375:18)

I had no problems with that when using gulp-postcss 3.0.0 and switching back "solves" the problem.

Although i'm using a lot of other modules, i assume this is a gulp-postcss problem...?!

Greetings,

Simbo

In PostCSS 4.1.6 parsing error uses Promise reject event too. So you can clean code: webpack-contrib/postcss-loader@dc45577

@w0rm do not afraid to ask me about better API for your plugin next time :).

this's my gulp task

gulp.task('css', function() {
  var processors = [cssImport(),customProperties(),alias,crip()];
   return gulp.src(sourceDir + '/postcss/*.pcss')
    .pipe(postcss(processors, {syntax : scss}))
   .pipe(rename({
     suffix: '-postcss',
     extname: '.css'
    }))`
    .pipe(gulp.dest(targetDir + '/css'));
});

this's my postcss file

//这是一个测试
body{
  color: red;
}

when I complete the task, the inline-comment still exists

//这是一个测试

body{
  color: red;
}```

Can you please provide an example? I have tried, yet failed every time.

Trying to install gulp-postcss for a project and it will not install. I get a series of errors about compiling about msbuild.exe and then it dumps.

Here is the full log of what NPM is doing:

[email protected] preinstall D:\WordPress\themes\jldc_scratch\node_modules.staging\gmsmith-20f74d87
gm -version || convert -version

[email protected] install D:\WordPress\themes\jldc_scratch\node_modules\canvas
node-gyp rebuild

D:\WordPress\themes\jldc_scratch\node_modules\canvas>if not defined npm_config_node_gyp (node "C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin....\node_modules\node-gyp\bin\node-gyp.js" rebuild ) else (node rebuild )
Warning: Missing input files:
C:\GTK\bin\zlib1.dll
C:\GTK\bin\libexpat-1.dll
C:\GTK\bin\libpng14-14.dll
C:\GTK\bin\libcairo-2.dll
C:\GTK\bin\libfontconfig-1.dll
C:\GTK\bin\libfreetype-6.dll
Building the projects in this solution one at a time. To enable parallel build, please add the "/m" switch.
Canvas.cc
CanvasGradient.cc
CanvasPattern.cc
CanvasRenderingContext2d.cc
color.cc
Image.cc
ImageData.cc
init.cc
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1925): warning C4005: 'snprintf': macro redefinition (compiling source file ..\src\Image.cc) [D:\WordPress\themes\jldc_scratch\node_modules\canvas\build\canvas.vcxproj]
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1925): note: command-line arguments: see previous definition of 'snprintf' (compiling source file ..\src\Image.cc)
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1927): fatal error C1189: #error: Macro definition of snprintf conflicts with Standard Library function declaration (compiling source file ..\src\Image.cc) [D:\WordPress\themes\jldc_scratch\node_modules\canvas\build\canvas.vcxproj]
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1925): warning C4005: 'snprintf': macro redefinition (compiling source file ..\src\Canvas.cc) [D:\WordPress\themes\jldc_scratch\node_modules\canvas\build\canvas.vcxproj]
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1925): note: command-line arguments: see previous definition of 'snprintf' (compiling source file ..\src\Canvas.cc)
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1927): fatal error C1189: #error: Macro definition of snprintf conflicts with Standard Library function declaration (compiling source file ..\src\Canvas.cc) [D:\WordPress\themes\jldc_scratch\node_modules\canvas\build\canvas.vcxproj]
PixelArray.cc
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1925): warning C4005: 'snprintf': macro redefinition (compiling source file ..\src\CanvasPattern.cc) [D:\WordPress\themes\jldc_scratch\node_modules\canvas\build\canvas.vcxproj]
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1925): note: command-line arguments: see previous definition of 'snprintf' (compiling source file ..\src\CanvasPattern.cc)
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1927): fatal error C1189: #error: Macro definition of snprintf conflicts with Standard Library function declaration (compiling source file ..\src\CanvasPattern.cc) [D:\WordPress\themes\jldc_scratch\node_modules\canvas\build\canvas.vcxproj]
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1925): warning C4005: 'snprintf': macro redefinition (compiling source file ..\src\CanvasGradient.cc) [D:\WordPress\themes\jldc_scratch\node_modules\canvas\build\canvas.vcxproj]
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1925): note: command-line arguments: see previous definition of 'snprintf' (compiling source file ..\src\CanvasGradient.cc)
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1927): fatal error C1189: #error: Macro definition of snprintf conflicts with Standard Library function declaration (compiling source file ..\src\CanvasGradient.cc) [D:\WordPress\themes\jldc_scratch\node_modules\canvas\build\canvas.vcxproj]
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1925): warning C4005: 'snprintf': macro redefinition (compiling source file ..\src\color.cc) [D:\WordPress\themes\jldc_scratch\node_modules\canvas\build\canvas.vcxproj]
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1925): note: command-line arguments: see previous definition of 'snprintf' (compiling source file ..\src\color.cc)
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1927): fatal error C1189: #error: Macro definition of snprintf conflicts with Standard Library function declaration (compiling source file ..\src\color.cc) [D:\WordPress\themes\jldc_scratch\node_modules\canvas\build\canvas.vcxproj]
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1925): warning C4005: 'snprintf': macro redefinition (compiling source file ..\src\ImageData.cc) [D:\WordPress\themes\jldc_scratch\node_modules\canvas\build\canvas.vcxproj]
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1925): note: command-line arguments: see previous definition of 'snprintf' (compiling source file ..\src\ImageData.cc)
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1927): fatal error C1189: #error: Macro definition of snprintf conflicts with Standard Library function declaration (compiling source file ..\src\ImageData.cc) [D:\WordPress\themes\jldc_scratch\node_modules\canvas\build\canvas.vcxproj]
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1925): warning C4005: 'snprintf': macro redefinition (compiling source file ..\src\init.cc) [D:\WordPress\themes\jldc_scratch\node_modules\canvas\build\canvas.vcxproj]
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1925): note: command-line arguments: see previous definition of 'snprintf' (compiling source file ..\src\init.cc)
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1927): fatal error C1189: #error: Macro definition of snprintf conflicts with Standard Library function declaration (compiling source file ..\src\init.cc) [D:\WordPress\themes\jldc_scratch\node_modules\canvas\build\canvas.vcxproj]
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1925): warning C4005: 'snprintf': macro redefinition (compiling source file ..\src\PixelArray.cc) [D:\WordPress\themes\jldc_scratch\node_modules\canvas\build\canvas.vcxproj]
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1925): note: command-line arguments: see previous definition of 'snprintf' (compiling source file ..\src\PixelArray.cc)
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1927): fatal error C1189: #error: Macro definition of snprintf conflicts with Standard Library function declaration (compiling source file ..\src\PixelArray.cc) [D:\WordPress\themes\jldc_scratch\node_modules\canvas\build\canvas.vcxproj]
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1925): warning C4005: 'snprintf': macro redefinition (compiling source file ..\src\CanvasRenderingContext2d.cc) [D:\WordPress\themes\jldc_scratch\node_modules\canvas\build\canvas.vcxproj]
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1925): note: command-line arguments: see previous definition of 'snprintf' (compiling source file ..\src\CanvasRenderingContext2d.cc)
C:\Program Files (x86)\Windows Kits\10\Include\10.0.10150.0\ucrt\stdio.h(1927): fatal error C1189: #error: Macro definition of snprintf conflicts with Standard Library function declaration (compiling source file ..\src\CanvasRenderingContext2d.cc) [D:\WordPress\themes\jldc_scratch\node_modules\canvas\build\canvas.vcxproj]

'gm' is not recognized as an internal or external command,
operable program or batch file.
Invalid drive specification.
npm WARN install:[email protected] [email protected] preinstall: gm -version || convert -version
npm WARN install:[email protected] Exit status 4
gyp ERR! build error
gyp ERR! stack Error: C:\Program Files (x86)\MSBuild\14.0\bin\msbuild.exe failed with exit code: 1
gyp ERR! stack at ChildProcess.onExit (C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\lib\build.js:276:23)
gyp ERR! stack at emitTwo (events.js:87:13)
gyp ERR! stack at ChildProcess.emit (events.js:172:7)
gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:200:12)
gyp ERR! System Windows_NT 10.0.10586
gyp ERR! command "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\node_modules\node-gyp\bin\node-gyp.js" "rebuild"
gyp ERR! cwd D:\WordPress\themes\jldc_scratch\node_modules\canvas
gyp ERR! node -v v4.2.1
gyp ERR! node-gyp -v v3.2.1
gyp ERR! not ok
npm WARN install:[email protected] [email protected] install: node-gyp rebuild
npm WARN install:[email protected] Exit status 1
npm WARN optional Skipping failed optional dependency /chokidar/fsevents:
npm WARN notsup Not compatible with your operating system or architecture: [email protected]

In latest Guidelines discussion we decide to use postcss-runner instead of postcssrunner.

A saw, that many uses complaint about Promises. For example, we had issue here: yeoman/generator-webapp#298 (comment)

I think gulp-postcss must have polyfill to make users happy out of box.

/cc @w0rm

I get the following error:

Error: postcss-import-url: <css input>:1:1: Unknown word

when the following import is included in my source:

@import url("//hello.myfonts.net/count/3022f1");

Any advise to get round this error?

Please tag the releases which have been pushed to npm, in order to make it easier to see what are the differences between each release.
Tagging could be done for example:

git tag v5.1.1 1245750bfcd800b6d913224b2ccfa51725da63aa

I get the error:
TypeError: undefined is not a function
Whenever I try using cssnext. I'm not sure if this is an issue with gulp-postcss or with cssnext, but the log leads me to believe it is a problem with gulp-postcss.

This is my gulpfile:

var gulp = require("gulp");
var postcss = require("gulp-postcss");
var cssnext = require("cssnext");

gulp.task("css", function () {
  var processors = [
    cssnext()
  ];

  return gulp.src("main.css")
    .pipe(postcss(processors))
    .pipe(gulp.dest("css/"));
});

And this is the output of running gulp css:

[14:06:27] Using gulpfile ~/Desktop/postcss-test/gulpfile.js
[14:06:27] Starting 'css'...

events.js:85
      throw er; // Unhandled 'error' event
            ^
TypeError: undefined is not a function
at LazyResult.run (/Users/Christian/Desktop/postcss-test/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:193:24)
at /Users/Christian/Desktop/postcss-test/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:107:37
at LazyResult.asyncTick (/Users/Christian/Desktop/postcss-test/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:120:15)
at /Users/Christian/Desktop/postcss-test/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:118:27
at LazyResult.asyncTick (/Users/Christian/Desktop/postcss-test/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:120:15)
at /Users/Christian/Desktop/postcss-test/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:118:27
at LazyResult.asyncTick (/Users/Christian/Desktop/postcss-test/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:120:15)
at /Users/Christian/Desktop/postcss-test/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:118:27
at LazyResult.asyncTick (/Users/Christian/Desktop/postcss-test/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:120:15)
at /Users/Christian/Desktop/postcss-test/node_modules/gulp-postcss/node_modules/postcss/lib/lazy-result.js:118:27

How to reproduce:

$ git clone [email protected]:Splurov/gulp-postcss-errors-bug.git
$ npm install
$ gulp test

Task done, but actually it's failed due to throw: https://github.com/Splurov/gulp-postcss-errors-bug/blob/master/gulpfile.js#L11
Now, comment line 9 https://github.com/Splurov/gulp-postcss-errors-bug/blob/master/gulpfile.js#L9 and we have an exception, as it should be.
If we comment a throw on line 11 the task will be executed successfully.

I think gulp-postcss pipe should not affect any other pipes and should not silent any exceptions.

When not using gulp-sourcemaps (I'm not using it right now since gulp-postcss and gulp-autoprefixer are currently broken) gulp-postcss outputs an inline source map that was not requested.

I think ChangeLog is very important for every project, beacuse commits list contain a lot of unnecessary information.

I am getting an Unknown word error for // comments

Error in plugin 'gulp-postcss'
Message:
postcss-import:style.css:1:1: Unknown word

// Comment
^ 

It would be great if gulp-postcss could process CSS within HTML files too, for the reasons mentioned in postcss/postcss#596.

Do you think this could be implemented?

Looking forward to hear your thoughts!

Cheers :)

gulp-postcss returns too early when using asynchronous plugins. Reproducible with the following code:

gulpfile.js

var postcss = require('gulp-postcss');
var gulp = require('gulp');

gulp.task('css', function () {
    gulp.src('app.css')
            .pipe( postcss([require('./test.js')]) )
            .pipe( gulp.dest('build/') )
});

test.js

var postcss = require('postcss');

module.exports = postcss.plugin('test', function () {
    return function (css) {
        return new Promise(function (resolve) {
            setTimeout(resolve, 10000);
        });
    };
});

>gulp css
[16:22:06] Using gulpfile ~\Documents\GitHub\test\gulpfile.js
[16:22:06] Starting 'css'...
[16:22:06] Finished 'css' after 40 ms <--- finishes after 40 ms rather than the expected 10 seconds
*process waits for 10 more seconds* 
>

I'm getting the error below when I include the postcss pipe.
Not sure what's wrong.

TypeError: Cannot read property 'on' of undefined
at DestroyableTransform.Readable.pipe (/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:535:7)
at Gulp.<anonymous> (/gulpfile.js:9:10)
at module.exports (/node_modules/orchestrator/lib/runTask.js:34:7)
at Gulp.Orchestrator._runTask (/node_modules/orchestrator/index.js:273:3)
at Gulp.Orchestrator._runStep (/node_modules/orchestrator/index.js:214:10)
at Gulp.Orchestrator.start (/node_modules/orchestrator/index.js:134:8)
at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:20
at _combinedTickCallback (node.js:370:9)
at process._tickCallback (node.js:401:11)
at Function.Module.runMain (module.js:449:11)

Heres the Gulpfile.js

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    postcss = require('gulp-postcss'),
    autoprefixer = require('autoprefixer');

gulp.task('css', function () {
    return gulp.src('sass/style.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(postcss[autoprefixer({browsers: ['last 2 versions']})])
        .pipe(gulp.dest(''));
});

https://github.com/postcss/postcss/releases/tag/4.0.0

output of my terminal:

/var/www/vecchio/node_modules/gulp-autoprefixer/node_modules/postcss/lib/lazy-result.js:152
this.processing = new Promise(function (resolve, reject) {
^
ReferenceError: Promise is not defined

I have been digging for hours trying to find an example of a plugin that can output two files from a single source. I am at a loss and I am hoping I am simply overlooking something obvious.

It appears as though right now there is a hard assumption that 1:1 for from-file:to-file where as I am hoping to find a way to do 1:n+1. Any help would be greatly appreciated!

I have sass generate sourcemaps and I use this plugin to apply autoprefixer and it slows down the sourcemap generation a lot. Is there a way to speed it up? Time difference is huge few seconds vs few mins. I have confirmed this by commenting out this task.

Possible reason for slow down could be appending source code in the sourcemap.

I compile css with this

    return gulp.src(bower(['**/*.css']).concat([
            'src/css/plugins/[^_]*.css',
            'src/css/globals/[^_]*.css',
            'src/css/shared/[^_]*.css',
            'src/css/components/[^_]*.css',
            'src/css/sections/[^_]*.css'
        ]))
        .pipe($.sourcemaps.init())
        .pipe($.concat('bundle.css'))
        .pipe($.plumber())
        .pipe($.postcss([
            require('autoprefixer-core')()
        ]))
        .pipe(gulp.dest('dist/assets/css'))
        .pipe($.rename({suffix: '.min'}))
        .pipe($.plumber())
        .pipe($.postcss([
            require('csswring')({
                removeAllComments: true
            })
        ]))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest('dist/assets/css'));

And chrome gave me bundle.css in sources with bundle.min.css name.
When I commented both postcss pipes, it worked.

It should throw an error: postcss/postcss-import#35 (comment)

But when using gulp-postcss w/ postcss-import and you try to import a missing file, the gulp task never finishes and postcss processing seems to abort.

moczolaszlo/postcss-inline-comment#4 (comment)

It is impossible to tell postcss to forcibly disable sourcemap support:

var ieFilter = gulpFilter(['main.css'], {restore: true});

gulp.src('**/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([autoprefixer]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(paths.staticBasePath))
    .pipe(ieFilter)
    .pipe(postcss([postcssIE8], {map: false}))
    .pipe(rename({extname: '-ie.css'}))
    .pipe(gulp.dest(paths.staticBasePath));

This throws an error. I am not quite sure if this is a problem of gulp-sourcemaps or gulp-postcss. But when I change the map-generation in gulp-postcss/index.js it works correctly:

if (file.sourceMap && (!options || options.map !== false)) {

I have a problem when trying to use postcss ( from gulp ) for css files that has @imports.
Here is the gulp task

gulp.task('css', function () {

    var postcss = require('gulp-postcss');
    var postcssImport = require('postcss-import');
    var sourcemaps = require('gulp-sourcemaps');
    var autoprefixer = require('autoprefixer-core');

    return gulp.src('./src/css/app.css')
        .pipe(sourcemaps.init())
        .pipe(postcss([
            postcssImport(),
            autoprefixer({ browsers: ['last 2 versions'] })
        ]))
        .pipe(sourcemaps.write('.'))
        .pipe(gulp.dest('./dist/css'));
});

and two simple css files:
common.css

html,
body {
    margin: 0;
    padding: 0;
}

app.css

@import 'common.css'

[18:06:55] Starting 'css'...
Container#eachAtRule is deprecated. Use Container#walkAtRules instead.
Node#before is deprecated. Use Node#raws.before
Container#eachRule is deprecated. Use Container#walkRules instead.
Container#eachDecl is deprecated. Use Container#walkDecls instead.

events.js:85
      throw er; // Unhandled 'error' event
            ^
TypeError: Cannot read property 'before' of undefined
    at Stringifier.raw (...\node_modules\gulp-postcss\node_modules\postcss\lib\stringifier.js:121:30)
    at Stringifier.body (...\node_modules\gulp-postcss\node_modules\postcss\lib\stringifier.js:93:31)
    at Stringifier.root (...\node_modules\gulp-postcss\node_modules\postcss\lib\stringifier.js:37:14)
    at Stringifier.stringify (...\node_modules\gulp-postcss\node_modules\postcss\lib\stringifier.js:33:24)
    at _default.stringify (...\node_modules\gulp-postcss\node_modules\postcss\lib\stringify.js:14:9)
    at _default.generateString (...\node_modules\gulp-postcss\node_modules\postcss\lib\map-generator.js:231:14)
    at _default.generateMap (...\node_modules\gulp-postcss\node_modules\postcss\lib\map-generator.js:189:14)
    at _default.generate (...\node_modules\gulp-postcss\node_modules\postcss\lib\map-generator.js:271:25)
    at LazyResult.stringify (...\node_modules\gulp-postcss\node_modules\postcss\lib\lazy-result.js:221:24)
    at ...\node_modules\gulp-postcss\node_modules\postcss\lib\lazy-result.js:158:27

The confusion in #32 is legitimate, I think, given that users would expect runners to show errors without additional configuration. Since it looks like the solution is the use gulp-plumber or .on('error', ..), maybe it would reduce confusion to exemplify this in the Readme and point out its importance. What do you think?

Is there a way to configure PostCSS plugin to just log the error and not fail a build when it encounters a css syntax error? It may be useful in some live-reloading workflows. For instance when I use gulp with browser-sync's watch plugin that lints code on every change the failed build also fails watching process so I have to restart it every time.

As a possible solution gulp-poctcss may have a switch to handle all postcss errors, log them to console and proceed:

gulp.src(cssFile)
    .pipe(postcss([...], {failOnError: false}))

I get an error when I want to target all browsers. The browser query I am using is as followed:

BrowserslistError: Unknown browser query Chrome

I solved it already by changing the query to ['last 99 versions'] but I thought is was worth mentioning either way :)

New PostCSS is 6 times faster. Changelog

I've got the following linter setup for my sass, and i'm getting an error asking me to provide an array of postcss processors - even though i am supplying an array.

I'm using gulp-postcss for postcss and node 0.10 --harmony. Apparently this is a gulp-postcss issue rather than a postcss issue (postcss/postcss#639)

gulp.task("sass-lint", function() {

  var stylelintConfig = {
    "rules": {
      "block-no-empty": 2,
      "color-no-invalid-hex": 2,
      "declaration-colon-space-after": [2, "always"],
      "declaration-colon-space-before": [2, "never"],
      "function-comma-space-after": [2, "always"],
      "function-url-quotes": [2, "double"],
      "media-feature-colon-space-after": [2, "always"],
      "media-feature-colon-space-before": [2, "never"],
      "media-feature-name-no-vendor-prefix": 2,
      "no-multiple-empty-lines": 2,
      "number-leading-zero": [2, "never"],
      "number-no-trailing-zeros": 2,
      "property-no-vendor-prefix": 2,
      "rule-no-duplicate-properties": 2,
      "rule-no-single-line": 2,
      "rule-trailing-semicolon": [2, "always"],
      "selector-list-comma-newline-after": [2, "always-multi-line"],
      "selector-no-id": 2,
      "string-quotes": [2, "double"],
      "value-no-vendor-prefix": 2
    }
  };

  var processors = [
    stylelint(stylelintConfig),
    reporter({
      clearMessages: true,
    })
  ];

  return gulp.src(config.sourceFiles.styles)
    .pipe(postcss(processors, {syntax: scss}));

});

There doesn't appear to be anyway to get access to result.messages as result isn't exposed anywhere.

This makes integrating tools like cssstats difficult because it just pushes to messages

postcss().use(cssstats()).process(css).then(function (result) {
  result.messages.forEach(function (message) {
    console.log(message)
  })
})

Am I missing something or is this just not possible now?

I'm using gulp-sass, gulp-postcss and gulp-sourcemaps in my project.
When I set to option in the postcss(), the source map content is incorrect.

gulp.src('app/styles/*.scss')
  .pipe($.sourcemaps.init({loadMaps: true}))
  .pipe($.sass().on('error', $.sass.logError))
  .pipe($.postcss(processors, {to: '.tmp/styles/main.css'}))
  .pipe($.sourcemaps.write('.'))
  .pipe(gulp.dest('.tmp/styles'))

Without to option, I could get proper source map, but some postcss plugins need this option.
Am I overlooking something, or is this bug?

I created simple gulp tasks to reproduce this issue. I hope this helps.
https://github.com/htanjo/postcss-sourcemaps-test

In my project both the preprocessed file and processed file live in the same location so I need to give each of them a different file extension. However gulp will not recognise .pcss or .postcss.

For example I have the following:

gulp.task('css', function () {
    var postcss    = require('gulp-postcss');
    var sourcemaps = require('gulp-sourcemaps');
    var rename = require('gulp-rename');

    return gulp.src('src/**/*.pcss', {base: './'})
        .pipe( sourcemaps.init() )
        .pipe( postcss([ require('autoprefixer'), require('precss') ]) )
        .pipe( sourcemaps.write('.') )
        .pipe( rename({extname: '.css'}) )
        .pipe( gulp.dest('./') );
});

Any idea why this could be?

I'd like to use the cssnext plugin pack with gulp-postcss, as my first processor to be followed by a set of other cherry picked postcss plugins. The trouble is that I can't figure out how to get cssnext working with gulp-postcss. In the following code snippet I think I'm using cssnext() wrong within the processors array, but everything I've tried to correct it fails.

var gulp = require('gulp');
var postcss = require('gulp-postcss');
var cssnext = require('cssnext');

config = {
  cssDistPath: './dist/css',
  cssSrcGlob:  './src/css/**/*.css'
};

gulp.task('css', function () {

  var processors = [
    cssnext({
      features: {
        calc: {
            preserve: true
        }
      }
    })
  ];

  return gulp.src(config.cssSrcGlob)
    .pipe(postcss(processors))
    .pipe(gulp.dest(config.cssDistPath));

});

Do you have any suggestions on how to get this working, or a better configuration?

Hi!!

I think that

opts.from = opts.to = file.path

Is not ok.. opts.to must be the path of the "gulp.dest" . What do you think?

In vinyl-sourcemaps-apply 0.2.0 was updated source-map module

PostCSS Runner Guidelines