Input:

td.options {
  text-align: center;

  .link {
    opacity: 0;
  }
}

Error:

ERROR in .//css-loader!.//postcss-loader!./src/scripts/components/users/users.css
Module build failed: TypeError: Cannot read property 'replace' of undefined
at ieOpacityHack (D:\Dev\git\React\react-admin-example\node_modules\cssgrace\lib\index.js:270:31)
at D:\Dev\git\React\react-admin-example\node_modules\cssgrace\lib\index.js:472:5

It would be nice to be able to disable some features. IE hacks for example.

Something like

  postcss: [
    cssgrace({
        ieOpacity: false,
        ieInlineBlock: false
    })
  ],

[email protected] requires a peer of postcss@^4.0.0 but none was installed.

npm version : 3.3.6
nodejs version : 4.2.1
postcss version : ^5.0.10

input:

.foo {
  text-indent: 100%;
}

output:

.foo {
  text-indent: 100%;
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
}

http://caniuse.com/#feat=css-appearance
https://developer.mozilla.org/en-US/docs/Web/CSS/-moz-appearance
http://ued.ctrip.com/webkitcss/prop/appearance.html
http://www.w3cplus.com/css3/changing-appearance-of-element-with-css3.html

Hello,

I'm having an issue with relative paths. In a SCSS partial i'm declaring a background-image as url(../img/bg.jpg), however the plugin searches for this file at the root of the project (/Users/user/Sites/code/project-folder), not relative to the stylesheet path (should be /Users/user/Sites/code/project-folder/src/css - where my CSS is).

Stack trace is as follows:

message: 'ENOENT, no such file or directory \'/Users/user/Sites/code/img/bg.jpg\'',
stack: 'Error: ENOENT, no such file or directory \'/Users/user/Sites/code/img/bg.jpg\'
    at Error (native)
    at Object.fs.openSync (fs.js:500:18)
    at syncFileToBuffer (/Users/user/Sites/code/project-folder/node_modules/cssgrace/node_modules/image-size/lib/index.js:58:23)
    at module.exports (/Users/user/Sites/code/project-folder/node_modules/cssgrace/node_modules/image-size/lib/index.js:100:18)
    at imageSetMixin (/Users/user/Sites/code/project-folder/node_modules/cssgrace/lib/index.js:423:9)
    at /Users/user/Sites/code/project-folder/node_modules/cssgrace/lib/index.js:477:5
    at /Users/user/Sites/code/project-folder/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:88:34
    at /Users/user/Sites/code/project-folder/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:73:26
    at Rule.each (/Users/user/Sites/code/project-folder/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:59:22)
    at Rule.walk (/Users/user/Sites/code/project-folder/node_modules/gulp-postcss/node_modules/postcss/lib/container.js:72:21)'

CSS Grace 考虑实现 CSS aspect-ratio polyfill。

CSS Aspect Ratio Module Level 1 Personal Draft

1. Introduction（介绍）

This section is not normative.
本章节不具有规范叙述。

aspect-ratio 属性用来定义元素宽高比例，可以灵活的解决视频（video），图片等媒体元素的等比缩放问题。

1.1. Overview（概述）

This section is not normative.
本章节不具有规范叙述。

以视频为例，常见的有 16/9，4/3 等常见尺寸，通过 aspect-ratio 属性可以非常容易的设定视频的宽高比。

以下提到的「最小或最大尺寸」是指 min-width/min-height 或 max-width/max-height。

示例1:

当父元素 .foo 宽度或高度改变时，video 始终保持 16/9 的宽高比。

.foo > video {
  aspect-ratio: 16/9;
}

2. The aspect-ratio Property

Name: aspect-ratio
Value: auto | none | <ratio>
Initial: auto
Applies to: block-level elements
Inherited: no
Media: visual
Computed value: same as specified value
Animatable: Yes

auto

auto 值将自动获取元素默认的宽高比。

none

aspect-ratio 不生效，没有效果。

<ratio>

