postcssify

Browserify transform for postcss

Usage no npm install needed!

<script type="module">
  import postcssify from 'https://cdn.skypack.dev/postcssify';
</script>

README

postcssify

Build Status js-standard-style npm version Coverage Status

Browserify plugin for postcss

Install

npm install postcssify --save-dev

Usage

entry.js

require('some.css')

$ browserify entry.js -o build.js -t postcssify --css bundle.css

CSS merge order

When the files are merged, postcssify preserves the order one would normally expect from require. If the required javascript would execute first in node, that CSS appears first in the bundle. For example, consider the following files, all living in the same directory.

entry.js

require('main.css')
require('component.js')
require('finalTouches.css')

component.js

require('component.css')

bundle.css

/* css from main.css */
/* css from component.css */
/* css from finalTouches.css */
/* Base64-encoded source map */

Node.js

If you want to run the same code in node, you'll need to tell it to ignore .css files. One way of doing this is using the enhance-require package (hacky but makes it easy).

const enhanceRequire = require('enhance-require')
enhanceRequire() // overwrites require
require('entry.js') // required styles will be ignored
enhanceRequire.restore() // restores require