lionelb / cssnext-brunch

# DEPRECATED. Use postcss-brunch instead.

DEPRECATED. Use postcss-brunch instead.

---

cssnext-brunch

Use tomorrow's CSS syntax, today. Via Brunch.

Issues with the output should be reported on cssnext issue tracker.

Install

$ npm install cssnext-brunch

Usage

Add a cssnext section in the plugins section of your brunch config file

plugins:
    cssnext:
      sourcemap: true
      features:
        prefixes:
          browsers:['> 5%', 'last 3 version', 'IE 8']
      import:
        path: 'app/css'

Options are directly passed to cssnext, so checkout cssnext options directly.

Notes

cssnext-brunch is a compile-type plugin, so it's play well optimizer like clean-css-brunch

SourceMaps

For now, sourcemap is inlined in the generated css. If you want to enable cssnext sourcemap, you should disabled brunch default sourcemap.

Also, it seems that minification (via compress option or via another brunch plugin) broke sourcemap support.

Import

By default, brunch concatenates css files. In order to take advantage of postcss-import, you'll need to add _ to filename (* @import "_filename.css"*. You also need to specify import folder in the brunch config. import: "app/css" for example.

Production

When build for production, inlined sourcemap is disabled.

---

Changelog

License

cssnext-brunch's Issues

Add test badge (travis)

Add lint

Example config

Can you provide a more complete example of configuration options? I have installed the plugin and tried various options but none of them are working.

rename repo to brunch-cssnext

To fit other plugin names ?

Add changelog

Add license

Minify breaks calc()

Hi !
I am currently using your Gulp version and it's great.
I encountered a problem with the minification though.

The CSS "calc()" function needs preserved spaces inside, or the browser won't be able to read the calcul. CSSNEXT currently turns "calc(100% + 44px)" into "calc(100%+44px)".

Could you update so it won't break anymore ? :-)

Thank you ! (❁´◡`❁)✲ﾟ

Use brunch's normal sourcemap pipeline

If you can't easily get the non-inlined sourcemap through cssnext's API, see this example for a way to extract it out of the inlined output:

https://github.com/es128/6to5-brunch/blob/395127b1f00f37bf9285eca2552f5cf6f61d7106/index.js

This will make it play nicer with other sourcemap generating plugins.