Added: plugin now expose replaceRuleSelector to make it easy to reuse in some others plugins (like postcss-custom-selectors) (1.2.0)

- Fixed: indentation adjustment doesn't contain useless new lines
- Fixed: transformation doesn't add some useless whitespace

Author: MoOx

CHANGELOG.md

@@ -1,3 +1,10 @@
+# 1.2.0 - 2015-07-14
+
+- Fixed: indentation adjustment doesn't contain useless new lines
+- Fixed: transformation doesn't add some useless whitespace
+- Added: plugin now expose `replaceRuleSelector` to make it easy to reuse in
+some others plugins (like `postcss-custom-selectors`).
+
 # 1.1.2 - 2015-06-29
 
 - Fixed: support pseudo-element that might be collapsed to :matches()

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-selector-matches",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "PostCSS plugin to transform :matches() W3C CSS pseudo class to more compatible CSS selectors",
   "keywords": [
     "postcss",

src/index.js

@@ -3,9 +3,15 @@ import list from "postcss/lib/list"
 
 import balancedMatch from "balanced-match"
 
-function explodeSelector(pseudoClass, selector, options) {
+const pseudoClass = ":matches"
+
+function explodeSelector(selector, options) {
   if (selector && selector.indexOf(pseudoClass) > -1) {
     let newSelectors = []
+    const preWhitespaceMatches = selector.match(/^\s+/)
+    const preWhitespace = preWhitespaceMatches
+      ? preWhitespaceMatches[0]
+      : ""
     const selectorPart = list.comma(selector)
     selectorPart.forEach(part => {
       const position = part.indexOf(pseudoClass)
@@ -18,27 +24,23 @@ function explodeSelector(pseudoClass, selector, options) {
           .comma(matches.body)
           .reduce((acc, s) => [
             ...acc,
-            ...explodeSelector(pseudoClass, s, options),
+            ...explodeSelector(s, options),
           ], [])
         : [body]
 
       const postSelectors = matches && matches.post
-        ? explodeSelector(pseudoClass, matches.post, options)
+        ? explodeSelector(matches.post, options)
         : []
 
       let newParts
       if (postSelectors.length === 0) {
-        newParts = bodySelectors.map((s) => pre + s)
+        newParts = bodySelectors.map((s) => preWhitespace + pre + s)
       }
       else {
-        const postWhitespaceMatches = matches.post.match(/^\s+/)
-        const postWhitespace = postWhitespaceMatches
-          ? postWhitespaceMatches[0]
-          : ""
         newParts = []
         postSelectors.forEach(postS => {
           bodySelectors.forEach(s => {
-            newParts.push(pre + s + postWhitespace + postS)
+            newParts.push(pre + s + postS)
           })
         })
       }
@@ -53,20 +55,36 @@ function explodeSelector(pseudoClass, selector, options) {
   return [selector]
 }
 
-function explodeSelectors(pseudoClass) {
-  return (options = {}) => {
-    return (css) => {
-      css.eachRule(rule => {
-        if (rule.selector && rule.selector.indexOf(pseudoClass) > -1) {
-          rule.selector = explodeSelector(pseudoClass, rule.selector, options)
-            .join("," + (options.lineBreak ? "\n" + rule.before : " "))
-        }
-      })
-    }
+function replaceRuleSelector(rule, options) {
+  const indentation = rule.before
+    ? rule.before.split("\n").pop()
+    : ""
+  return (
+    explodeSelector(rule.selector, options)
+      .join("," + (options.lineBreak ? "\n" + indentation : " "))
+  )
+
+}
+
+function explodeSelectors(options = {}) {
+  return (css) => {
+    css.eachRule(rule => {
+      if (rule.selector && rule.selector.indexOf(pseudoClass) > -1) {
+        rule.selector = replaceRuleSelector(rule, options)
+      }
+    })
   }
+
 }
 
-export default postcss.plugin(
+const plugin = postcss.plugin(
   "postcss-selector-matches",
-  explodeSelectors(":matches")
+  explodeSelectors
 )
+
+// expose for postcss-custom-selectors
+export {replaceRuleSelector}
+// old school fallback
+plugin.replaceRuleSelector = replaceRuleSelector
+
+export default plugin

test/index.js

@@ -1,13 +1,19 @@
 import tape from "tape"
 
 import postcss from "postcss"
-import selectorMatches from "../src/index.js"
+import plugin, {replaceRuleSelector} from "../src"
 
 function transform(css, options = {}) {
-  return postcss(selectorMatches(options)).process(css).css
+  return postcss(plugin(options)).process(css).css
 }
 
 tape("postcss-selector-matches", t => {
+  t.ok(
+    typeof replaceRuleSelector === "function" &&
+      typeof plugin.replaceRuleSelector === "function",
+    "expose 'replaceRuleSelector' function (for postcss-custom-selectors)"
+  )
+
   t.equal(
     transform("body {}"),
     "body {}",
@@ -89,6 +95,12 @@ tape("postcss-selector-matches", t => {
     "should add line break if asked too, and respect indentation"
   )
 
+  t.equal(
+    transform("\n  .foo:matches(:nth-child(-n+2), .bar) {}", {lineBreak: true}),
+    "\n  .foo:nth-child(-n+2),\n  .foo.bar {}",
+    "should add line break if asked too, and respect indentation even with \n"
+  )
+
   t.equal(
     transform(`
 button:matches(:hover, :active),
@@ -104,5 +116,19 @@ button:hover, button:active, .button:hover, .button:active {}`,
     "should work with something after :matches()"
   )
 
+  t.equal(
+    transform(`article :matches(h1, h2, h3) + p {}`),
+    `article h1 + p, article h2 + p, article h3 + p {}`,
+    "should works correctly with adjacent selectors"
+  )
+
+  t.equal(
+    transform(`article :matches(h1, h2, h3) + p {}`, {lineBreak: true}),
+    `article h1 + p,
+article h2 + p,
+article h3 + p {}`,
+    "should works correctly with adjacent selectors and line break"
+  )
+
   t.end()
 })