是一个比值，以/分割，/的左右可以有0个或�多个空白符（参见 CSS 空白符定义）。
必须大于 0 ，否则视为语法错误。
如果同时定义了最小或最大尺寸限制，应当以它们为准来计算元素的实际宽高。

示例 2:

设置了宽高比的元素会先继承父元素的宽度，然后使用设置的比例计算高度。

.foo {
  width: 800px;
}
.foo > video {
  width: auto;
  height: auto; /* 800 * 0.75 =  600*/
  aspect-ratio: 4/3; /* 0.75 */
}

height 最终计算值为 600px。

示例 3:

.foo {
  width: 500px;
}
.foo > video {
  width: auto;
  height: auto; /* 500 / 0.5 =  1000*/
  max-height: 500px;
  aspect-ratio: 2/1;
}

优先保证 max-height 的设置，宽度会重新计算：

width = 500 / 0.5 = 1000px

问题描述

在不考虑 HTML Class 用法是否正确的前提下，现在普遍存在如下 HTML 结构：

<span class="icon-foo">1</span>
<span class="other-icon icon-bar">2</span>
<span class="other-icon-baz">3</span>

有如下 CSS，期望结果是 1、2显示红色，3为默认颜色（黑色）。

 [class^="icon-"] {
  color: red;
}

测试（Demo）

1 [class^="icon-"] 的本意是匹配icon-开头的 class，但此时无法匹配2、3两种情况。

2 尝试使用*=属性选择器匹配符：

 [class^="icon-"], 
 [class*="icon-"] {
  color: red;
}

此时却匹配到了第三种情况的 other-icon-baz class（并不是以 icon-开头）。

3 所以，全面的做法是增加 [class*=" icon-"](注意前面有一个空格)

解决方案

CSS Grace 检测如果存在 [class^="icon-"] 则自动增加 [class*=" icon-"]，自己书写很容易遗漏前面的空格。

 [class^="icon-"], 
 [class*=" icon-"] {
  color: red;
}

目前 Safari 和 IE 不支持@media 嵌套语法，但实际上规范是支持该语法的。例如：

Input:

@media (min-width: 36em) {
  @media (max-width: 1200px) {
    .foo {
      font-size: 18px;
    }
  }
}

需要做一次转换：

Output:

@media (min-width: 36em) and (max-width: 1200px) {
    .foo {
      font-size: 18px;
    }
}

考虑以单独的插件方式支持postcss-media-nested

I'm using an svg as a background-image, but cssgrace throws the following error:

'TypeError: invalid svg at Object.calculate (/Users/username/code/project-name/node_modules/image-size/lib/types/svg.js:61:13)
                        at lookup (/Users/username/code/project-name/node_modules/image-size/lib/index.js:27:31)
                        at module.exports (/Users/username/code/project-name/node_modules/image-size/lib/index.js:101:12)
                        at imageSetMixin (/Users/username/code/project-name/node_modules/cssgrace/lib/index.js:422:9)
                        at /Users/username/code/project-name/node_modules/cssgrace/lib/index.js:476:5
                        at /Users/username/code/project-name/node_modules/postcss/lib/container.js:86:34
                        at /Users/username/code/project-name/node_modules/postcss/lib/container.js:71:26
                        at Rule.each (/Users/username/code/project-name/node_modules/postcss/lib/container.js:58:22)
                        at Rule.walk (/Users/username/code/project-name/node_modules/postcss/lib/container.js:70:21)
                        at Rule.walkDecls (/Users/username/code/project-name/node_modules/postcss/lib/container.js:84:25)'

Is this because the plugin doesn't support .SVG files? I'm using an image generated by Illustrator.
If the plugin doesn't support SVG it should skip svg files, I think.

audio, canvas, progress, video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}

这样的CSS代码，会输出为

audio, canvas, progress, video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  *display: inline;
  *zoom: 1;
}

建议在插入hack语句前先检查一下是否已有hack

错误信息：Corrupt JPG, exceeded buffer limits

报错信息

