# postcss-middleware > PostCSS middleware for Connect and Express frameworks. Latest version **1.1.4** (published 2017-10-31) · MIT license · 0 weekly downloads ## Install ```sh npm install postcss-middleware pnpm add postcss-middleware yarn add postcss-middleware bun add postcss-middleware ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.4 | | Published | 2017-10-31 | | First published | 2015-07-05 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Dependencies | 7 | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 36 | | Author | Jed Mao | | Maintainers | jedmao | | Keywords | postcss, middleware, connect, express | ## Links - npm: https://www.npmjs.com/package/postcss-middleware - Repository: https://github.com/jedmao/postcss-middleware - Homepage: https://github.com/jedmao/postcss-middleware#readme - Issues: https://github.com/jedmao/postcss-middleware/issues - npm.io page: https://npm.io/package/postcss-middleware ## Dependencies (7) - [gulp-if](https://npm.io/package/gulp-if.md) ^2.0.2 - [gulp-tap](https://npm.io/package/gulp-tap.md) ^1.0.1 - [vinyl-fs](https://npm.io/package/vinyl-fs.md) ^2.4.4 - [gulp-concat](https://npm.io/package/gulp-concat.md) ^2.6.1 - [gulp-plumber](https://npm.io/package/gulp-plumber.md) ^1.1.0 - [gulp-postcss](https://npm.io/package/gulp-postcss.md) ^7.0.0 - [gulp-sourcemaps](https://npm.io/package/gulp-sourcemaps.md) ^2.4.0 ## Alternatives - [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads - [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads - [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads - [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads - [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads ## Recent versions - 1.1.4 (latest) — 2017-10-31 - 1.1.3 — 2017-01-25 - 1.1.2 — 2016-05-25 - 1.1.1 — 2016-05-20 - 1.1.0 — 2016-05-20 - 1.0.0 — 2015-08-23 - 0.0.8 — 2015-07-17 - 0.0.7 — 2015-07-10 - 0.0.6 — 2015-07-08 - 0.0.5 — 2015-07-08 - 0.0.3 — 2015-07-07 - 0.0.2 — 2015-07-06 - 0.0.1 — 2015-07-05 ## README # postcss-middleware [![NPM version](http://img.shields.io/npm/v/postcss-middleware.svg?style=flat)](https://www.npmjs.org/package/postcss-middleware) [![npm license](http://img.shields.io/npm/l/postcss-middleware.svg?style=flat-square)](https://www.npmjs.org/package/postcss-middleware) [![Travis Build Status](https://img.shields.io/travis/jedmao/postcss-middleware.svg?label=unix)](https://travis-ci.org/jedmao/postcss-middleware) [![AppVeyor Build Status](https://img.shields.io/appveyor/ci/jedmao/postcss-middleware.svg?label=windows)](https://ci.appveyor.com/project/jedmao/postcss-middleware) [![npm](https://nodei.co/npm/postcss-middleware.svg?downloads=true)](https://nodei.co/npm/postcss-middleware/) [PostCSS](https://github.com/postcss/postcss) middleware for [Connect](https://github.com/senchalabs/connect#readme) and [Express][] frameworks. ## Installation ``` $ npm install postcss-middleware ``` ## Usage ### JavaScript ```js var postcssMiddleware = require('postcss-middleware'); ``` ### TypeScript ```ts import * as postcssMiddleware from 'postcss-middleware'; ``` ### Connect ```js const connect = require('connect'); const app = connect(); app.use('/css', postcssMiddleware(/* options */)); ``` ### Express ```js const express = require('express'); const app = express(); app.use('/css', postcssMiddleware(/* options */)); ``` ### Options #### `plugins` Type: `Array` Required: `true` An array of [PostCSS plugins](https://github.com/postcss/postcss#plugins). #### `options` Type: `Object` Required: `false` [PostCSS options](https://github.com/postcss/postcss#options) such as `syntax`, `parser` or `map`. ```js app.use(postcssMiddleware({ plugins: [/* plugins */], options: { parser: require('sugarss'), map: { inline: false } } } }); ``` #### `src` Type: `(request) => string|string[]` Required: `false` Default: `req => path.join(__dirname, req.url)` A callback function that will be provided the [Express][] [app's](http://expressjs.com/4x/api.html#app) [request](http://expressjs.com/4x/api.html#req) object. Use this object to build the file path to the source file(s) you wish to read. The callback can return [a glob string or an array of glob strings](https://github.com/wearefractal/vinyl-fs#srcglobs-opt). All files matched will be [concatenated](https://github.com/wearefractal/gulp-concat) in the [response](http://expressjs.com/4x/api.html#res.send). ```js var path = require('path'); app.use('/css', postcssMiddleware({ src: function(req) { return path.join('styles', req.path); }, plugins: [/* plugins */] }); ``` The above example will match requests to `/css`. If `/css/foo.css` were requested, the middleware would read `/styles/foo.css` in the context of your application. Using a regular expression [route path](http://expressjs.com/guide/routing.html), we can back-reference a capture group and use it as a folder name. ```js var path = require('path'); app.use(/^\/css\/([a-z-]+)\.css$/, postcssMiddleware({ src: function(req) { var folder = req.params[0]; return path.join('styles', folder, '*.css'); }, plugins: [/* plugins */] }); ``` If you were to request `/css/foo-bar.css` in the above example, the middleware would concatenate all CSS files in the `/styles/foo-bar` folder in the response. #### `inlineSourcemaps` Type: `Boolean` Required: `false` Default: `undefined` Generate inlined [sourcemaps](https://github.com/floridoo/gulp-sourcemaps). [Express]: http://expressjs.com/ --- _Source: https://npm.io/package/postcss-middleware · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._