PostCSS middleware for Connect and Express frameworks.

$ npm install postcss-middleware

var postcssMiddleware = require('postcss-middleware');

import * as postcssMiddleware from 'postcss-middleware';

const connect = require('connect');
const app = connect();
app.use('/css', postcssMiddleware(/* options */));

const express = require('express');
const app = express();
app.use('/css', postcssMiddleware(/* options */));

Type: Array Required: true

An array of PostCSS plugins.

Type: Object Required: false

PostCSS options such as syntax, parser or map.

app.use(postcssMiddleware({
	plugins: [/* plugins */],
	options: {
		parser: require('sugarss'),
		map: { inline: false }
	}
}
});

Type: (request) => string|string[] Required: false Default: req => path.join(__dirname, req.url)

A callback function that will be provided the Express app's request 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. All files matched will be concatenated in the response.

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, we can back-reference a capture group and use it as a folder name.

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.

Type: Boolean Required: false Default: undefined

Generate inlined sourcemaps.