TypeError: value.indexOf is not a function
    at OldValue.check (E:\work\CommonJS\node_modules\autoprefixer\lib\old-value.js:17:17)
    at E:\work\CommonJS\node_modules\autoprefixer\lib\processor.js:198:25
    at E:\work\CommonJS\node_modules\postcss\lib\container.js:86:28
    at E:\work\CommonJS\node_modules\postcss\lib\container.js:73:26
    at Rule.each (E:\work\CommonJS\node_modules\postcss\lib\container.js:60:22)
    at Rule.walk (E:\work\CommonJS\node_modules\postcss\lib\container.js:72:21)
    at E:\work\CommonJS\node_modules\postcss\lib\container.js:75:32
    at Root.each (E:\work\CommonJS\node_modules\postcss\lib\container.js:60:22)
    at Root.walk (E:\work\CommonJS\node_modules\postcss\lib\container.js:72:21)
    at Root.walkDecls (E:\work\CommonJS\node_modules\postcss\lib\container.js:84:25)

gulp配置

function cssPipe(stream) {
    var processors = [
        require("cssgrace"),
        require("autoprefixer")({
            browsers: ["last 3 version", "ie > 8", "Android >= 3", "Safari >= 5.1", "iOS >= 5"]
        }),
    ];
    stream = stream.pipe(require("gulp-postcss")(processors));
    return stream;
}

引发问题的css代码

audio,
canvas,
progress,
video {
  display: inline-block;
}

input:

.foo {
    clip: rect(5px, 40px, 45px, 5px);
}

.foo {
    clip: rect(5px, 40px, 45px, 5px);
    *clip: rect(5px 40px 45px 5px);
}

cssgrace seems to be crashing on the following snippet:

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

Here's the full stack trace:

stream.js:94
      throw er; // Unhandled stream error in pipe.
            ^
TypeError: Cannot call method 'replace' of undefined
    at ieOpacityHack (/toc/node_modules/cssgrace/lib/index.js:268:32)
    at /toc/node_modules/cssgrace/lib/index.js:456:5
    at /toc/node_modules/postcss/lib/container.js:162:24
    at /toc/node_modules/postcss/lib/container.js:132:20
    at Rule.Container.each (/toc/node_modules/postcss/lib/container.js:110:16)
    at Rule.Container.eachInside (/toc/node_modules/postcss/lib/container.js:131:17)
    at Rule.Container.eachDecl (/toc/node_modules/postcss/lib/container.js:160:19)
    at cssgraceRule (/toc/node_modules/cssgrace/lib/index.js:453:8)
    at /toc/node_modules/postcss/lib/container.js:197:22
    at /toc/node_modules/postcss/lib/container.js:132:20

Let me know if you need more info.

Fixed:

http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera

/*
 * There's a bug in Chrome/Safari using overflow:hidden with border-radius. This mask fixes it. 
 * Solution: http://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera/10296258#10296258
 */
.masked {
    position: absolute;
    border-radius: 10px;
    overflow: hidden;
    /* this fixes the overflow:hidden in Chrome */
    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}

或者：

.masked {
  -webkit-mask-image: -webkit-radial-gradient(circle, white, black);
}

If I have any url(data:image/...) in my CSS then CSSgrace fires an error:

[10:09:48] Plumber found unhandled error:
 Error in plugin 'gulp-postcss'
Message:
    ENOENT, no such file or directory 'path\to\css\data:image\svg+xml;base64,...'
Details:
    errno: -4058
    code: ENOENT
    path: path\to\css\data:image\svg+xml;base64,...
    syscall: open

I launch it in Windows and all slashes / replaced to backslashes \, even in data:image/svg.

Cannot use CSSgrace with Zurb Foundation 😢 because of this bug.

I am getting this error when running cssgrace, on the PostCSS 5.0.21

