Awesome

postcss-middleware

<img align="right" width="135" height="95" title="Philosopher’s stone, logo of PostCSS" src="http://postcss.github.io/postcss/logo-leftp.png">

PostCSS middleware for Connect and Express frameworks.

Installation

$ npm install postcss-middleware

Usage

JavaScript

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

TypeScript

import * as postcssMiddleware from 'postcss-middleware';

Connect

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

Express

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

Options

plugins

Type: Array Required: true

An array of PostCSS plugins.

options

Type: Object Required: false

PostCSS options such as syntax, parser or map.

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 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.

inlineSourcemaps

Type: Boolean Required: false Default: undefined

Generate inlined sourcemaps.