Error in plugin gulp postcss

The error is coming from the postcss plugin, I think I may have written it incorrectly.

I’m trying to add cssnano and autoprefixer to the postcss plugin.

gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143
        throw new Error(i + ' is not a PostCSS plugin');
        ^

Error: [object Object] is not a PostCSS plugin
    at Processor.normalize (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:143:15)
    at new Processor (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/processor.js:51:25)
    at postcss (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/node_modules/postcss/lib/postcss.js:73:10)
    at Transform.stream._transform (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-postcss/index.js:47:5)
    at Transform._read (_stream_transform.js:167:10)
    at Transform._write (_stream_transform.js:155:12)
    at doWrite (_stream_writable.js:300:12)
    at writeOrBuffer (_stream_writable.js:286:5)
    at Transform.Writable.write (_stream_writable.js:214:11)
    at DestroyableTransform.ondata (/Applications/XAMPP/xamppfiles/htdocs/sites/gulp/node_modules/gulp-sass/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:531:20)
Mac-a45e60e72dad:gulp JoeKonst$ 

My code:

// Dependancies
var gulp = require('gulp'),
    browserSync = require('browser-sync'),
    plumber = require('gulp-plumber'),
    autoprefixer = require('gulp-autoprefixer'),
    uglify = require('gulp-uglify'),
    compass = require('gulp-compass'),
    rename = require('gulp-rename'),
    nano = require('cssnano'),
    del = require('del'),
    postcss = require('gulp-postcss'),
    sass = require('gulp-sass');

// Styles
gulp.task('styles', function(){
    gulp.src('sass/main.scss')
    .pipe(sass())
    .pipe(postcss([autoprefixer({browsers: ['last 2 versions']}), nano()]))
    .pipe(gulp.dest('css/'));

    gulp.watch('sass/**/*.scss', ['styles']);
});

// Tasks
gulp.task('default', ['styles']);

Stops after «Error in plugin ‘gulp-postcss’ » #42

Whenever there is an error, like importing file that does not exist (wrong path), I get this error which stops gulp:

Really annoying causing me to restart my tasks every time css error is made. Am I doing something wrong?

The text was updated successfully, but these errors were encountered:

I’m having a similar problem using gulp-postcss , gulp-plumber , and gulp-watch together — task shown below. When the task encounters a CSS error, the task remains open and the error is logged per the warn error handler passed in, so all is good so far. But the build files aren’t updated with any changes made to the source files, like fixing the error.

gulp-watch does still continue to log that changes were detected in the source files; they just don’t get processed anymore unless I restart the task over again.

Has anyone found a solution/workaround for this yet?

I have the same issue.

I have this problem, but nobody resolved it as I see.

Bad fix:
Will work with gulp-notify https://www.npmjs.com/package/gulp-notify
import notify from ‘gulp-notify’; and
Instead .pipe(plumber()) insert .pipe(plumber(< errorHandler: notify.onError(‘Error: ‘) >))

I don’t know why it works, I found it when I wanted to delete gulp-notify , he has his own problems (with notifications).

Just notice the same. Solutions?

© 2023 GitHub, Inc.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

Expected a pseudo-class or pseudo-element #1246

This is my first time raising an issue.

I am studying Git a Web Developer and added post css library. Now, facing error as follow —

`Error in plugin «gulp-postcss»
Message:
Expected a pseudo-class or pseudo-element.
Details:
fileName: /Users/Vikram/Documents/DevLab/travel-site/app/assets/styles/styles.css

Stack:
Error: Expected a pseudo-class or pseudo-element.
at Root._error (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/parser.js:182:24)
at Root.error (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/selectors/root.js:43:25)
at Parser.error (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/parser.js:666:25)
at Parser.expected (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/parser.js:994:25)
at Parser.pseudo (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/parser.js:799:25)
at Parser.parse (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/parser.js:955:22)
at Parser.loop (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/parser.js:923:18)
at new Parser (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/parser.js:174:14)
at Processor._root (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/processor.js:47:22)
at Processor._runSync (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/processor.js:83:25)
at Processor.processSync (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-selector-parser/dist/processor.js:177:27)
at parse (/Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-nested/index.js:9:9)
at /Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-nested/index.js:39:18
at Array.forEach ()
at /Users/Vikram/Documents/DevLab/travel-site/node_modules/postcss-nested/index.js:38:21
at Array.forEach ()`

