All Projects → postcss → Gulp Postcss

postcss / Gulp Postcss

Licence: mit
Pipe CSS through PostCSS processors with a single parse

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Gulp Postcss

Gulp Autoprefixer
Prefix CSS
Stars: ✭ 676 (-9.75%)
Mutual labels:  gulp-plugin, postcss
Postcss
Transforming styles with JS plugins
Stars: ✭ 25,612 (+3319.49%)
Mutual labels:  postcss
Postcss Assets
An asset manager for PostCSS
Stars: ✭ 538 (-28.17%)
Mutual labels:  postcss
Tailwindcss Dark Mode
🌚 A Tailwind CSS plugin that adds variants for dark mode
Stars: ✭ 649 (-13.35%)
Mutual labels:  postcss
Nth Start Project
Startkit for HTML / CSS / JS pages layout.
Stars: ✭ 578 (-22.83%)
Mutual labels:  postcss
Naomi
Sublime Text enhanced syntax highlighting for JavaScript ES6/ES7/ES2015/ES2016/ES2017+, Babel, FlowType, React JSX, Styled Components, HTML5, SCSS3, PHP 7, phpDoc, PHPUnit, MQL4. Basic: Git config files.
Stars: ✭ 544 (-27.37%)
Mutual labels:  postcss
Typescript Plugin Css Modules
A TypeScript language service plugin providing support for CSS Modules.
Stars: ✭ 520 (-30.57%)
Mutual labels:  postcss
Purgecss
Remove unused CSS
Stars: ✭ 6,566 (+776.64%)
Mutual labels:  postcss
Postcss Easing Gradients
PostCSS plugin to create smooth linear-gradients that approximate easing functions.
Stars: ✭ 689 (-8.01%)
Mutual labels:  postcss
Postcss Cssnext
`postcss-cssnext` has been deprecated in favor of `postcss-preset-env`.
Stars: ✭ 5,388 (+619.36%)
Mutual labels:  postcss
Postcss Cli
CLI for postcss
Stars: ✭ 621 (-17.09%)
Mutual labels:  postcss
Hugo Theme Hello Friend
Pretty basic theme for Hugo that covers all of the essentials. All you have to do is start typing!
Stars: ✭ 586 (-21.76%)
Mutual labels:  postcss
Awesome Tailwindcss
😎 Awesome things related to Tailwind CSS
Stars: ✭ 7,791 (+940.19%)
Mutual labels:  postcss
Gulp Useref
Parse build blocks in HTML files to replace references to non-optimized scripts or stylesheets.
Stars: ✭ 720 (-3.87%)
Mutual labels:  gulp-plugin
Gulp Gh Pages
A gulp 4 plugin to publish contents to Github pages
Stars: ✭ 611 (-18.42%)
Mutual labels:  gulp-plugin
Gulp Angular Templatecache
Concatenates and registers AngularJS templates in the $templateCache.
Stars: ✭ 530 (-29.24%)
Mutual labels:  gulp-plugin
React Starterify
A minimal React JS application starter kit
Stars: ✭ 669 (-10.68%)
Mutual labels:  postcss
Gulp Changed
Only pass through changed files
Stars: ✭ 737 (-1.6%)
Mutual labels:  gulp-plugin
Turretcss
Turret is a styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.
Stars: ✭ 729 (-2.67%)
Mutual labels:  postcss
React Ssr Setup
React Starter Project with Webpack 4, Babel 7, TypeScript, CSS Modules, Server Side Rendering, i18n and some more niceties
Stars: ✭ 678 (-9.48%)
Mutual labels:  postcss

gulp-postcss

Build Status Coverage Status

PostCSS gulp plugin to pipe CSS through several plugins, but parse CSS only once.

Install

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

Install required postcss plugins separately. E.g. for autoprefixer, you need to install autoprefixer package.

Basic usage

The configuration is loaded automatically from postcss.config.js as described here, so you don't have to specify any options.

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

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

Passing plugins directly

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

Using with .pcss extension

For using gulp-postcss to have input files in .pcss format and get .css output need additional library like gulp-rename.

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

This is done for more explicit transformation. According to gulp plugin guidelines

Your plugin should only do one thing, and do it well.

Passing additional options to PostCSS

The second optional argument to gulp-postcss is passed to PostCSS.

This, for instance, may be used to enable custom parser:

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

Using a custom processor

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

Source map support

Source map is disabled by default, to extract map use together with gulp-sourcemaps.

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

Advanced usage

If you want to configure postcss on per-file-basis, you can pass a callback that receives vinyl file object and returns { plugins: plugins, options: options }. For example, when you need to parse different extensions differntly:

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

The same result may be achieved with postcss-load-config, because it receives ctx with the context options and the vinyl file.

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

Changelog

  • 9.0.0

    • Bump PostCSS to 8.0
    • Drop Node 6 support
    • PostCSS is now a peer dependency
  • 8.0.0

    • Bump PostCSS to 7.0
    • Drop Node 4 support
  • 7.0.1

    • Drop dependency on gulp-util
  • 7.0.0

    • Bump PostCSS to 6.0
    • Smaller module size
    • Use eslint instead of jshint
  • 6.4.0

    • Add more details to PluginError object
  • 6.3.0

    • Integrated with postcss-load-config
    • Added a callback to configure postcss on per-file-basis
    • Dropped node 0.10 support
  • 6.2.0

    • Fix syntax error message for PostCSS 5.2 compatibility
  • 6.1.1

    • Fixed the error output
  • 6.1.0

    • Support for null files
    • Updated dependencies
  • 6.0.1

    • Added an example and a test to pass options to PostCSS (e.g. syntax option)
    • Updated vinyl-sourcemaps-apply to 0.2.0
  • 6.0.0

    • Updated PostCSS to version 5.0.0
  • 5.1.10

    • Use autoprefixer in README
  • 5.1.9

    • Prevent unhandled exception of the following pipes from being suppressed by Promise
  • 5.1.8

    • Prevent stream’s unhandled exception from being suppressed by Promise
  • 5.1.7

    • Updated direct dependencies
  • 5.1.6

    • Updated CssSyntaxError check
  • 5.1.4

    • Simplified error handling
    • Simplified postcss execution with object plugins
  • 5.1.3 Updated travis banner

  • 5.1.2 Transferred repo into postcss org on github

  • 5.1.1

    • Allow override of to option
  • 5.1.0 PostCSS Runner Guidelines

    • Set from and to processing options
    • Don't output js stack trace for CssSyntaxError
    • Display result.warnings() content
  • 5.0.1

    • Fix to support object plugins
  • 5.0.0

    • Use async API
  • 4.0.3

    • Fixed bug with relative source map
  • 4.0.2

    • Made PostCSS a simple dependency, because peer dependency is deprecated
  • 4.0.1

    • Made PostCSS 4.x a peer dependency
  • 4.0.0

    • Updated PostCSS to 4.0
  • 3.0.0

    • Updated PostCSS to 3.0 and fixed tests
  • 2.0.1

    • Added Changelog
    • Added example for a custom processor in README
  • 2.0.0

    • Disable source map by default
    • Test source map
    • Added Travis support
    • Use autoprefixer-core in README
  • 1.0.2

    • Improved README
  • 1.0.1

    • Don't add source map comment if used with gulp-sourcemaps
  • 1.0.0

    • Initial release
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].