Merge pull request #472 from anteprimorac/feature/support-jsx-custom-tags

add support for jsx custom tags

Author: anteprimorac

CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this extension will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.11.0] 2023-03-04
+### Added
+- support for JSX custom tags
+
 ## [0.10.0] 2023-02-01
 ### Added
 - basic support for JSX (javascript and typescript)

src/closing-labels-decorations.ts

@@ -231,7 +231,6 @@ export default class ClosingLabelsDecorations implements vscode.Disposable {
           node.closingElement.loc &&
           node.openingElement.loc &&
           node.openingElement.name.type === 'JSXIdentifier' &&
-          node.openingElement.name.name.toLowerCase() === node.openingElement.name.name &&
           node.openingElement.loc.end.line !== node.closingElement.loc.start.line
         ) {
           let id: string | undefined;

src/test/suite/extension.test.ts

@@ -118,6 +118,13 @@ function Component() {
       <div className="test-inline-class"></div>
       <div id="test-inline-id"></div>
       <div id="test-inline-both-id" class="test-inline-both-class"></div>
+      <Box id="test-custom-id">
+      </Box>
+      <Box className="test-custom-class">
+      </Box>
+      <Box className="test-custom-both-class" id="test-custom-both-id">
+      </Box>
+      <Box className="test-custom-inline-class"></Box>
     </div>
   );
 }
@@ -143,6 +150,20 @@ export default Component;
           after: { contentText: '/#test-both-id.test-both-class' },
         },
       },
+      {
+        range: new vscode.Range(new vscode.Position(15, 6), new vscode.Position(15, 12)),
+        renderOptions: { after: { contentText: '/#test-custom-id' } },
+      },
+      {
+        range: new vscode.Range(new vscode.Position(17, 6), new vscode.Position(17, 12)),
+        renderOptions: { after: { contentText: '/.test-custom-class' } },
+      },
+      {
+        range: new vscode.Range(new vscode.Position(19, 6), new vscode.Position(19, 12)),
+        renderOptions: {
+          after: { contentText: '/#test-custom-both-id.test-custom-both-class' },
+        },
+      },
     ]);
   });
 
@@ -164,6 +185,13 @@ const Component: React.VFC<{ test: string }> = ({ test }) => {
       <div className="test-inline-class"></div>
       <div id="test-inline-id"></div>
       <div id="test-inline-both-id" class="test-inline-both-class"></div>
+      <Box id="test-custom-id">
+      </Box>
+      <Box className="test-custom-class">
+      </Box>
+      <Box className="test-custom-both-class" id="test-custom-both-id">
+      </Box>
+      <Box className="test-custom-inline-class"></Box>
     </div>
   );
 }
@@ -189,6 +217,20 @@ export default Component;
           after: { contentText: '/#test-both-id.test-both-class' },
         },
       },
+      {
+        range: new vscode.Range(new vscode.Position(16, 6), new vscode.Position(16, 12)),
+        renderOptions: { after: { contentText: '/#test-custom-id' } },
+      },
+      {
+        range: new vscode.Range(new vscode.Position(18, 6), new vscode.Position(18, 12)),
+        renderOptions: { after: { contentText: '/.test-custom-class' } },
+      },
+      {
+        range: new vscode.Range(new vscode.Position(20, 6), new vscode.Position(20, 12)),
+        renderOptions: {
+          after: { contentText: '/#test-custom-both-id.test-custom-both-class' },
+        },
+      },
     ]);
   });
 });