5.1.1

Author: jonathantneal

.rollup.js

@@ -3,8 +3,8 @@ import babel from 'rollup-plugin-babel';
 export default {
 	input: 'index.js',
 	output: [
-		{ file: 'index.cjs.js', format: 'cjs' },
-		{ file: 'index.es.mjs', format: 'es' }
+		{ file: 'index.cjs.js', format: 'cjs', sourcemap: true },
+		{ file: 'index.es.mjs', format: 'es', sourcemap: true }
 	],
 	plugins: [
 		babel({

.tape.js

@@ -9,6 +9,9 @@ module.exports = {
 				preserve: true
 			}
 		},
+		'safety': {
+			message: 'supports safe tag ordering (.foo:--h1 becomes h1.foo instead of .fooh1)'
+		},
 		'basic:import': {
 			message: 'supports { importFrom: { customSelectors: { ... } } } usage',
 			options: {

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changes to PostCSS Custom Selectors
 
+### 5.1.1 (September 18, 2018)
+
+- Fixed: Selectors like `.foo:--h1` become `h1.foo` instead of `.fooh1`
+
 ### 5.1.0 (September 12, 2018)
 
 - Added: New `exportTo` function to specify where to export custom selectors

lib/transform-selectors-by-custom-selectors.js

@@ -35,6 +35,8 @@ function transformSelector(selector, customSelectors) {
 
 				const retranspiledSelectors = transformSelector(selectorClone, customSelectors);
 
+				adjustNodesBySelectorEnds(selectorClone.nodes, Number(index));
+
 				if (retranspiledSelectors.length) {
 					transpiledSelectors.push(...retranspiledSelectors);
 				} else {
@@ -50,3 +52,36 @@ function transformSelector(selector, customSelectors) {
 
 	return transpiledSelectors;
 }
+
+// match selectors by difficult-to-separate ends
+const withoutSelectorStartMatch = /^(tag|universal)$/;
+const withoutSelectorEndMatch = /^(class|id|pseudo|tag|universal)$/;
+
+const isWithoutSelectorStart = node => withoutSelectorStartMatch.test(Object(node).type);
+const isWithoutSelectorEnd = node => withoutSelectorEndMatch.test(Object(node).type);
+
+// adjust nodes by selector ends (so that .class:--h1 becomes h1.class rather than .classh1)
+const adjustNodesBySelectorEnds = (nodes, index) => {
+	if (index && isWithoutSelectorStart(nodes[index]) && isWithoutSelectorEnd(nodes[index - 1])) {
+		let safeIndex = index - 1;
+
+		while (safeIndex && isWithoutSelectorEnd(nodes[safeIndex])) {
+			--safeIndex;
+		}
+
+		if (safeIndex < index) {
+			const node = nodes.splice(index, 1)[0];
+
+			nodes.splice(safeIndex, 0, node);
+
+			nodes[safeIndex].spaces.before = nodes[safeIndex + 1].spaces.before;
+			nodes[safeIndex + 1].spaces.before = '';
+
+			if (nodes[index]) {
+				nodes[index].spaces.after = nodes[safeIndex].spaces.after;
+				nodes[safeIndex].spaces.after = '';
+			}
+		}
+	}
+};
+

package.json

@@ -1,6 +1,6 @@
 {
   "name": "postcss-custom-selectors",
-  "version": "5.1.0",
+  "version": "5.1.1",
   "description": "Use Custom Selectors in CSS",
   "author": "Jonathan Neal <jonathantneal@hotmail.com>",
   "contributors": [
@@ -15,7 +15,9 @@
   "module": "index.es.mjs",
   "files": [
     "index.cjs.js",
-    "index.es.mjs"
+    "index.cjs.js.map",
+    "index.es.mjs",
+    "index.es.mjs.map"
   ],
   "scripts": {
     "prepublishOnly": "npm test",
@@ -32,15 +34,15 @@
     "postcss-selector-parser": "^5.0.0-rc.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.0.1",
+    "@babel/core": "^7.1.0",
     "@babel/plugin-syntax-dynamic-import": "^7.0.0",
-    "@babel/preset-env": "^7.0.0",
+    "@babel/preset-env": "^7.1.0",
     "babel-eslint": "^9.0.0",
-    "eslint": "^5.5.0",
+    "eslint": "^5.6.0",
     "eslint-config-dev": "^2.0.0",
     "postcss-tape": "^2.2.0",
     "pre-commit": "^1.2.2",
-    "rollup": "^0.65.2",
+    "rollup": "^0.66.0",
     "rollup-plugin-babel": "^4.0.3"
   },
   "eslintConfig": {