The stack clearly mentions the error to be found in postcss-nested/index.js. I tried reinstalling the postcss but it doesn’t help.

Due to this error, any styles further added are not working.

The text was updated successfully, but these errors were encountered:

Источник

Fails silently with missing file and postcss-import #32

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.

The text was updated successfully, but these errors were encountered:

@timkelty, given this gulpfile:

and the following css file src/style.css :

I get the following output in the console:

So I guess it is working as expected and the error is passed as a stream event.

@timkelty got no further input from your side, may I close this?

I’ll test right now and see what’s going on with my environment.

Gulp-postcss (not sure, maybe postcss itself) seem to always fail silently. Any error with missing paths in some of the plugins causes it silently fail. It should print the error, this hardens debugging very much.

Issues noticed with cssgrace (when url points to missing file), postcss-assets with same problem of resolving paths.

This is how it looks like:

Sticking gulp-plumber in the pipe right before postcss takes care of everything for me. @olegstepura I would give that a try if you haven’t yet.

It helps. Thanks!

gulp-postcss has a test for correct stream error that you can listen to and log to console.

It also tests that in case of cssSyntaxError it should emit a pretty error from postCSS instead of regular js stack trace.

According to gulp plugin guidelines an error should not be thrown, but it should be emitted.

Well, stack trace is helpful when you don’t know who did thrown an exception. In case of postcss plugins exceptions are no longer thrown by some gulp plugins, it’s thrown by postcss plugins that know nothing about gulp.

@olegstepura of course stack trace is helpful, and it is there for non-cssSyntaxErrors, so feel free to subscribe to the stream error event and use your preferred method of displaying the errors. Tests should give you a hint of how to capture stream errors, or use gulp-plumber with gulp-postcss.

I’m very exceited of the project postcss itself. but silent fails almost made stop trying. Also it seems some postcss plugins are still bad quality, plugin order matters, and so on. but thanks to @timkelty for pointing to gulp-plumber , I was thinking plumber was designed for other reasons.

This is an offtop, but don’t you know if it is possible to tell plumber to print stack?

Ok, seems the best way is to setup custom error logging function

@olegstepura feel free to open pull request to improve the quality of certain postcss plugins. This repository is only related to gulp plugin.

Hoping this is the right place to ask, but what is the best way to surface warnings from postcss plugins now?

For example postcss-bem-linter uses the warning class as seen here. But I don’t think this triggers an error in a stream?

Have tried using postcss-log-warning with throwError set to true but still doesn’t seem to throw an error.

@simonsmith I think that warnings should behave differently from the errors, as far as I understand, according to guidelines they should be output in the console rather than emitted as errors.

I’m also facing this issue, but plumber doesn’t seem to be helping:

given:

running:

resulting:

I also tried using postcss-log-warnings, now I get this:

in addition, postcss-import IS finding these files:

/projects/LevelEleven/ui-kit/gulpfile.js [14:58:26] Starting ‘styles:toolkit’. [ ‘/Users/vince/projects/LevelEleven/ui-kit/src/assets/toolkit/styles/toolkit.css’, ‘/Users/vince/projects/LevelEleven/ui-kit/node_modules/suitcss-components-grid/index.css’, ‘/Users/vince/projects/LevelEleven/ui-kit/node_modules/suitcss-components-grid/lib/grid.css’, ‘/Users/vince/projects/LevelEleven/ui-kit/src/assets/toolkit/styles/dude.css’ ] ** postcss-log-warnings: warnings were found **»>

@VinSpee sorry, I’m super busy and will only be able to look into this on the weekend.

No problem! I appreciate you even looking at all. On a second glance, I think the issue may be in gulp-sourcemaps or maybe even gulp-autoprefixer because if I remove them, the build works. I’ll close for now.

@VinSpee that issue is about postcss-log-warnings I believe, not gulp-postcss. See: davidtheclark/postcss-log-warnings#6 — working on figuring it out.

Источник

