{"library":"postcss-middleware","title":"PostCSS Middleware for Express/Connect","description":"This package provides a middleware function to integrate PostCSS processing into web servers built with Connect or Express. It enables on-the-fly compilation of CSS files using a configurable array of PostCSS plugins, allowing developers to leverage modern CSS features and optimizations directly within their server setup. The current stable version is 1.1.4. While its core functionality remains robust, the project appears to be in a maintenance state with infrequent updates, with the last commit dating back over two years. Its primary differentiator is its direct integration as a server-side middleware, offering dynamic CSS processing without requiring a separate build step during development, which can be useful for rapid prototyping or specific server-rendered scenarios. It requires PostCSS plugins to be explicitly passed as an array, offering full flexibility in defining the CSS processing pipeline.","language":"javascript","status":"maintenance","last_verified":"Thu Apr 23","install":{"commands":["npm install postcss-middleware"],"cli":null},"imports":["const postcssMiddleware = require('postcss-middleware');","import * as postcssMiddleware from 'postcss-middleware';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import express from 'express';\nimport * as postcssMiddleware from 'postcss-middleware';\nimport autoprefixer from 'autoprefixer';\nimport path from 'path';\n\n// Ensure you have a 'public/styles' directory with 'app.css'\n// Example content for public/styles/app.css:\n/*\nbody {\n display: flex;\n color: blue;\n}\n*/\n\nconst app = express();\nconst port = 3000;\n\n// Serve static files from the 'public' directory\napp.use(express.static(path.join(__dirname, 'public')));\n\napp.use('/css', postcssMiddleware({\n plugins: [\n autoprefixer({\n overrideBrowserslist: ['last 2 versions', '> 1%']\n })\n ],\n src: function(req) {\n // Resolve the CSS file path relative to the 'public/styles' directory\n // For a request like /css/app.css, it will look for public/styles/app.css\n const filePath = path.join(__dirname, 'public', 'styles', req.path.replace('/css/', ''));\n console.log(`[postcss-middleware] Request for ${req.url}, resolving to ${filePath}`);\n return filePath;\n },\n options: {\n map: { inline: true } // Generate inline sourcemaps for debugging in browsers\n }\n}));\n\napp.get('/', (req, res) => {\n res.send(`\n \n \n \n \n \n PostCSS Middleware Example\n \n \n \n

Hello from Express with PostCSS!

\n

This paragraph should be styled with Autoprefixer if you inspect its computed styles.

\n

Check the network tab for 'app.css' and its source map.

\n \n \n `);\n});\n\napp.listen(port, () => {\n console.log(`Server listening on http://localhost:${port}`);\n console.log('Access the example at http://localhost:3000');\n});\n","lang":"typescript","description":"This example sets up an Express server that uses `postcss-middleware` to dynamically process CSS files with Autoprefixer. It demonstrates basic server setup, middleware configuration, and a simple HTML page linking to the processed CSS. It expects a CSS file in `public/styles/app.css` to be processed and served on demand.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}