Giter Site home page Giter Site logo

shinnn / broccoli-clean-css Goto Github PK

View Code? Open in Web Editor NEW
12.0 2.0 7.0 160 KB

A Broccoli plugin to minify CSS with clean-css

License: MIT License

JavaScript 100.00%
broccoli nodejs broccoli-plugin clean-css css stylesheet optimization javascript minification

broccoli-clean-css's People

Contributors

kanongil avatar msranade avatar shinnn avatar thoov avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

broccoli-clean-css's Issues

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.

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.

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 ๐Ÿ‘

`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.

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):

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" ]
			}
		},

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.

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.

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.