use postcss-selector-parser

- postcss-selector-parser prevents various issues with selectors breaking
- updated dev dependencies
- switched to github workflows for CI
- switched to tabs for source code a11y

Author: romainmenke

plugins/postcss-selector-not/.babelrc

@@ -1,11 +1,11 @@
 {
-  "presets": [
-    ["@babel/preset-env", {
-      "targets": {
-        "node": 10
-      }
-    }]
-  ],
-  "plugins": [
-  ]
+	"presets": [
+		["@babel/preset-env", {
+			"targets": {
+				"node": 10
+			}
+		}]
+	],
+	"plugins": [
+	]
 }

plugins/postcss-selector-not/.editorconfig

@@ -5,6 +5,9 @@ end_of_line = lf
 charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
+indent_style = tab
+
+[*.yml]
 indent_style = space
 indent_size = 2
 

plugins/postcss-selector-not/.eslintignore

@@ -6,7 +6,7 @@ parserOptions:
   sourceType: "module"
 
 rules:
-  indent: [2, 2] # 2 spaces indentation
+  indent: [2, "tab"] # 2 tab indentation
   max-len: [2, 80, 4]
   quotes: [2, "double"]
   semi: [2, "never"]

plugins/postcss-selector-not/.eslintrc.yml

@@ -0,0 +1,28 @@
+name: test
+on:
+  push:
+    branches:
+    - 'master'
+  pull_request:
+
+concurrency:
+  group: branch-node-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      fail-fast: false
+      matrix:
+        os: [ubuntu-latest]
+        node: [10, 12, 14, 18]
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node }}
+
+      - run: yarn install
+      - run: yarn test

plugins/postcss-selector-not/.github/workflows/test.yml

@@ -1,3 +1,8 @@
+# Unreleased (TODO: update this before release)
+
+- Fixed: doesn't consider attribute selectors ([#23](https://github.com/postcss/postcss-selector-not/issues/23))
+- Fixed: unexpected results when `:not` is not a pseudo class function ([#28](https://github.com/postcss/postcss-selector-not/issues/28))
+
 # 5.0.0 - 2021-01-31
 
 - Added: Support for PostCSS v8.

plugins/postcss-selector-not/.travis.yml

@@ -20,14 +20,14 @@
     "dist"
   ],
   "dependencies": {
-    "balanced-match": "^1.0.0"
+    "postcss-selector-parser": "^6.0.10"
   },
   "peerDependencies": {
     "postcss": "^8.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.11.6",
     "@babel/cli": "^7.11.6",
+    "@babel/core": "^7.11.6",
     "@babel/preset-env": "^7.11.5",
     "@babel/register": "^7.11.5",
     "eslint": "^7.9.0",

plugins/postcss-selector-not/CHANGELOG.md

@@ -1,68 +1,74 @@
-import list from "postcss/lib/list"
+import parser from "postcss-selector-parser"
 
-import balancedMatch from "balanced-match"
+function cleanupWhitespace(node) {
+	if (node.spaces) {
+		node.spaces.after = ""
+		node.spaces.before = ""
+	}
 
-function explodeSelector(pseudoClass, selector) {
-  const position = locatePseudoClass(selector, pseudoClass)
-  if (selector && position > -1) {
-    const pre = selector.slice(0, position)
-    const matches = balancedMatch("(", ")", selector.slice(position))
+	if (node.nodes && node.nodes.length > 0) {
+		if (node.nodes[0] && node.nodes[0].spaces) {
+			node.nodes[0].spaces.before = ""
+		}
 
-    if (!matches) {
-      return selector
-    }
-
-    const bodySelectors = matches.body
-      ? list
-        .comma(matches.body)
-        .map(s => explodeSelector(pseudoClass, s))
-        .join(`)${pseudoClass}(`)
-      : ""
-    const postSelectors = matches.post
-      ? explodeSelector(pseudoClass, matches.post)
-      : ""
-
-    return `${pre}${pseudoClass}(${bodySelectors})${postSelectors}`
-  }
-  return selector
+		if (
+			node.nodes[node.nodes.length - 1] &&
+			node.nodes[node.nodes.length - 1].spaces
+		) {
+			node.nodes[node.nodes.length - 1].spaces.after = ""
+		}
+	}
 }
 
-const patternCache = {}
+const creator = () => {
+	return {
+		postcssPlugin: "postcss-selector-not",
+		Rule: (rule, {result}) => {
+			if (rule.selector && rule.selector.indexOf(":not(") > -1) {
+				try {
+					const selectorAST = parser().astSync(rule.selector)
+					selectorAST.walkPseudos((pseudo) => {
+						if (pseudo.value !== ":not") {
+							return
+						}
 
-function locatePseudoClass(selector, pseudoClass) {
-  patternCache[pseudoClass] = patternCache[pseudoClass]
-    || new RegExp(`([^\\\\]|^)${pseudoClass}`)
+						if (!pseudo.nodes || pseudo.nodes.length < 2) {
+							return
+						}
 
-  // The regex is used to ensure that selectors with
-  // escaped colons in them are treated properly
-  // Ex: .foo\:not-bar is a valid CSS selector
-  // But it is not a reference to a pseudo selector
-  const pattern = patternCache[pseudoClass]
-  const position = selector.search(pattern)
+						const replacements = []
 
-  if (position === -1) {
-    return -1
-  }
+						pseudo.nodes.forEach((node) => {
+							cleanupWhitespace(node)
 
-  // The offset returned by the regex may be off by one because
-  // of it including the negated character match in the position
-  return position + selector.slice(position).indexOf(pseudoClass)
-}
+							// Wrap each child selector in it's own `:not()`
+							const newPseudo = parser.pseudo({
+								value: ":not",
+								nodes: [node],
+							})
+							replacements.push(newPseudo)
+						})
+
+						// Replace the pseudo with the list of new pseudos
+						pseudo.replaceWith(...replacements)
+					})
 
-function explodeSelectors(pseudoClass) {
-  return () => {
-    return {
-      postcssPlugin: "postcss-selector-not",
-      Rule: (rule) => {
-        if (rule.selector && rule.selector.indexOf(pseudoClass) > -1) {
-          rule.selector = explodeSelector(pseudoClass, rule.selector)
-        }
-      },
-    }
-  }
+					const modifiedSelector = selectorAST.toString()
+					if (modifiedSelector !== rule.selector) {
+						rule.selector = modifiedSelector
+					}
+				}
+				catch (_) {
+					rule.warn(
+						result,
+						`Failed to parse selector "${rule.selector}"`
+					)
+				}
+			}
+		},
+	}
 }
 
-const creator = explodeSelectors(":not")
 creator.postcss = true
 
 export default creator