Added: :any-link pseudo class support

Author: MoOx

CHANGELOG.md

@@ -4,8 +4,11 @@ Previously they were working with **and without** pseudo syntax ':'
 Now you must use `@custom-selector :--{name}` syntax instead of `@custom-selector --{name}`
 The support of syntax without : and the warning message will be remove in the next major release
 ([#97](https://github.com/cssnext/cssnext/issues/97))
-- Added: `plugins` option that allows you to pipe your own transformations ([#118](https://github.com/cssnext/cssnext/issues/118))
-- Added: `messages` option that allows you to see messages of transformations ([#88](https://github.com/cssnext/cssnext/issues/88))
+- Added: `plugins` option that allows you to pipe your own transformations
+([#118](https://github.com/cssnext/cssnext/issues/118))
+- Added: `messages` option that allows you to see messages of transformations
+([#88](https://github.com/cssnext/cssnext/issues/88))
+- Added: `:any-link` pseudo class support
 
 # 1.6.0 - 2015-06-02
 

CONTRIBUTING.md

@@ -20,15 +20,18 @@ $ git checkout -b fix.bug423
 
 1. Add test files (input + expected output) in [`src/__tests__/fixtures/features`](src/__tests__/features)
 - If the feature can affect some others, update [`src/__tests__/fixtures/cases/example.css`](src/__tests__/cases/example.css) to test integration with other features
-- Run test, & check tests are broken (otherwise feature is useless)
+
 - Choose a pretty simple and clear name (that match the specs)
 - Add the feature in the [README features list](#features) (title, link to spec, link of the plugin, short desc)
 - Add the feature in the [README node.js options list](#features-default-all-features) (camelCaseName)
 - Add the dependency in the [`package.json`](package.json)
 - Add the feature in the source (in [`index.js`](index.js)), in the appropriate place (order matter)
+For now, use a empty function instead of the right module
+- Run test, & check tests are broken (otherwise feature is useless)
+Now, call the right plugin
 - Run test and be happy
 - Add feature in [the docs](docs/content)
-- Add feature on [the playground](https://github.com/cssnext/playground) example
+- Add feature on [the playground](docs/content/playground.html) example
 
 
 ### Edit messages styles

docs/content/features.md

@@ -251,6 +251,21 @@ h1 {
 |
 [Plugin documentation](https://github.com/robwierzbowski/node-pixrem)
 
+## `:any-link` pseudo-class
+
+Allows you to use `:any-link` pseudo class.
+
+```css
+nav :any-link {
+  background-color: yellow;
+}
+```
+
+[Specification](http://dev.w3.org/csswg/selectors/#any-link-pseudo)
+|
+[Plugin documentation](https://github.com/jonathantneal/postcss-pseudo-class-any-link)
+
+
 ## `:matches` pseudo-class
 
 Allows you to use `:matches()`.

docs/content/playground.html

@@ -44,7 +44,7 @@
 }
 a:hover { color: gray(255, 50%) }
 a:active { color: rebeccapurple }
-a:visited { color: color(var(--highlightColor) blackness(+20%)) }
+a:any-link { color: color(var(--highlightColor) blackness(+20%)) }
 
 /* font stuff */
 h2 {

package.json

@@ -50,6 +50,7 @@
     "postcss-log-warnings": "^0.3.1",
     "postcss-media-minmax": "^1.1.0",
     "postcss-messages": "^0.2.2",
+    "postcss-pseudo-class-any-link": "^0.2.1",
     "postcss-pseudoelements": "^2.1.1",
     "postcss-selector-matches": "^1.0.1",
     "postcss-selector-not": "^1.0.1",

src/__tests__/fixtures/cases/example.actual.css

@@ -36,7 +36,7 @@ a {
 }
 a:hover { color: #FFFFFF; color: rgba(255, 255, 255, 0.5) }
 a:active { color: rgb(102, 51, 153) }
-a:visited { color: rgb(89, 142, 153) }
+a:link,a:visited { color: rgb(89, 142, 153) }
 
 /* font stuff */
 h2 {

src/__tests__/fixtures/cases/example.css

@@ -34,7 +34,7 @@ a {
 }
 a:hover { color: gray(255, 50%) }
 a:active { color: rebeccapurple }
-a:visited { color: color(var(--highlightColor) blackness(+20%)) }
+a:any-link { color: color(var(--highlightColor) blackness(+20%)) }
 
 /* font stuff */
 h2 {

src/__tests__/fixtures/cases/example.expected.css

@@ -36,7 +36,7 @@ a {
 }
 a:hover { color: #FFFFFF; color: rgba(255, 255, 255, 0.5) }
 a:active { color: rgb(102, 51, 153) }
-a:visited { color: rgb(89, 142, 153) }
+a:link,a:visited { color: rgb(89, 142, 153) }
 
 /* font stuff */
 h2 {

src/__tests__/fixtures/features/pseudo-class-any-link.css

@@ -0,0 +1,3 @@
+nav :any-link > span {
+  background-color: yellow;
+}

src/__tests__/fixtures/features/pseudo-class-any-link.expected.css

@@ -0,0 +1,3 @@
+nav :link > span,nav :visited > span {
+  background-color: yellow;
+}