const
  gulp          = require('gulp'),
  gulpsass      = require('gulp-sass'),
  browsersync   = require("browser-sync"),
  babel         = require('gulp-babel'),
  phpConnect    = require('gulp-connect-php'),
  concat        = require('gulp-concat'),
  concatCSS     = require('gulp-concat-css'),
  uglify        = require('gulp-uglifyjs'),
  cssnano       = require('gulp-cssnano'),
  rename        = require('gulp-rename'),
  del           = require('del'),
  imagemin      = require('gulp-imagemin'),
  pngquant      = require('imagemin-pngquant'),
  cache         = require('gulp-cache'),
  autoprefixer  = require('gulp-autoprefixer'),
  htmlmin       = require('gulp-htmlmin'),

function gulpSass() {
  return gulp
    .src('assets/sass/**/*.sass')
    .pipe(gulpsass({ outputStyle: "expanded" }))
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true}))
    .pipe(gulp.dest('assets/css'))
    .pipe(browsersync.stream());
}

function libsJs() {
  return gulp.src([
    'assets/libs/jquery-3.3.1.min.js',
    'assets/libs/bootstrap-4.3.1-dist/js/bootstrap.js',
    'assets/libs/validator.min.js'
  ])
    .pipe(concat('libs.min.js'))
    .pipe(uglify({
      toplevel: true
    }))
    .pipe(gulp.dest('assets/js'))
}

function scripts(){
  return gulp
    .src(['assets/js/main.js', 'assets/js/index.js'])
    .pipe(babel({
      presets: ['@babel/env']
    }))
    .pipe(gulp.dest('assets/scripts'))
}

function libsCss() {
  return gulp.src([
    'assets/libs/bootstrap-4.3.1-dist/css/bootstrap.css',
    'assets/css/animate.css'
  ])
    .pipe(concatCSS('libs.css'))
    .pipe(gulp.dest('assets/css'))
    .pipe(cssnano())
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest('assets/css'))
}

function browserSync(done) {
  phpConnect.server({
    port: 8000,
    notify: false,
    keepalive: true,
    base: "./"
  }, function (){
    browsersync({
      proxy: '127.0.0.1:8000/'
    });
  });
  done();
}

function clean() {
  return del(["dist"]);
}
function cleanES() {
  return del(["assets/script"]);
}
function clear() {
  return cache.clearAll();
}

function images() {
  return gulp
    .src("assets/images/**/*")
    .pipe((cache(
      imagemin([
        imagemin.gifsicle({ interlaced: true }),
        imagemin.jpegtran({ progressive: true }),
        imagemin.optipng({ optimizationLevel: 5 }),
        imagemin.svgo({
          plugins: [
            {
              removeViewBox: false,
              collapseGroups: true,
              use: [pngquant()]
            }
          ]
        })
      ])))

    )
    .pipe(gulp.dest('dist/assets/images'));
}

function watchFiles(done) {
  gulp.watch("./**/*.php", reload);
  gulp.watch('assets/sass/**/*.sass', gulp.parallel(gulpSass));
  gulp.watch('assets/js/**/*.js', reload);
  gulp.watch('*.html', reload);
  done();
}

function buildFiles(done) {
  gulp.src([
    'assets/css/main.css',
    'assets/css/libs.min.css'
  ])
    .pipe(cssnano())
    .pipe(gulp.dest('dist/assets/css'));

  gulp.src(
    'assets/js/libs.min.js')
    .pipe(gulp.dest('dist/assets/js'));

  gulp.src(['assets/scripts/main.js'])
    .pipe(uglify())
    .pipe(gulp.dest('dist/assets/scripts'));

  gulp.src(['assets/scripts/config-contact.js'])
    .pipe(uglify({
      toplevel: true
    }))
    .pipe(gulp.dest('dist/assets/scripts'));

  gulp.src('static**!/!*')
    .pipe(gulp.dest('dist'));

  gulp.src('php**!/!*')
    .pipe(gulp.dest('dist'));

  gulp.src('*.html')
    .pipe(htmlmin({collapseWhitespace: true}))
    .pipe(gulp.dest('dist'));

  gulp.src('*.txt')
    .pipe(gulp.dest('dist'));

  gulp.src('*.xml')
    .pipe(gulp.dest('dist'));

  gulp.src('.htaccess')
    .pipe(gulp.dest('dist'));
  done();
}
const watch = gulp.series(watchFiles, gulp.parallel(cleanES, browserSync, scripts, libsJs, libsCss));
const build = gulp.series(clean, gulp.parallel(buildFiles, images, libsJs));

