feat: support custom config (#45)

README.md

@@ -250,3 +250,19 @@ the template (i.e. leave it untouched and won't process it).
 
 You can then use a `// postcss-lit-disable-next-line` comment to silence the
 warning.
+
+## Custom babel options
+
+You may customise the babel options via your `package.json`:
+
+```json
+{
+  "postcss-lit": {
+    "babelOptions": {
+    }
+  }
+}
+```
+
+The available options are listed
+[here](https://babeljs.io/docs/babel-parser#options).

package.json

@@ -44,6 +44,7 @@
   "dependencies": {
     "@babel/generator": "^7.16.5",
     "@babel/parser": "^7.16.2",
-    "@babel/traverse": "^7.16.0"
+    "@babel/traverse": "^7.16.0",
+    "lilconfig": "^2.0.6"
   }
 }

src/parse.ts

@@ -12,6 +12,9 @@ import {default as traverse, NodePath} from '@babel/traverse';
 import {TaggedTemplateExpression} from '@babel/types';
 import {createPlaceholder, hasDisableComment} from './util.js';
 import {locationCorrectionWalker} from './locationCorrection.js';
+import {getUserConfig} from './userConfig.js';
+
+const configKey = 'postcss-lit';
 
 /**
  * Parses CSS from within tagged template literals in a JavaScript document
@@ -25,14 +28,10 @@ export const parse: Parser<Root | Document> = (
 ): Root | Document => {
   const doc = new Document();
   const sourceAsString = source.toString();
+  const userConfig = getUserConfig(configKey);
+
   const ast = babelParse(sourceAsString, {
-    sourceType: 'unambiguous',
-    plugins: [
-      'typescript',
-      ['decorators', {decoratorsBeforeExport: true}],
-      'jsx'
-    ],
-    ranges: true
+    ...userConfig.babelOptions
   });
   const extractedStyles = new Set<TaggedTemplateExpression>();
 

src/test/parse_test.ts

@@ -1,3 +1,4 @@
+import {cwd, chdir} from 'process';
 import {Root, Rule, Declaration, Comment, AtRule} from 'postcss';
 import {assert} from 'chai';
 import {createTestAst} from './util.js';
@@ -381,4 +382,24 @@ describe('parse', () => {
 
     assert.equal(ast.nodes.length, 0);
   });
+
+  it('should respect custom config', () => {
+    const currentDir = cwd();
+
+    chdir('./test/fixtures/custom-config');
+
+    try {
+      createTestAst(`
+        css\`
+          .foo { color: hotpink; }
+        \`;
+        const x = (<div></div>);
+      `);
+      assert.fail();
+    } catch (err) {
+      assert.equal((err as Error).name, 'SyntaxError');
+    } finally {
+      chdir(currentDir);
+    }
+  });
 });

src/userConfig.ts

@@ -0,0 +1,38 @@
+import {lilconfigSync as lilconfig} from 'lilconfig';
+import {ParserOptions} from '@babel/parser';
+
+export interface UserConfig {
+  babelOptions: ParserOptions;
+}
+
+const defaultConfig: UserConfig = {
+  babelOptions: {
+    sourceType: 'unambiguous',
+    plugins: [
+      'typescript',
+      ['decorators', {decoratorsBeforeExport: true}],
+      'jsx'
+    ],
+    ranges: true
+  }
+};
+
+/**
+ * Gets the postcss-lit config from package.json if it exists
+ * @param {string} key Config key to search for
+ * @return {PackageConfig}
+ */
+export function getUserConfig(key: string): UserConfig {
+  const result = lilconfig(key, {
+    searchPlaces: ['package.json']
+  }).search();
+
+  const userConfig = result ? result.config : {};
+
+  return {
+    babelOptions: {
+      ...defaultConfig.babelOptions,
+      ...userConfig?.babelOptions
+    }
+  };
+}

test/fixtures/custom-config/package.json

@@ -0,0 +1,11 @@
+{
+  "private": true,
+  "name": "custom-config-in-postcss-lit",
+  "version": "1.0.0",
+  "main": "main.js",
+  "postcss-lit": {
+    "babelOptions": {
+      "plugins": []
+    }
+  }
+}