shinnn / broccoli-clean-css

A Broccoli plugin to minify CSS with clean-css

broccoli-clean-css

A Broccoli plugin to minify CSS with clean-css

a {
  color: #ff0000;
}

b {
  /* nothing */
}

↓

a{color:red}

Installation

Use npm.

npm install --save-dev broccoli-clean-css

API

const BroccoliCleanCss = require('broccoli-clean-css');

class BroccoliCleanCss(node [, options])

node: string (directory path) or Object (Broccoli node)
options: Object (clean-css constructor options)

//Brocfile.js
const BroccoliCleanCss = require('broccoli-clean-css');

module.exports = new BroccoliCleanCss('path/to/styles');

There are some differences from the original clean-css:

• returnPromise option defaults to true and cannot be disabled.
• All problems that clean-css considers as warnings, for example broken CSS syntax, are regarded as errors.

License

Copyright (c) 2014 - 2019 Watanabe Shinnosuke

Licensed under the MIT License.

broccoli-clean-css's Issues

`relativeTo` and `root` option

Currently relativeTo option and root option are relative to the source tree.

For example,

var cleanCSS = require('broccoli-clean-css');

var tree = cleanCSS('src');
module.exports = tree;

In such a case, relativeTo option is automatically set to src.

I think this default behavior is correct. The problem occurs when relativeTo or root are set by a user.

For example, when a user want to set relativeTo option to src/nested, how should this plugin set the option?

1. Requires the user to specify relativeTo option to src/nested (doesn't consider the default path)
2. Requires the user to specify relativeTo option to nested (relative to the default path)

Which is the most suitable way?

@jakubpawlowicz I want to hear your opinion.

Should rebase default to false?

I realize you may be hesitant to override defaults provided by the clean-css upstream, but I'm wondering if it would actually make sense for this plugin to default the rebase option to false.

I ran the following code in my Brocfile.js, expecting that minifying the CSS would preserve its semantics:

if (production) {
  outputNode = new BroccoliCleanCss(outputNode);
}

This almost worked, except that clean-css rewrote all image references in styles/foo.css as if they were relative to the outputNode root rather than the styles/ directory.

I'm not entirely sure why clean-css defaults its rebase feature to true, but perhaps it might make sense for this plugin to default it to false?

I'm happy to submit a pull request if you think that this is a reasonable change.

This change would probably warrant a version bump to 3.0.0, since it breaks the default behavior.

Minification 'breaking' certain sass files?

I am not sure if this is an issue in this repo or Ember-CLI. I am using Ember-CLI and local css works fine but prod is broken when css is minified. My app.scss file below:

div.md {
  @import "components/materializecss";
}

div.found {
  @import "foundation";
}

This nesting allows separate areas of the app to be exclusively MD or Found styles. However, after minification none of the styles work correctly.

Update clean-css to 3.0

It was released yesterday and here are upgrade instructions: https://github.com/jakubpawlowicz/clean-css#how-to-upgrade-clean-css-from-2x-to-3x

Support sourceMaps

clean-css has started implementing source maps on the f/source-maps branch. I think we should implement this in the plugin too.

I have already started some work on this, and I will update as soon as I have something that's useable.

ReferenceError: Promise is not defined

Hi there

You broke the hole world with this commit 9e560a5

I get ReferenceError: Promise is not defined on new builds using version @1.1.0, with the version @1.0.0, all was fine

since we reference ^1.0.0 in our packages.json, new build started to fails since you released 1.1.0
it is always a best practice to raise the major version of the module if it introduces breaking changes

info
node version: v0.10.30

Exclude files from minification

I am using ember-cli 2.18.1 and would like to exclude some files from the CSS minification with the following options:

minifyCSS: {
			enabled: true,
			sourceMap: true,
			options: {
				exclude: [ "**/filexy.css" ]
			}
		},

Apparently an option "exclude" is not available in broccoli-clean-css.
This would be very handy.

In contrast the JS minification has an option to exclude files:

minifyJS: {
			enabled: true,
			sourceMap: true,
			options: {
				exclude: [ "**/filexy.js" ]
			}
		},

Provide a way to not use the source directory for `relativeTo`

@shinnn In old versions of broccoli-clean-css relativeTo can be set to anything. However in newer versions it is always relative to the source directory.

Libraries that use the old behaviour are blocked from upgrading because of this (ember-cli/ember-cli-preprocess-registry#6)

Can we get some way to bypass this forced rebasing?

windows CI

https://ci.appveyor.com/project/ShinnosukeWatanabe/broccoli-clean-css

i dont believe explicit paths will work in windows: https://github.com/shinnn/broccoli-clean-css/blob/master/package.json#L11 node_modules/.bin/istanbul maybe there is a trick?

A quick fix, would be to disable coverage for windows, and let the posix suite handle that.

Breaking API change

It appears between 1.0.0 and 1.1.0 the options.strict, which would throw if there was an error and strict was truthy (false by default), was removed:
https://github.com/shinnn/broccoli-clean-css/blob/v1.0.0/index.js#L42-L44

This results in builds failing since they started pulling in newer versions of the lib, see: ember-cli/ember-cli-preprocess-registry#8

Would you be willing to accept a PR to bring it back for 1.x and in 2.x revisit removing it to respect semver?

Thanks, and great plugin 👍

output file as XXXXX.min.css

Hi!
Is there any explanation why you set the file extension only as css: https://github.com/shinnn/broccoli-clean-css/blob/master/index.js#L23 ?

I'm using this package with ember-cli and I'm trying to create the output file as name.min.css and with that restriction I couldn't.

Did I miss anything?
Thanks!

switch to broccoli-persistent-filter

It's much faster the broccoli-filter, we have plans to upstream the work. @joliss is thinkin on how to elegantly incorporate some of the ideas. At which time, we will re-merge the two projects.

Given projects such as: https://gist.github.com/workmanw/fdf85772fb8e61bfbeb8
BPF will easily reduce the 86ms rebuild time to 5-10ms (or better)

If no one beats me to it, later this week I will try to make the update myself.

Some examples doing similar upgrade (maybe i get lucky and someone beats me to it):

• https://github.com/rwjblue/broccoli-string-replace/pull/4/files
• rwjblue/broccoli-jshint@d272e64
• https://github.com/toranb/broccoli-ember-hbs-template-compiler/pull/13/files

Breaks background color

When using the following:
background-color: #ffffffe6;

With minification broccoli-clean-css seems to turn this into:
background-color: #fffe6;

Which Chrome reports as an invalid property.

Tested using latest Ember build with clean project.