exports.clean = clean;
exports.clean = cleanES;
exports.clear = clear;
exports.watch = watch;
exports.build = build;
exports.default = watch;

function reload(done) {
  browsersync.reload();
  done();
}

Вылетает ошибка Error in plugin «gulp-cssnano»
Message:
postcss-svgo: Error in parsing SVG: Unquoted attribute value

И еще проблема, у меня sass не стримит а релоадит

$ npm install --save-dev postcss gulp-postcss

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

gulp.task('css', function () {
    return gulp.src('./src/*.css')
        .pipe(postcss())
        .pipe(gulp.dest('./dest'));
});

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

gulp.task('css', function () {
    var plugins = [
        autoprefixer({browsers: ['last 1 version']}),
        cssnano()
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(plugins))
        .pipe(gulp.dest('./dest'));
});

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

gulp.task('css', function () {
    return gulp.src('./src/*.pcss')
        .pipe(postcss())
        .pipe(rename({
          extname: '.css'
        }))
        .pipe(gulp.dest('./dest'));
});

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

gulp.task('default', function () {
    var plugins = [nested];
    return gulp.src('in.sss')
        .pipe(postcss(plugins, { parser: sugarss }))
        .pipe(gulp.dest('out'));
});

var postcss = require('gulp-postcss');
var cssnext = require('postcss-cssnext');
var opacity = function (css, opts) {
    css.walkDecls(function(decl) {
        if (decl.prop === 'opacity') {
            decl.parent.insertAfter(decl, {
                prop: '-ms-filter',
                value: '"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + (parseFloat(decl.value) * 100) + ')"'
            });
        }
    });
};

gulp.task('css', function () {
    var plugins = [
        cssnext({browsers: ['last 1 version']}),
        opacity
    ];
    return gulp.src('./src/*.css')
        .pipe(postcss(plugins))
        .pipe(gulp.dest('./dest'));
});

return gulp.src('./src/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss(plugins))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./dest'));

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

gulp.task('css', function () {
    function callback(file) {
        return {
            plugins: [
                require('postcss-import')({ root: file.dirname }),
                require('postcss-modules')
            ],
            options: {
                parser: file.extname === '.sss' ? require('sugarss') : false
            }
        }
    }
    return gulp.src('./src/*.css')
        .pipe(postcss(callback))
        .pipe(gulp.dest('./dest'));
});

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

gulp.task('css', function () {
    var contextOptions = { modules: true };
    return gulp.src('./src/*.css')
        .pipe(postcss(contextOptions))
        .pipe(gulp.dest('./dest'));
});

module.exports = function (ctx) {
    var file = ctx.file;
    var options = ctx.options;
    return {
        parser: file.extname === '.sss' ? : 'sugarss' : false,
        plugins: {
           'postcss-import': { root: file.dirname }
           'postcss-modules': options.modules ? {} : false
        }
    }
})

gulp-postcss’s People

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)

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(''));
});

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

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

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

//这是一个测试

