{"id":13398017,"url":"https://github.com/postcss/gulp-postcss","last_synced_at":"2025-12-17T00:42:59.428Z","repository":{"id":19782462,"uuid":"23041299","full_name":"postcss/gulp-postcss","owner":"postcss","description":"Pipe CSS through PostCSS processors with a single parse","archived":false,"fork":false,"pushed_at":"2024-02-06T10:48:07.000Z","size":106,"stargazers_count":769,"open_issues_count":5,"forks_count":64,"subscribers_count":18,"default_branch":"main","last_synced_at":"2025-05-08T09:32:00.046Z","etag":null,"topics":["gulp-plugin","javascript","postcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/postcss.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2014-08-17T13:39:32.000Z","updated_at":"2025-04-29T16:32:51.000Z","dependencies_parsed_at":"2024-01-19T16:11:06.637Z","dependency_job_id":"72e4227a-f56c-4f25-a352-787d242a000e","html_url":"https://github.com/postcss/gulp-postcss","commit_stats":{"total_commits":129,"total_committers":26,"mean_commits":4.961538461538462,"dds":0.5116279069767442,"last_synced_commit":"46533ec1ced0e8db61af609f4d5075ab9396e17b"},"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fgulp-postcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fgulp-postcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fgulp-postcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/postcss%2Fgulp-postcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/postcss","download_url":"https://codeload.github.com/postcss/gulp-postcss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253807282,"owners_count":21967334,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gulp-plugin","javascript","postcss"],"created_at":"2024-07-30T18:02:01.958Z","updated_at":"2025-12-17T00:42:59.363Z","avatar_url":"https://github.com/postcss.png","language":"JavaScript","readme":"# gulp-postcss\n\n![Build Status](https://github.com/postcss/gulp-postcss/actions/workflows/test.yml/badge.svg?branch=main)\n[![Coverage Status](https://img.shields.io/coveralls/postcss/gulp-postcss.svg)](https://coveralls.io/r/postcss/gulp-postcss)\n\n[PostCSS](https://github.com/postcss/postcss) gulp plugin to pipe CSS through\nseveral plugins, but parse CSS only once.\n\n## Install\n\n    $ npm install --save-dev postcss gulp-postcss\n\nInstall required [postcss plugins](https://www.npmjs.com/browse/keyword/postcss-plugin) separately. E.g. for autoprefixer, you need to install [autoprefixer](https://github.com/postcss/autoprefixer) package.\n\n## Basic usage\n\nThe configuration is loaded automatically from `postcss.config.js`\nas [described here](https://www.npmjs.com/package/postcss-load-config),\nso you don't have to specify any options.\n\n```js\nvar postcss = require('gulp-postcss');\nvar gulp = require('gulp');\n\ngulp.task('css', function () {\n    return gulp.src('./src/*.css')\n        .pipe(postcss())\n        .pipe(gulp.dest('./dest'));\n});\n```\n\n## Passing plugins directly\n\n```js\nvar postcss = require('gulp-postcss');\nvar gulp = require('gulp');\nvar autoprefixer = require('autoprefixer');\nvar cssnano = require('cssnano');\n\ngulp.task('css', function () {\n    var plugins = [\n        autoprefixer({browsers: ['last 1 version']}),\n        cssnano()\n    ];\n    return gulp.src('./src/*.css')\n        .pipe(postcss(plugins))\n        .pipe(gulp.dest('./dest'));\n});\n```\n\n## Using with .pcss extension\n\nFor using gulp-postcss to have input files in .pcss format and get .css output need additional library like gulp-rename.\n\n```js\nvar postcss = require('gulp-postcss');\nvar gulp = require('gulp');\nconst rename = require('gulp-rename');\n\ngulp.task('css', function () {\n    return gulp.src('./src/*.pcss')\n        .pipe(postcss())\n        .pipe(rename({\n          extname: '.css'\n        }))\n        .pipe(gulp.dest('./dest'));\n});\n```\n\nThis is done for more explicit transformation. According to [gulp plugin guidelines](https://github.com/gulpjs/gulp/blob/master/docs/writing-a-plugin/guidelines.md#guidelines)\n\n\u003e Your plugin should only do one thing, and do it well.\n\n\n## Passing additional options to PostCSS\n\nThe second optional argument to gulp-postcss is passed to PostCSS.\n\nThis, for instance, may be used to enable custom parser:\n\n```js\nvar gulp = require('gulp');\nvar postcss = require('gulp-postcss');\nvar nested = require('postcss-nested');\nvar sugarss = require('sugarss');\n\ngulp.task('default', function () {\n    var plugins = [nested];\n    return gulp.src('in.sss')\n        .pipe(postcss(plugins, { parser: sugarss }))\n        .pipe(gulp.dest('out'));\n});\n```\n\nIf you are using a `postcss.config.js` file, you can pass PostCSS options as the first argument to gulp-postcss.\n\nThis, for instance, will let PostCSS know what the final file destination path is, since it will be unaware of the path given to `gulp.dest()`:\n\n```js\nvar gulp = require('gulp');\nvar postcss = require('gulp-postcss');\n\ngulp.task('default', function () {\n    return gulp.src('in.scss')\n        .pipe(postcss({ to: 'out/in.css' }))\n        .pipe(gulp.dest('out'));\n});\n```\n\n## Using a custom processor\n\n```js\nvar postcss = require('gulp-postcss');\nvar cssnext = require('postcss-cssnext');\nvar opacity = function (css, opts) {\n    css.walkDecls(function(decl) {\n        if (decl.prop === 'opacity') {\n            decl.parent.insertAfter(decl, {\n                prop: '-ms-filter',\n                value: '\"progid:DXImageTransform.Microsoft.Alpha(Opacity=' + (parseFloat(decl.value) * 100) + ')\"'\n            });\n        }\n    });\n};\n\ngulp.task('css', function () {\n    var plugins = [\n        cssnext({browsers: ['last 1 version']}),\n        opacity\n    ];\n    return gulp.src('./src/*.css')\n        .pipe(postcss(plugins))\n        .pipe(gulp.dest('./dest'));\n});\n```\n\n## Source map support\n\nSource map is disabled by default, to extract map use together\nwith [gulp-sourcemaps](https://github.com/floridoo/gulp-sourcemaps).\n\n```js\nreturn gulp.src('./src/*.css')\n    .pipe(sourcemaps.init())\n    .pipe(postcss(plugins))\n    .pipe(sourcemaps.write('.'))\n    .pipe(gulp.dest('./dest'));\n```\n\n## Advanced usage\n\nIf you want to configure postcss on per-file-basis, you can pass a callback\nthat receives [vinyl file object](https://github.com/gulpjs/vinyl) and returns\n`{ plugins: plugins, options: options }`. For example, when you need to\nparse different extensions differntly:\n\n```js\nvar gulp = require('gulp');\nvar postcss = require('gulp-postcss');\n\ngulp.task('css', function () {\n    function callback(file) {\n        return {\n            plugins: [\n                require('postcss-import')({ root: file.dirname }),\n                require('postcss-modules')\n            ],\n            options: {\n                parser: file.extname === '.sss' ? require('sugarss') : false\n            }\n        }\n    }\n    return gulp.src('./src/*.css')\n        .pipe(postcss(callback))\n        .pipe(gulp.dest('./dest'));\n});\n```\n\nThe same result may be achieved with\n[`postcss-load-config`](https://www.npmjs.com/package/postcss-load-config),\nbecause it receives `ctx` with the context options and the vinyl file.\n\n```js\nvar gulp = require('gulp');\nvar postcss = require('gulp-postcss');\n\ngulp.task('css', function () {\n    var contextOptions = { modules: true };\n    return gulp.src('./src/*.css')\n        .pipe(postcss(contextOptions))\n        .pipe(gulp.dest('./dest'));\n});\n```\n\n```js\n// postcss.config.js or .postcssrc.js\nmodule.exports = function (ctx) {\n    var file = ctx.file;\n    var options = ctx;\n    return {\n        parser: file.extname === '.sss' ? : 'sugarss' : false,\n        plugins: {\n           'postcss-import': { root: file.dirname }\n           'postcss-modules': options.modules ? {} : false\n        }\n    }\n};\n```\n\n## Changelog\n\n* 10.0.0\n  * Released with the same changes as 9.1.0\n\n* 9.1.0 **deprecated, because it breaks semver by dropping support for node \u003c18**\n  * Bump postcss-load-config to ^5.0.0\n  * Ensure options are passed to plugins when using postcss.config.js #170\n  * Update deps\n  * Drop support for node \u003c18\n  * Add flake.nix for local dev with `nix develop`\n\n* 9.0.1\n  * Bump postcss-load-config to ^3.0.0\n\n* 9.0.0\n  * Bump PostCSS to 8.0\n  * Drop Node 6 support\n  * PostCSS is now a peer dependency\n\n* 8.0.0\n  * Bump PostCSS to 7.0\n  * Drop Node 4 support\n\n* 7.0.1\n  * Drop dependency on gulp-util\n\n* 7.0.0\n  * Bump PostCSS to 6.0\n  * Smaller module size\n  * Use eslint instead of jshint\n\n* 6.4.0\n  * Add more details to `PluginError` object\n\n* 6.3.0\n  * Integrated with postcss-load-config\n  * Added a callback to configure postcss on per-file-basis\n  * Dropped node 0.10 support\n\n* 6.2.0\n  * Fix syntax error message for PostCSS 5.2 compatibility\n\n* 6.1.1\n  * Fixed the error output\n\n* 6.1.0\n  * Support for `null` files\n  * Updated dependencies\n\n* 6.0.1\n  * Added an example and a test to pass options to PostCSS (e.g. `syntax` option)\n  * Updated vinyl-sourcemaps-apply to 0.2.0\n\n* 6.0.0\n  * Updated PostCSS to version 5.0.0\n\n* 5.1.10\n  * Use autoprefixer in README\n\n* 5.1.9\n  * Prevent unhandled exception of the following pipes from being suppressed by Promise\n\n* 5.1.8\n  * Prevent stream’s unhandled exception from being suppressed by Promise\n\n* 5.1.7\n  * Updated direct dependencies\n\n* 5.1.6\n  * Updated `CssSyntaxError` check\n\n* 5.1.4\n  * Simplified error handling\n  * Simplified postcss execution with object plugins\n\n* 5.1.3 Updated travis banner\n\n* 5.1.2 Transferred repo into postcss org on github\n\n* 5.1.1\n  * Allow override of `to` option\n\n* 5.1.0 PostCSS Runner Guidelines\n  * Set `from` and `to` processing options\n  * Don't output js stack trace for `CssSyntaxError`\n  * Display `result.warnings()` content\n\n* 5.0.1\n  * Fix to support object plugins\n\n* 5.0.0\n  * Use async API\n\n* 4.0.3\n  * Fixed bug with relative source map\n\n* 4.0.2\n  * Made PostCSS a simple dependency, because peer dependency is deprecated\n\n* 4.0.1\n  * Made PostCSS 4.x a peer dependency\n\n* 4.0.0\n  * Updated PostCSS to 4.0\n\n* 3.0.0\n  * Updated PostCSS to 3.0 and fixed tests\n\n* 2.0.1\n  * Added Changelog\n  * Added example for a custom processor in README\n\n* 2.0.0\n  * Disable source map by default\n  * Test source map\n  * Added Travis support\n  * Use autoprefixer-core in README\n\n* 1.0.2\n  * Improved README\n\n* 1.0.1\n  * Don't add source map comment if used with gulp-sourcemaps\n\n* 1.0.0\n  * Initial release\n","funding_links":[],"categories":["JavaScript","Plugins","插件"],"sub_categories":["Compilation","编译"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostcss%2Fgulp-postcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpostcss%2Fgulp-postcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpostcss%2Fgulp-postcss/lists"}