[19:44:21] { [TypeError: Cannot read property 'replace' of undefined] name: 'TypeError', message: 'Cannot read property \'replace\' of undefined', stack: 'TypeError: Cannot read property \'replace\' of undefined\n at ieInlineBlockHack (/home/vagrant/Sites/pagekit/node_modules/cssgrace/lib/index.js:323:36)\n at /home/vagrant/Sites/pagekit/node_modules/cssgrace/lib/index.js:470:5\n at /home/vagrant/Sites/pagekit/node_modules/postcss/lib/container.js:94:28\n at /home/vagrant/Sites/pagekit/node_modules/postcss/lib/container.js:81:26\n at Rule.each (/home/vagrant/Sites/pagekit/node_modules/postcss/lib/container.js:68:22)\n at Rule.walk (/home/vagrant/Sites/pagekit/node_modules/postcss/lib/container.js:80:21)\n at Rule.walkDecls (/home/vagrant/Sites/pagekit/node_modules/postcss/lib/container.js:92:25)\n at cssgraceRule (/home/vagrant/Sites/pagekit/node_modules/cssgrace/lib/index.js:468:8)\n at /home/vagrant/Sites/pagekit/node_modules/postcss/lib/container.js:118:28\n at /home/vagrant/Sites/pagekit/node_modules/postcss/lib/container.js:81:26', fileName: '/home/vagrant/Sites/pagekit/packages/standardtextile/theme-stc/process/css/theme.css', showStack: true, showProperties: true, plugin: 'gulp-postcss' }

The error appears to be with this line:

https://github.com/cssdream/cssgrace/blob/master/lib/index.js#L323

Which is throwing an error when decl.raws.before is "undefined"...

However, undefined is a permitted state for that variable. It should be checked if the variable is undefined.

input:

.foo {
  overflow : auto; /* or overflow-x/y: scroll */
}

output:

.foo {
  overflow : auto;  /* or overflow-x/y: scroll */
  -webkit-overflow-scrolling: touch;
}

Demo: http://codepen.io/yisi/pen/EaMpVV

D:/work/demo_test/js/foundation/foundation/下

--Gruntfile.js
--app1/
----css/
------content.css
----img/
------background.jpg

content.css里
.pic2 {
background: url('../img/background.jpg?1421738406') no-repeat top left;
}

Gruntfile.js里
postcss: {
options: {
processors: [
require('postcss-custom-selector')(),
require('cssgrace'),
]
},
dist: {
src: 'app1/css/*.css'
}
}

运行grunt potcss会出错
Warning: ENOENT, no such file or directory 'D:\work\demo_test\js\foundation\img\pic2.jpg?1421738406' Use --force to continue.

实际的图片路径是D:\work\demo_test\js\foundation\foundation\app1\img\pic2.jpg?1421738406
请问是我Gruntfile.js里路径设置有问题还是其他什么原因

This is can not use!!!