body{
  color: red;
}```

events.js:72
        throw er; // Unhandled 'error' event
              ^
ReferenceError: Promise is not defined
    at LazyResult.async (D:_hostflteinvestrootnode_modulesgulp-postcssnode_modulespostcssliblazy-result.js:93:31)
    at LazyResult.then (D:_hostflteinvestrootnode_modulesgulp-postcssnode_modulespostcssliblazy-result.js:56:21)
    at Transform.stream._transform (D:_hostflteinvestrootnode_modulesgulp-postcssindex.js:44:10)
    at Transform._read (_stream_transform.js:179:10)
    at Transform._write (_stream_transform.js:167:12)
    at doWrite (_stream_writable.js:226:10)
    at writeOrBuffer (_stream_writable.js:216:5)
    at Transform.Writable.write (_stream_writable.js:183:11)
    at write (D:_hostflteinvestrootnode_modulesgulpnode_modulesvinyl-fsnode_modulesthrough2node_modulesreadable-streamlib_stream_readabl
e.js:623:24)
    at flow (D:_hostflteinvestrootnode_modulesgulpnode_modulesvinyl-fsnode_modulesthrough2node_modulesreadable-streamlib_stream_readable
.js:632:7)

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/') )
});

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 ~DocumentsGitHubtestgulpfile.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* 
>

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/"));
});

[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

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)

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

// Comment
^ 

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

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

[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_modulesgulp-postcssnode_modulespostcsslibstringifier.js:121:30)
    at Stringifier.body (...node_modulesgulp-postcssnode_modulespostcsslibstringifier.js:93:31)
    at Stringifier.root (...node_modulesgulp-postcssnode_modulespostcsslibstringifier.js:37:14)
    at Stringifier.stringify (...node_modulesgulp-postcssnode_modulespostcsslibstringifier.js:33:24)
    at _default.stringify (...node_modulesgulp-postcssnode_modulespostcsslibstringify.js:14:9)
    at _default.generateString (...node_modulesgulp-postcssnode_modulespostcsslibmap-generator.js:231:14)
    at _default.generateMap (...node_modulesgulp-postcssnode_modulespostcsslibmap-generator.js:189:14)
    at _default.generate (...node_modulesgulp-postcssnode_modulespostcsslibmap-generator.js:271:25)
    at LazyResult.stringify (...node_modulesgulp-postcssnode_modulespostcssliblazy-result.js:221:24)
    at ...node_modulesgulp-postcssnode_modulespostcssliblazy-result.js:158:27

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

opts.from = opts.to = file.path

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

});

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

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

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

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

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'))

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

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

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

});

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('./') );
});

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

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

    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'));

git tag v5.1.1 1245750bfcd800b6d913224b2ccfa51725da63aa

В последнем уроке мы рассказали, как вы можете начать работу с PostCSS мгновенно, используя CodePen или Prepros. Эти параметры хороши, но ограничены тем, что вы не можете контролировать, какие плагины доступны для использования.

В этом уроке мы рассмотрим, как вы можете использовать PostCSS с исполнителем задач Gulp , что позволит вам самим решить, какие плагины вы хотите использовать, и, следовательно, действительно подключиться к экосистеме плагинов.

Примечание . Если вы никогда раньше не работали с командной строкой или исполнителями задач, я рекомендую перед началом этого урока ознакомиться с нашей бесплатной серией: Командная строка для веб-дизайна .

Предпосылки

Учитывая, что мы будем работать с Gulp, мы предполагаем, что у вас уже есть необходимые условия для его использования:

• Node.js
• NPM
• Гит

Если вы не уверены, что они установлены, следуйте учебному пособию «Командная строка для веб-дизайна: укрощение сторонних пакетов», которое поможет вам выполнить эти предварительные условия.

Также убедитесь, что вы понимаете основы использования Gulp, следуя руководству «Командная строка для веб-дизайна: автоматизация с Gulp» . Кроме того, следуйте инструкциям в разделе «Настройка проекта для Gulp» руководства. Прежде чем двигаться дальше, у вас должна быть папка проекта с:

• «Gulpfile.js» (Gulpfile)
• Файл «package.json»
• Gulp установлен в папке «node_modules» и установлен как dev-зависимость для вашего проекта

Базовая настройка Gulp PostCSS

Внутри вашей папки проекта создайте две подпапки, одну с именем «src» и одну с именем «dest». В папке «src» будут храниться ваши необработанные CSS-файлы, а в папке «dest» будут записаны обработанные вами файлы PostCSS.

Следующее, что вам нужно сделать, это установить плагин gulp-postcss в ваш проект – мы будем использовать это для обработки нашей обработки PostCSS.

В терминале / командной строке, указанной в папке вашего проекта, выполните команду:

После завершения установки структура вашего проекта должна выглядеть следующим образом:

Теперь откройте ваш Gulpfile для редактирования и создайте переменные для вызова в модулях «gulp» и «gulp-postcss», добавив следующий код:

Теперь мы можем настроить задачу для чтения исходного файла CSS и обработки его через PostCSS.

Добавьте следующее:

Давайте разберем то, что мы имеем в коде выше.

В первой строке мы настроили задачу css именем css . Эта задача выполняет функцию, и внутри этой функции мы создали массив с именем processors . Прямо сейчас этот массив пуст, но через мгновение мы заполним его плагинами PostCSS, которые мы хотим использовать.

После массива processors мы указали файлы, которые мы хотим использовать для обработки: любые CSS-файлы в папке «src».

В первой из двух строк, использующих функцию pipe() , мы настраиваем выполнение PostCSS с помощью функции postcss() . В качестве аргумента через эту функцию мы передаем наш массив processors , который позже сообщит PostCSS, какие плагины мы хотим использовать.

Наконец, со второй из двух функций pipe() мы получили наш обработанный код, записанный в новый файл CSS в нашей папке dest.

Запустите тестовую компиляцию

Создайте новый файл «style.css» в папке «src» и добавьте в него несколько тестовых CSS, таких как:

Теперь в вашем терминале / командной строке, все еще указав на папку вашего проекта, выполните команду:

Это запустит задачу, которую вы только что настроили, и в результате вы должны найти новый файл «style.css» внутри вашей папки «dest».

Когда вы откроете этот новый файл, вы увидите код, идентичный коду вашего исходного файла. Код не изменился, потому что мы еще не использовали какие-либо плагины PostCSS, и, как вы узнаете из предыдущего урока, именно плагины выполняют фактические манипуляции с CSS.

Добавить PostCSS плагины

Теперь мы добавим выбор плагинов и пакетов PostCSS: Autoprefixer (добавляет префиксы вендора), cssnext (включает синтаксис в будущем) и precss (расширяется функциональностью, подобной Sass).

Выполните следующие команды, чтобы установить каждый плагин в свой проект:

Примечание . Установка cssnext и precss может занять некоторое время, поскольку они представляют собой пакеты из нескольких плагинов.

Далее мы определим переменные для загрузки каждой из них в наш проект. Добавьте следующий код под двумя существующими переменными в верхней части вашего Gulpfile:

Затем мы добавим эти три плагина в массив processors в нашей задаче gulp. Обновите массив до следующего:

После добавления трех плагинов в наш массив процессоров PostCSS будет знать, что мы хотим применить каждый из них к нашему исходному CSS.

Теперь мы готовы добавить тестовый код в наш файл «src / style.css» и проверить, что все работает. Удалите то, что у вас уже есть в файле, и вместо этого добавьте этот CSS:

Теперь снова введите команду gulp css , и полученный файл в папке «dest» должен иметь следующее содержимое:

Как указано выше, вы должны увидеть, что префиксы вендоров были добавлены в первый класс Autoprefixer, цвет rgba() был выведен cssnext во второй класс, а @if @else была оценена PreCSS в третьем учебный класс.

Настройка параметров плагина

Примечание : если вы хотите настроить параметры для плагина, добавьте пару скобок после его имени в массиве препроцессоров и передайте параметры там. Например, вы можете указать список браузеров, с которым вы хотите работать Autoprefixer, например:

Поделиться своим проектом

Прелесть PostCSS в том, что он может быть настроен на любую комбинацию плагинов. Однако перед нами стоит задача обеспечить, чтобы другие люди, желающие работать над проектом, имели одинаковую настройку плагинов PostCSS. Благодаря npm эта проблема решается через систему управления зависимостями.

Поскольку вы используете флаг --save-dev каждый раз, когда устанавливаете плагин в свой проект, он будет добавлен в ваш файл «project.json» как зависимость dev. Это означает, что если вы хотите поделиться своим проектом с другими, они могут запустить команду npm install для пакета, которым вы делитесь с ними, и автоматически установить все те же плагины.

Чтобы узнать больше о том, как управление зависимостями работает с NPM, ознакомьтесь с руководством «Командная строка для веб-дизайна: Укрощение сторонних пакетов» .

Давайте подведем итоги

Подводя итог вышесказанному:

• Создайте проект npm с установленным Gulp и Gulpfile внутри
• Установите плагин gulp-postcss
• Настройте ваш Gulpfile для загрузки плагинов gulp и gulp-postcss
• Создайте задание для компиляции вашего CSS
• В рамках задачи настройте массив processors
• postcss() исходный CSS через postcss() с массивом processors переданным в качестве аргумента

Оттуда вы можете выполнить те же самые важные шаги, чтобы включить любой плагин PostCSS в вашем проекте:

• Установите плагин в свой проект с
  npm install <plugin_name> --save-dev
• Определите переменную для загрузки плагина в вашем Gulpfile, например
  var autoprefixer = require('autoprefixer');
• Добавьте это имя переменной в ваш массив preprocessors .

Проверьте репозиторий Github для начальных файлов и завершенных примеров.

Далее: Grunt + PostCSS

В следующем уроке мы расскажем, как настроить проект PostCSS в другом из двух основных исполнителей задач: Grunt. Увидимся там!