Fix babel config issues (#258)

* Update Babel

* Fix Babel fail if Babel config is present. Most likely fixes #247 and #250

* Use non-mutable operation

Author: hudochenkov

.eslintignore

@@ -1,3 +1,3 @@
-test/fixtures/*
+**/fixtures/**
 coverage/**
-.nyc_output/**
+.nyc_output/**

.prettierignore

@@ -1,3 +1,3 @@
-test/fixtures/*
+**/fixtures/**
 coverage/**
 .nyc_output/**

extract.js

@@ -144,7 +144,15 @@ function loadBabelOpts(opts) {
 
 		if (Array.isArray(fileOpts[key]) && Array.isArray(opts.parserOpts[key])) {
 			// combine arrays for plugins
-			opts.parserOpts[key] = opts.parserOpts[key].concat(fileOpts[key]);
+			// plugins in fileOpts could be string, array or object
+			for (const plugin of fileOpts[key]) {
+				const option =
+					Array.isArray(plugin) || typeof plugin === 'string'
+						? plugin
+						: [plugin.key, plugin.options];
+
+				opts.parserOpts[key] = [...opts.parserOpts[key], option];
+			}
 		} else {
 			// because some options need to be passed to parser also
 			opts.parserOpts[key] = fileOpts[key];

package-lock.json

@@ -67,11 +67,12 @@
       "!**/.{prettier,eslint,mocha}rc.{js,cjs}"
     ],
     "testMatch": [
-      "**/test/*.js"
+      "**/test/*.js",
+      "**/test/**/*.test.js"
     ]
   },
   "dependencies": {
-    "@babel/core": ">=7.15.5"
+    "@babel/core": "^7.17.9"
   },
   "devDependencies": {
     "@stylelint/prettier-config": "^2.0.0",

package.json

@@ -0,0 +1,3 @@
+{
+	"plugins": ["./babel-plugin-my-plugin.js"]
+}

test/babel-config/.babelrc.json

@@ -0,0 +1,29 @@
+'use strict';
+
+const fs = require('fs');
+const syntax = require('../../');
+
+it('works with babel config present', () => {
+	const file = require.resolve('./fixtures/styled-components');
+	let code = fs.readFileSync(file);
+
+	const document = syntax.parse(code, {
+		from: file,
+	});
+
+	code = code.toString();
+	expect(document.toString()).toBe(code);
+	expect(document.source).toHaveProperty('lang', 'jsx');
+
+	expect(document.nodes).toHaveLength(1);
+	expect(document.first.nodes).toHaveLength(8);
+
+	expect(document.first.nodes[0]).toHaveProperty('type', 'comment');
+	expect(document.first.nodes[1]).toHaveProperty('type', 'decl');
+	expect(document.first.nodes[2]).toHaveProperty('type', 'decl');
+	expect(document.first.nodes[3]).toHaveProperty('type', 'decl');
+	expect(document.first.nodes[4]).toHaveProperty('type', 'decl');
+	expect(document.first.nodes[5]).toHaveProperty('type', 'decl');
+	expect(document.first.nodes[6]).toHaveProperty('type', 'decl');
+	expect(document.first.nodes[7]).toHaveProperty('type', 'decl');
+});

test/babel-config/babel-config.test.js

@@ -0,0 +1,9 @@
+'use strict';
+
+module.exports = function () {
+	return {
+		visitor: {
+			Identifier() {},
+		},
+	};
+};

test/babel-config/babel-plugin-my-plugin.js

@@ -0,0 +1,13 @@
+"use strict";
+const styled = require("styled-components");
+const Button = styled.button`
+/* Adapt the colours based on primary prop */
+background: ${props => props.primary ? "palevioletred" : "white"};
+color: ${props => props.primary ? "white" : "palevioletred"};
+
+font-size: 1em;
+margin: 1em;
+padding: 0.25em 1em;
+border: 2px solid palevioletred;
+border-radius: 3px;
+`;

test/babel-config/fixtures/styled-components.js

@@ -147,11 +147,13 @@
 								},
 								"start": {
 									"line": 13,
-									"column": 2
+									"column": 2,
+									"index": 251
 								},
 								"end": {
 									"line": 13,
-									"column": 18
+									"column": 18,
+									"index": 267
 								}
 							}
 						}
@@ -162,11 +164,13 @@
 						},
 						"start": {
 							"line": 12,
-							"column": 1
+							"column": 1,
+							"index": 247
 						},
 						"end": {
 							"line": 14,
-							"column": 2
+							"column": 2,
+							"index": 271
 						}
 					}
 				}
@@ -222,11 +226,13 @@
 								},
 								"start": {
 									"line": 15,
-									"column": 13
+									"column": 13,
+									"index": 286
 								},
 								"end": {
 									"line": 15,
-									"column": 29
+									"column": 29,
+									"index": 302
 								}
 							}
 						}
@@ -237,11 +243,13 @@
 						},
 						"start": {
 							"line": 15,
-							"column": 11
+							"column": 11,
+							"index": 284
 						},
 						"end": {
 							"line": 15,
-							"column": 31
+							"column": 31,
+							"index": 304
 						}
 					}
 				}
@@ -340,11 +348,13 @@
 								},
 								"start": {
 									"line": 27,
-									"column": 4
+									"column": 4,
+									"index": 476
 								},
 								"end": {
 									"line": 27,
-									"column": 23
+									"column": 23,
+									"index": 495
 								}
 							}
 						}
@@ -355,11 +365,13 @@
 						},
 						"start": {
 							"line": 26,
-							"column": 14
+							"column": 14,
+							"index": 470
 						},
 						"end": {
 							"line": 28,
-							"column": 4
+							"column": 4,
+							"index": 501
 						}
 					}
 				}