That would made other people able to easily use your postcss plugins like image-set (planned for cssnext MoOx/postcss-cssnext#43).
Are you open to that or should I do this postcss-image-set myself ?

postcss was renewed recently - https://github.com/postcss/postcss/releases/tag/5.0.9
and we see the following:

Container#eachRule is deprecated. Use Container#walkRules instead.
Container#eachDecl is deprecated. Use Container#walkDecls instead.
Node#before is deprecated. Use Node#raws.before

So, can u update it?

background: linear-gradient(to bottom, #ffffff 0%,#e2f4ff 100%);

can be converted to

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2f4ff',GradientType=0 ); /* IE6-9 */

I was wondering if CSS Grace can support this feature.

Use the following test.css to reproduce:

.foo {
  background-image: url("http://www.example.com/image.png");
}

Running results in:

C:\Users\User\Project\node_modules\postcss\lib\lazy-result.js:175
            throw error;
                  ^
Error: ENOENT, no such file or directory 'C:\Users\User\Project\http:\www.example.com\image.png'
    at Error (native)
    at Object.fs.openSync (fs.js:500:18)
    at syncFileToBuffer (C:\Users\User\Project\node_modules\cssgrace\node_modules\image-size\lib\index.js:58:23)
    at module.exports (C:\Users\User\Project\node_modules\cssgrace\node_modules\image-size\lib\index.js:100:18)
    at imageSetMixin (C:\Users\User\Project\node_modules\cssgrace\lib\index.js:423:9)
    at C:\Users\User\Project\node_modules\cssgrace\lib\index.js:477:5
    at C:\Users\User\Project\node_modules\postcss\lib\container.js:119:34
    at C:\Users\User\Project\node_modules\postcss\lib\container.js:104:26
    at Rule.each (C:\Users\User\Project\node_modules\postcss\lib\container.js:91:22)
    at Rule.eachInside (C:\Users\User\Project\node_modules\postcss\lib\container.js:103:21)

Using cssgrace 2.0.2 on Windows 7

按照quick start 流程走下去，安装cssgrace不会成功，希望作者更新下使用说明，毕竟真的不会成功。相信很多第一次都会出现无法找到chokidar模块。
希望文档再清晰一点。

这个是BUG，还是我应该注意，因为以前写的代码都做好了hack，不能在重复检查一次删除重复属性吧！

CSS 中没有选择一个直观语义化的子元素区间的选择器，新增类似 :nth-child-range()的选择器选择一个子元素区间。

<ul>
    <li>Child 1</li>
    <li>Child 2</li>
    <li>Child 3</li>
    <li>Child 4</li>
    <li>Child 5</li>
    <li>Child 6</li>
    <li>Child 7</li>
    <li>Child 8</li>
    <li>Child 9</li>
    <li>Child 10</li>
  </ul>

input:

li:nth-child-range(3, 6){
   color: red;
}

li:nth-of-type-range(8, 9){
   color: blue;
}

output:

li:nth-child(n+3):nth-child(-n+6){
    color: red;
}

li:nth-of-type(n+8):nth-of-type(-n+9) {
    color: blue;
}

第3到第6个 li 将变成红色,
第8到第9个 li 将变成蓝色。

注意：Safari 8 之前有 bug

• https://bugs.webkit.org/show_bug.cgi?id=137032
• http://stackoverflow.com/questions/26032513/ios8-safari-after-a-pushstate-the-nth-child-selectors-not-works

@Justineo 你觉得或者叫 :range-child() 和 :range-of-type() 怎么样？

还有如果是 li:nth-child(n+2):nth-child(-n+9):nth-child(odd) 这样的选择器，缩写用什么语法比较合适？

:range-child(2,9,odd)?

Sass

• https://github.com/W3cplus/Sass-Resources/blob/master/mixins/_quantity-queries.scss
• http://alistapart.com/article/quantity-queries-for-css

I have PostCSS 5 from earlier npm install postcss. When install cssgrace this cause conflict preventing install.

Windows 8.1 x64

如果css这么写

.test{
    background: url(../images/font/blue.png?__sprite) no-repeat;
}

会导致如下错误

no such file or directory 'xxx/application/views/statics/images/font/blue.png?__sprite'

ps:该query为构建工具合并为雪碧图之用

我做了如下修改

//获取css文件中的资源的绝对地址
function getAbsolutePath(sourcePath) {
  return path.resolve(currentFilePath, sourcePath.split("?")[0]);
}

可行。。
@yisibl 不知这是BUG，还是我需要哪些配置可以避免？

原因大概是因为下面位置的数组是空的

不知道什么原因这个base64的地址并没有解析出来

安装postcss-cli和cssgrace，执行postcss.cmd --use postcss-cssnext --use cssgrace -o t.css test.css,报错：

Plugin Error: Cannot find module 'cssgrace'

是不是哪里错了呢？

input:

.foo {
  animation: foo 1s 2s infinite linear alternate both paused;
}

Will out:

.foo {
  animation: foo 1s 2s infinite linear alternate both;
  animation-play-state: paused;
}

当背景设为渐变并含有grba的时候，滤镜解析，starcolor和endcolor相同

PostCSS Plugin Guidelines are mandatory right now. Because all of rules are about ecosystem health.