https://github.com/zoubin/browserify-postcss
transform contents using postcss
https://github.com/zoubin/browserify-postcss
Last synced: 10 months ago
JSON representation
transform contents using postcss
- Host: GitHub
- URL: https://github.com/zoubin/browserify-postcss
- Owner: zoubin
- Created: 2015-06-17T09:58:00.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2018-02-11T10:20:36.000Z (over 8 years ago)
- Last Synced: 2025-08-09T02:46:30.702Z (11 months ago)
- Language: JavaScript
- Size: 133 KB
- Stars: 20
- Watchers: 1
- Forks: 9
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: changelog.md
Awesome Lists containing this project
README
# browserify-postcss
[](https://www.npmjs.org/package/browserify-postcss)
[](https://travis-ci.org/zoubin/browserify-postcss)
[](https://david-dm.org/zoubin/browserify-postcss)
[](https://david-dm.org/zoubin/browserify-postcss#info=devDependencies)
A [browserify] transform to work with [postcss].
## Example
The build script:
```javascript
var browserify = require('browserify')
var fs = require('fs')
var b = browserify(__dirname + '/src/entry.js')
b.transform('browserify-postcss', {
// a list of postcss plugins
plugin: [
'postcss-import',
'postcss-advanced-variables',
['postcss-custom-url', [
['inline', { maxSize: 10 }],
['copy', {
assetOutFolder: __dirname + '/static/assets',
baseUrl: 'assets',
name: '[name].[hash]',
}],
]],
],
// basedir where to search plugins
basedir: __dirname + '/src',
// insert a style element to apply the styles
inject: true,
})
b.bundle().pipe(
fs.createWriteStream(to)
)
```
entry.js:
```js
require('./entry.css')
console.log('styles from entry.css are applied')
```
## Options
### plugin
Specify a list of [postcss] plugins to apply.
Type: `String`, `Array`
Default: `null`
### basedir
Specify where to look for plugins.
### postCssOptions
Specify the [options](https://github.com/postcss/postcss/blob/master/docs/api.md#processorprocesscss-opts)
for the [postcss] processor.
The `from` and `to` fields will be set to the css file path by default.
The `to` option is used to calculated `url()` in the final styles.
However, if your [postcss] plugin does not need it,
don't bother to specify.
### inject
Specify how to use the styles:
If `true`, styles are applied immediately.
If `false`, `require('style.css')` will return the string representation of the styles.
### extensions
A list of file extensions to identify styles.
Type: `Array`
Default: `['.css', '.scss', '.sass']`
## Watch
Imported files will **NOT** be watched when used with [watchify].
## Related
* [reduce-css]: bundle css files without `require`ing them in js.
[browserify]: https://github.com/substack/node-browserify
[watchify]: https://github.com/substack/watchify
[postcss]: https://github.com/postcss/postcss
[reduce-css]: https://github.com/reducejs/reduce-css