diff --git a/CHANGELOG.md b/CHANGELOG.md index b438f96..60b8ab1 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/README-zh.md b/README-zh.md index 0680984..a2d2435 100644 --- a/README-zh.md +++ b/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 ; + @custom-selector = @custom-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) 模块。 diff --git a/README.md b/README.md index 91bd215..b8401e6 100644 --- a/README.md +++ b/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 ; + @custom-selector = @custom-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; } ``` diff --git a/index.js b/index.js index 231b2e0..84dcb4a 100644 --- a/index.js +++ b/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 = (自定义的选择器名称) + 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 } }) - } } }) diff --git a/package.json b/package.json index 36fe717..b08f3d1 100644 --- a/package.json +++ b/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", diff --git a/test/fixtures/extension.css b/test/fixtures/extension.css index 95b234e..d6fbcf7 100644 --- a/test/fixtures/extension.css +++ b/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; } diff --git a/test/fixtures/heading.css b/test/fixtures/heading.css index 5f0a1b5..dbc7695 100644 --- a/test/fixtures/heading.css +++ b/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; } diff --git a/test/fixtures/pseudo.css b/test/fixtures/pseudo.css index 8ab7951..b8feddc 100644 --- a/test/fixtures/pseudo.css +++ b/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; } diff --git a/test/fixtures/some-hyphen-selector.css b/test/fixtures/some-hyphen-selector.css new file mode 100644 index 0000000..c69585e --- /dev/null +++ b/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; +} diff --git a/test/fixtures/some-hyphen-selector.expected.css b/test/fixtures/some-hyphen-selector.expected.css new file mode 100644 index 0000000..f545bd2 --- /dev/null +++ b/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; +} diff --git a/test/index.js b/test/index.js index 2d3c397..34c24ba 100644 --- a/test/index.js +++ b/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' } })