army8735 / more Goto Github PK

Minify CSS using more-css & gulp:

• https://github.com/ben-eb/gulp-more-css

More-Css and Less plugin for gulp:

• https://github.com/code-fury/gulp-more-less

Minify CSS using more-css for grunt:

• https://github.com/dancek/grunt-more-css

images安装太卡了，还存在环境和io.js的问题。

取图片尺寸只需要轻量级的工具。

目前preImport、preVar和preFn分开，会造成后处理的覆盖前面出现的。
如var和fn重名时，如var出现在fn后面，应该覆盖它，但preFn在preVar后处理，导致反覆盖。

判断冲突时，当两个选择器都是以节点结尾，且不相同名字时，无冲突。
中间存在的节点也可如此。

@Keyword和真正的样式集交叉出现。
压缩中rebuild需处理，将head提取在前，样式作为list在后。

To offer feature parity with clean-css. This would be useful for integrating with gulp plugins.

Could you translate documentation and comments in the code to english?
It is very hard to use more-css and contribute to it by now.

@media不能提前置于顶部，其内部选择器和外部一样有优先级次序。

在出现优先级冲突时会进行检查不合并：

.a{margin:0}.b{margin-top:1}.c{margin:0}

.a和.c无法合并，除非.b拥有!important。
其实如果.b的margin-top值是0也可以合并，现在有点难做，暂时记录。
另外是选择器也可以检查：在出现优先级冲突时会进行检查不合并：

.a{margin:0}.a .b{margin-top:1}.c{margin:0}

如果中间冲突的选择器为前者的子选择器，则绝对不会出现冲突。

不仅仅是中文

On IE8, space is mandatory after url(...)

not supported on IE8:

...{background:url(bg.png)15em 6em no-repeat fixed #fff}

supported on IE8:

...{background:url(bg.png) 15em 6em no-repeat fixed #fff}

For me it seems that the css3 property will-change is not supported.
If i'm right, can you please add support for the will-change poperty?

目前只有2种：排除和包括。

增加1种：包括且隔离作用域。

另外，增强suffix设置，目前排除时即便设置了suffix，还是被还原为.css，因为排除后@import的文件必须为css。在构建时有需要包括时拿到的文件结尾会不一致。在增加1种后随之解决。

变量和方法，中文更易读

Hello! I writing tool for minificators testing. It downloads several web sites, compresses them and does a screenshots to make sure that nothing been broken. And I get errors in all files.

minified = moreCss.compress(source, true);

`TypeError: Path must be a string. Received undefined

at assertPath (path.js:7:11)

at Object.dirname (path.js:1326:5)

at new CleanCSS (/home/deeech/Projects/git/css-minificator-tests/node_modules/more-css/node_modules/clean-css/lib/clean.js:55:130)

at Compress.compress (/home/deeech/Projects/git/css-minificator-tests/node_modules/more-css/build/compress.js:34:18)

at exports.default (/home/deeech/Projects/git/css-minificator-tests/node_modules/more-css/build/compress.js:11:49)

at Function.More.compress (/home/deeech/Projects/git/css-minificator-tests/node_modules/more-css/build/More.js:430:12)

at Object.more-css (/home/deeech/Projects/git/css-minificator-tests/lib/minifiers.js:67:30)

at Object.exports.minify.err [as minify] (/home/deeech/Projects/git/css-minificator-tests/lib/minifiers.js:86:35)

at promise.then (/home/deeech/Projects/git/css-minificator-tests/lib/processPage.js:48:24)

at _fulfilled (/home/deeech/Projects/git/css-minificator-tests/node_modules/q/q.js:834:54)

at self.promiseDispatch.done (/home/deeech/Projects/git/css-minificator-tests/node_modules/q/q.js:863:30)

at Promise.promise.promiseDispatch (/home/deeech/Projects/git/css-minificator-tests/node_modules/q/q.js:796:13)

at /home/deeech/Projects/git/css-minificator-tests/node_modules/q/q.js:604:44

at runSingle (/home/deeech/Projects/git/css-minificator-tests/node_modules/q/q.js:137:13)

at flush (/home/deeech/Projects/git/css-minificator-tests/node_modules/q/q.js:125:13)

at _combinedTickCallback (internal/process/next_tick.js:67:7)

at process._tickCallback (internal/process/next_tick.js:98:9)`

Is this minificator error or I just don't use it correctly?

正常：display:flex;
解析后：
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: -moz-box;
display: flex;

变量默认值 !defalut

比如有个公共组件 x.scss：

$width: 100% !default;

.x {
  width: $width;
}

然后你自己的代码 a.scss：

$width: 960px;
@import "x";

编译后：

.x {
  width: 960px;
}

b.scss：

@import "x";

编译后：

.x {
  width: 100%;
}

继承伪类

.a:hover {
  color: red;
}
.b {
  @extend .a:hover;
}

万能的 &

.a {
  color: red;

  .b:not(&) {
    color: blue;
  }
}

编译后：

.a {
  color: red;
}
.b:not(.a) {
  color: blue;
}

a {
  background: red;
  &:hover {
    background: white;
  }
  span {
    color: white;
    @at-root #{selector-replace(&, 'a', 'a:hover')} {
      color: red;
    }
  }
}

编译后：

a {
  background: red;
}
a:hover {
  background: white;
}
a span {
  color: white;
}
a:hover span {
  color: red;
}

Map

@if @each 等

选择器合并及冲突计算clean-css现在已经做了，直接使用即可。

提取公共项的矩阵压缩保留，其未实现。

在计算最大面积时，向右扩充矩阵的边算法，如果存在同列的行数过多的情况，向右扩充的过程会出现指数递增，右边每增加一条列，原始存在的就要都增加此边，于是不断*2。向下扩充同。

foundition.css直接卡死。

again, to achieve feature parity with clean-css

貌似还是有需求的

将一些需要加-webkit-和-moz-的特性提出，为其增加自动前缀，如此只需写标准写法即可。

[Error: SyntaxError: missing 22|8|16|4|20|7 line 9 col 35566 look lang]

Can you please explain me this error? How can I handle with it? How can I find the error location?

My code:

gulp.task('morecss', function() {
var moreCSS = require('gulp-more-css');
return gulp.src('postcss/*.css')
    .pipe(moreCSS())
    .pipe(gulp.dest('./morecss'));
});

Thanks.

传统的预编译器无外乎都按照@import后的先后顺序，主要原因在于这些家伙将@import的文件按顺序导入合并为一个文件，这和css顺序规范一致，但缺陷有二：

• 没将子文件拆分。
• 造成很不好的习惯头部@import作为变量专门存放
• 相互之间变量冲突

无拆分目前通过变通方法做到文件关系对应；
第二个则十分不妥，文件拆分的本意是模块化区分，文件之间相互解耦独立，目前做法既不符合模块化的概念又耦合，如果是写commonjs时我将所有变量作为一个模块申明然后放在头部首先导入，让其它模块引用不知作何感想。

之前more的设计是层级式变量，即变量申明后作用域为本文件以及子文件，而父文件无访问权限。避免冲突。
同时，增加配置项，想要全局方位可以config。这样一个项目的全局变量、所有项目的全局变量全可以一次性配置。

如今config增强了，可以用传入一个css文件作为config。层级式变量是否要保留或是其它还没想好。又或是有更好的设计？

底层接口，一个方法，用以替换@import的url

引用Tree.js递归处理。
运算累死exprstmt完全忽略空白符，换行除外。

a{font-family:~"arail,宋体"}

~""为unbox语法。

fn的param、vardecl的赋值都是去除引号，而style的value中则多了split(',')的逻辑，考虑是否保持一致