No longer support :: or -- to defined a custom selectors and fixed csstools#14

Author: yisibl

CHANGELOG.md

@@ -1,11 +1,17 @@
+# 2.0.0 - 2015-05-29
+
+* x Remove: no longer support `::` or `--` to defined a custom selectors, we must use the `:--` to defined it.
+
+* - Fixed: two or more consecutive hyphens in selector outputs is "undefined".
+
 # 1.1.1 - 2015-04-06
 
-- Fixed: add support for multilines definition
+* - Fixed: add support for multilines definition
 
 # 1.1.0 - 2014-12-06
 
-- Added: "lineBreak" option
+* - Added: "lineBreak" option
 
 # 1.0.0 - 2014-12-06
 
-✨ First release
+* First release

README-zh.md

@@ -43,9 +43,9 @@ var output = postcss(selector())
 input.css：
 
 ```css
-@custom-selector --heading h1, h2, h3, h4, h5, h6;
+@custom-selector :--heading h1, h2, h3, h4, h5, h6;
 
-article --heading + p { 
+article :--heading + p { 
   margin-top: 0;
 }
 ```
@@ -65,17 +65,13 @@ article h6 + p {
 
 ## CSS 语法
 
-    @custom-selector = @custom-selector <extension-name> <selector>;
+    @custom-selector = @custom-selector :<extension-name> <selector>;
 
 
 ## 如何使用
 
-### 伪元素/伪类
+自定义选择器是一个伪类，所以必须使用 `:--`来定义。
 
-你可以使用 
-
-* `:` 自定义一个伪类。
-* `::`自定义一个伪元素。
 
 例如，模拟一个 [:any-link](http://dev.w3.org/csswg/selectors/#the-any-link-pseudo) 选择器：
 
@@ -99,20 +95,22 @@ a:visited {
   color: blue;
 }
 ```
+
 ### 多个选择器
 
-`@custom-selector` 类似 CSS [`:matches()`](http://dev.w3.org/csswg/selectors-4/#matches) （[`-moz-any()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:any)/[`-webkit-any()`](http://css-tricks.com/almanac/selectors/m/matches/)）选择器，但是目前**不支持**在同一个选择器中调用多个自定义选择器，例如：
+`@custom-selector` 目前**不支持**在同一个选择器中调用多个自定义选择器，例如：
 
 示例3：
 
 ```css
-@custom-selector --heading h1, h2, h3, h4, h5, h6;
+@custom-selector :--heading h1, h2, h3, h4, h5, h6;
 @custom-selector :--any-link :link, :visited;
 
-.demo --heading, a:--any-link { 
+.demo :--heading, a:--any-link { 
   font-size: 32px;
 }
 ```
+
 将会输出错误的 CSS 代码。
 
 ```css
@@ -121,11 +119,13 @@ a:visited {
 .demo h3,
 .demo h4,
 .demo h5,
-.demo h6,undefined { 
+.demo h6,:link,
+:visited { 
   font-size: 32px;
 }
 ```
 
+
 ### Node Watch
 
 依赖 [chokidar](https://github.com/paulmillr/chokidar) 模块。

README.md

@@ -43,9 +43,9 @@ var output = postcss(selector())
 input.css：
 
 ```css
-@custom-selector --heading h1, h2, h3, h4, h5, h6;
+@custom-selector :--heading h1, h2, h3, h4, h5, h6;
 
-article --heading + p { 
+article :--heading + p { 
   margin-top: 0;
 }
 ```
@@ -65,17 +65,12 @@ article h6 + p {
 
 ## CSS syntax
 
-    @custom-selector = @custom-selector <extension-name> <selector>;
+    @custom-selector = @custom-selector :<extension-name> <selector>;
 
 
 ## How to use
 
-### Pseudo-element/Pseudo-class
-
-You can use 
-
-* `:` to customise a class.
-* `::`to customise a Pseudo-element.
+The custom selector is a pseudo-class, so we must use the `:--` to defined it.
 
 For example to simulate [:any-link](http://dev.w3.org/csswg/selectors/#the-any-link-pseudo) selector：
 
@@ -99,20 +94,22 @@ a:visited {
   color: blue;
 }
 ```
+
 ### Multiple selectors
 
-`@custom-selector` similar to CSS [`:matches()`](http://dev.w3.org/csswg/selectors-4/#matches)([`-moz-any()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:any)/[`-webkit-any()`](http://css-tricks.com/almanac/selectors/m/matches/))selector,but it **doesn’t support** call multiple custom selector in the same selector, e.g.
+`@custom-selector` it **doesn’t support** call multiple custom selector in the same selector, e.g.
 
 Example 3:
 
 ```css
-@custom-selector --heading h1, h2, h3, h4, h5, h6;
+@custom-selector :--heading h1, h2, h3, h4, h5, h6;
 @custom-selector :--any-link :link, :visited;
 
 .demo --heading, a:--any-link { 
   font-size: 32px;
 }
 ```
+
 This will throw an error CSS code.
 
 ```css
@@ -121,7 +118,8 @@ This will throw an error CSS code.
 .demo h3,
 .demo h4,
 .demo h5,
-.demo h6,undefined { 
+.demo h6,:link,
+:visited  { 
   font-size: 32px;
 }
 ```

index.js

@@ -1,9 +1,9 @@
 /**
  * 匹配自定义选择器
- * --foo, :--foo, ::--foo 三种类型
+ * :--foo
  * 注意：CSS 选择器区分大小写
  */
-var re_CUSTOM_SELECTOR = /([^,]*?)((?::|::)?(?:--[\w-]+))([^,]*)/g
+var re_CUSTOM_SELECTOR = /([^,]*?)(:-{2,}[\w-]+)([^,]*)/g
 
 /**
  * 暴露插件
@@ -58,16 +58,18 @@ function customSelector(options) {
       for (var prop in customSelectors) {
         if (rule.selector.indexOf(prop) >= 0) {
           customSelector = customSelectors[prop]
-
           // $2 = <extension-name> （自定义的选择器名称）
+
           rule.selector = rule.selector.replace(re_CUSTOM_SELECTOR, function($0, $1, $2, $3) {
-            if ($2 == prop) {
+            if ($2 === prop) {
               return customSelector.split(",").map(function(selector) {
                 return $1 + selector.trim() + $3
               }).join("," + line_break)
+            } else if ($2 !== prop){
+              console.log("Warning: The selector '" + $2 + "' is undefined in CSS!")
+              return $2
             }
           })
-
         }
       }
     })

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-custom-selectors",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "description": "PostCSS plugin to transform W3C CSS Extensions(Custom Selectors) to more compatible CSS",
   "keywords": [
     "css",

test/fixtures/extension.css

@@ -1,10 +1,10 @@
 @custom-selector :--any .foo, .bar;
-@custom-selector --foo .baz;
+@custom-selector :--foo .baz;
 
 :--any h1 {
   margin-top: 16px;
 }
 
-main --foo + p {
+main :--foo + p {
   margin-top: 16px;
 }

test/fixtures/heading.css

@@ -1,5 +1,5 @@
-@custom-selector --heading h1, h2, h3, h4, h5, h6;
+@custom-selector :--heading h1, h2, h3, h4, h5, h6;
 
-article --heading + p {
+article :--heading + p {
   margin-top: 0;
 }

test/fixtures/pseudo.css

@@ -1,5 +1,5 @@
-@custom-selector ::--pseudo ::before, ::after;
+@custom-selector :--pseudo ::before, ::after;
 
-.foo > a::--pseudo img {
+.foo > a:--pseudo img {
   display: block;
 }

test/fixtures/some-hyphen-selector.css

@@ -0,0 +1,10 @@
+@custom-selector :--foo h1, h2, h3;
+@custom-selector :--ba-----r h4, h5, h6;
+
+.fo--oo > :--foo {
+  margin: auto;
+}
+
+:--ba-----r:hover .ba--z {
+  display: block;
+}

test/fixtures/some-hyphen-selector.expected.css

@@ -0,0 +1,11 @@
+.fo--oo > h1,
+.fo--oo > h2,
+.fo--oo > h3 {
+  margin: auto;
+}
+
+h4:hover .ba--z,
+h5:hover .ba--z,
+h6:hover .ba--z {
+  display: block;
+}

test/index.js

@@ -4,6 +4,7 @@ var test = require("tape")
 
 var postcss = require("postcss")
 var plugin = require("..")
+var matches = require("postcss-selector-matches")
 
 function filename(name) { return "test/" + name + ".css" }
 function read(name) { return fs.readFileSync(name, "utf8") }
@@ -12,21 +13,24 @@ function compareFixtures(t, name, msg, opts, postcssOpts) {
   postcssOpts = postcssOpts || {}
   postcssOpts.from = filename("fixtures/" + name)
   opts = opts || {}
-  var actual = postcss().use(plugin(opts)).process(read(postcssOpts.from), postcssOpts).css
+  var actual = postcss()
+  .use(plugin(opts))
+  .process(read(postcssOpts.from), postcssOpts).css
   var expected = read(filename("fixtures/" + name + ".expected"))
   fs.writeFile(filename("fixtures/" + name + ".actual"), actual)
   t.equal(actual.trim(), expected.trim(), msg)
 }
 
 test("@custom-selector", function(t) {
-  compareFixtures(t, "heading", "should transform custom selector")
-  compareFixtures(t, "pseudo", "should transform custom selector")
-  compareFixtures(t, "multiline", "should transform custom selector")
+  compareFixtures(t, "heading", "should transform heading")
+  compareFixtures(t, "pseudo", "should transform pseudo")
+  compareFixtures(t, "multiline", "should transform multiline")
+  compareFixtures(t, "some-hyphen-selector", "should transform some-hyphen-selector")
 
-  compareFixtures(t, "extension", "local extensions", {
+  compareFixtures(t, "extension", "should transform local extensions", {
     extensions: {
       ':--any' : 'section, article, aside, nav',
-      '--foo': 'input[type="text"] > section, #nav .bar'
+      ':--foo': 'input[type="text"] > section, #nav .bar'
     }
   })