Postcss 8 (#35)

* update to postcss 8

This is just a straightforward version bump, using the `Root:` style
postcss 8 plugin. I tried to switch to using `Declaration:`, but we get
in an infinite replacement loop. I could remedy it with some extra
checks in the `transition` transform, but I'm not confident that that
were all the possible infinite loop cases, so I went back to this
single-pass style.

* up rollup

* ci: bump matrix

* update engines

* remove Root func and use Declaration

Co-authored-by: Renée Kooi <[email protected]>

Author: romainmenke

.rollup.js

@@ -1,15 +1,16 @@
-import babel from 'rollup-plugin-babel';
+import babel from '@rollup/plugin-babel';
 
 export default {
 	input: 'src/index.js',
 	output: [
-		{ file: 'index.cjs.js', format: 'cjs', sourcemap: true, strict: false },
-		{ file: 'index.esm.mjs', format: 'esm', sourcemap: true, strict: false }
+		{ file: 'index.cjs.js', format: 'cjs', sourcemap: true, exports: 'default' },
+		{ file: 'index.esm.mjs', format: 'esm', sourcemap: true, exports: 'default' }
 	],
 	plugins: [
 		babel({
+			babelHelpers: 'bundled',
 			presets: [
-				['@babel/env', { modules: false, targets: { node: 8 } }]
+				['@babel/env', { modules: false, targets: { node: 10 } }]
 			]
 		})
 	]

.tape.js

@@ -65,6 +65,12 @@ module.exports = {
 	'size': {
 		message: 'supports logical "size" properties'
 	},
+	'size:preserve': {
+		message: 'supports logical "size" properties with { preserve: true }',
+		options: {
+			preserve: true
+		}
+	},
 	'text-align': {
 		message: 'supports logical "text-align" properties'
 	},
@@ -82,5 +88,12 @@ module.exports = {
 		options: {
 			dir: 'ltr'
 		}
+	},
+	'transition:preserve:ltr': {
+		message: 'supports logical "transition" properties with { dir: "ltr", preserve: true }',
+		options: {
+			dir: 'ltr',
+			preserve: true
+		}
 	}
 };

.travis.yml

@@ -3,7 +3,9 @@
 language: node_js
 
 node_js:
-  - 8
+  - 10
+  - 12
+  - 14
 
 install:
   - npm install --ignore-scripts

package.json

@@ -19,27 +19,26 @@
     "build": "rollup --config .rollup.js --silent",
     "prepublishOnly": "npm test",
     "pretest:tape": "npm run build",
-    "test": "npm run test:ec && npm run test:js && npm run test:tape",
-    "test:ec": "echint --ignore index.*.js test",
+    "test": "npm run test:js && npm run test:tape",
     "test:js": "eslint src/{*,**/*}.js --cache --ignore-path .gitignore --quiet",
     "test:tape": "postcss-tape"
   },
   "engines": {
-    "node": ">=8.0.0"
+    "node": ">=10.0.0"
   },
-  "dependencies": {
-    "postcss": "^7.0.17"
+  "peerDependencies": {
+    "postcss": "^8.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.4.5",
-    "@babel/preset-env": "^7.4.5",
+    "@babel/core": "^7.13.8",
+    "@babel/preset-env": "^7.13.9",
+    "@rollup/plugin-babel": "^5.3.0",
     "babel-eslint": "^10.0.1",
-    "echint": "^4.0.2",
-    "eslint": "^5.16.0",
-    "postcss-tape": "^5.0.0",
+    "eslint": "^7.21.0",
+    "postcss": "^8.2.7",
+    "postcss-tape": "^6.0.0",
     "pre-commit": "^1.2.2",
-    "rollup": "^1.14.6",
-    "rollup-plugin-babel": "^4.3.2"
+    "rollup": "^2.40.0"
   },
   "eslintConfig": {
     "env": {

src/index.js

@@ -1,7 +1,3 @@
-// tooling
-import postcss from 'postcss';
-
-// internal tooling
 import transformBorder from './lib/transform-border';
 import transformBorderRadius from './lib/transform-border-radius';
 import transformDirectionalShorthands from './lib/transform-directional-shorthands';
@@ -59,45 +55,32 @@ const transformsRegExp = new RegExp(`^(${Object.keys(transforms).join('|')})$`,
 const unsplitPropRegExp = /^(border-block|border-block-end|border-block-start|border-inline|border-inline-end|border-inline-start)$/i;
 
 // plugin
-export default postcss.plugin('postcss-logical-properties', opts => {
+function postcssLogicalProperties(opts) {
 	opts = Object(opts);
 
 	const preserve = Boolean(opts.preserve);
 	const dir = !preserve && typeof opts.dir === 'string'
 		? /^rtl$/i.test(opts.dir)
 			? 'rtl'
-		: 'ltr'
-	: false;
-
-	return root => {
-		root.walkDecls(transformsRegExp, decl => {
-			const parent = decl.parent;
-			const values = unsplitPropRegExp.test(decl.prop) ? [decl.value] : splitBySpace(decl.value, true);
-			const prop = decl.prop.toLowerCase();
-
-			const replacer = transforms[prop](decl, values, dir);
-
-			if (!replacer) {
-				return;
-			}
-
-			[].concat(replacer).forEach(replacement => {
-				if (replacement.type === 'rule') {
-					parent.before(replacement);
-				} else {
-					decl.before(replacement);
+			: 'ltr'
+		: false;
+
+	return {
+		postcssPlugin: 'postcss-logical-properties',
+		Declaration: (decl) => {
+			if (transformsRegExp.test(decl.prop)) {
+				const parent = decl.parent;
+				const values = unsplitPropRegExp.test(decl.prop) ? [decl.value] : splitBySpace(decl.value, true);
+				const prop = decl.prop.toLowerCase();
+
+				transforms[prop](decl, values, dir, preserve);
+				if (!parent.nodes.length) {
+					parent.remove();
 				}
-			});
-
-			if (preserve) {
-				return;
 			}
-
-			decl.remove();
-
-			if (!parent.nodes.length) {
-				parent.remove();
-			}
-		});
+		}
 	};
-});
+}
+postcssLogicalProperties.postcss = true;
+
+export default postcssLogicalProperties;

src/lib/clone-decl.js

@@ -1,7 +1,7 @@
 import matchSide from './match-side';
 import matchInsetPrefix from './match-inset-prefix';
 
-export default (decl, suffix, value) => decl.clone({
+export default (decl, suffix, value) => decl.cloneBefore({
 	prop: `${decl.prop.replace(matchSide, '$1')}${suffix}`.replace(matchInsetPrefix, ''),
 	value
 });

src/lib/clone-rule.js

@@ -1,11 +1,11 @@
 import postcss from 'postcss';
 
 export default (decl, dir) => {
-	const rule = Object(decl.parent).type === 'rule' ? decl.parent.clone({
+	const rule = Object(decl.parent).type === 'rule' ? decl.parent.cloneBefore({
 		raws: {}
 	}).removeAll() : postcss.rule({ selector: '&' });
 
-	rule.selectors = rule.selectors.map(selector => `${selector}:dir(${dir})`);
+	rule.assign({'selectors': rule.selectors.map(selector => `${selector}:dir(${dir})`)})
 
 	return rule;
 };

src/lib/transform-border-radius.js

@@ -4,25 +4,36 @@ const logicalRadii = /^(border-)(end-end|end-start|start-end|start-start)(-radiu
 const ltrRadii = { 'end-end': 'bottom-right', 'end-start': 'bottom-left', 'start-end': 'top-right', 'start-start': 'top-left' };
 const rtlRadii = { 'end-end': 'bottom-left', 'end-start': 'bottom-right', 'start-end': 'top-left', 'start-start': 'top-right' };
 
-export default (decl, values, dir) => {
-	const ltrDecl = decl.clone({
-		prop: decl.prop.replace(logicalRadii, ($, prefix, direction, suffix) => `${prefix}${ltrRadii[direction]}${suffix}`)
-	});
-
+export default (decl, values, dir, preserve) => {
 	if (dir === 'ltr') {
-		return ltrDecl;
+		lDecl(decl);
+		clean(decl, preserve);
+		return;
 	}
 
-	const rtlDecl = decl.clone({
-		prop: decl.prop.replace(logicalRadii, ($, prefix, direction, suffix) => `${prefix}${rtlRadii[direction]}${suffix}`)
-	});
-
 	if (dir === 'rtl') {
-		return rtlDecl;
+		rDecl(decl);
+		clean(decl, preserve);
+		return;
 	}
 
-	return [
-		cloneRule(decl, 'ltr').append(ltrDecl),
-		cloneRule(decl, 'rtl').append(rtlDecl)
-	];
+	cloneRule(decl, 'ltr').append(lDecl(decl));
+	cloneRule(decl, 'rtl').append(rDecl(decl));
+	clean(decl, preserve);
 };
+
+function lDecl(decl) {
+	return decl.cloneBefore({
+		prop: decl.prop.replace(logicalRadii, ($, prefix, direction, suffix) => `${prefix}${ltrRadii[direction]}${suffix}`)
+	});
+}
+
+function rDecl(decl) {
+	return decl.cloneBefore({
+		prop: decl.prop.replace(logicalRadii, ($, prefix, direction, suffix) => `${prefix}${rtlRadii[direction]}${suffix}`)
+	});
+}
+
+function clean(decl, preserve) {
+	if (!preserve) decl.remove();
+}