diff --git a/packages/babel-plugin-extend-docs/src/babelPluginExtendDocs.js b/packages/babel-plugin-extend-docs/src/babelPluginExtendDocs.js
index 9264a364c..4204f96d9 100644
--- a/packages/babel-plugin-extend-docs/src/babelPluginExtendDocs.js
+++ b/packages/babel-plugin-extend-docs/src/babelPluginExtendDocs.js
@@ -9,8 +9,8 @@ const { validateOptions } = require('./validateOptions.js');
function replaceTemplateElements({ path, opts }) {
const replaceTag = (value, from, to) =>
value
- .replace(new RegExp(`<${from}`, 'g'), `<${to}`)
- .replace(new RegExp(`${from}>`, 'g'), `${to}>`);
+ .replace(new RegExp(`<${from}(?= |>)`, 'g'), `<${to}`) // positive lookahead for '>' or ' ' after the tagName
+ .replace(new RegExp(`/${from}>`, 'g'), `/${to}>`);
path.node.quasi.quasis.forEach(quasi => {
opts.changes.forEach(change => {
if (change.tag && quasi.value.raw.match(change.tag.from)) {
diff --git a/packages/babel-plugin-extend-docs/test-node/babelPluginExtendDocs.test.js b/packages/babel-plugin-extend-docs/test-node/babelPluginExtendDocs.test.js
index c57edbe50..7533ac37c 100644
--- a/packages/babel-plugin-extend-docs/test-node/babelPluginExtendDocs.test.js
+++ b/packages/babel-plugin-extend-docs/test-node/babelPluginExtendDocs.test.js
@@ -207,7 +207,7 @@ describe('babel-plugin-extend-docs', () => {
expect(executeBabel(code, testConfig)).to.equal(output);
});
- it('will no touch content of tags', () => {
+ it('will not touch content of tags', () => {
const code = [
'export const main = () => html`',
` `,
@@ -227,6 +227,48 @@ describe('babel-plugin-extend-docs', () => {
expect(executeBabel(code, testConfig)).to.equal(output);
});
+ it('will not replace opening tags that are not the exact same tag name', () => {
+ const code = [
+ 'export const main = () => html`',
+ ` `,
+ ' ',
+ ' ',
+ '`;',
+ ].join('\n');
+ const output = [
+ 'export const main = () => html`',
+ ` `,
+ ' ',
+ ' ',
+ '`;',
+ ].join('\n');
+ expect(executeBabel(code, testConfig)).to.equal(output);
+ });
+
+ it('will not replace closing tags that are not the exact same tag name', () => {
+ const code = [
+ 'export const main = () => html`',
+ ` `,
+ ' ',
+ '`;',
+ ].join('\n');
+ const output = [
+ 'export const main = () => html`',
+ ` `,
+ ' ',
+ '`;',
+ ].join('\n');
+ expect(executeBabel(code, testConfig)).to.equal(output);
+ });
+
it('replaces nested tags in function occurrences', () => {
const code = [
'export const main = () => html`',
diff --git a/packages/babel-plugin-extend-docs/test-node/helpers.js b/packages/babel-plugin-extend-docs/test-node/helpers.js
index d0356eb1e..2bb416e7c 100644
--- a/packages/babel-plugin-extend-docs/test-node/helpers.js
+++ b/packages/babel-plugin-extend-docs/test-node/helpers.js
@@ -81,6 +81,41 @@ const baseConfig = {
],
},
},
+ {
+ description: 'LionCheckbox',
+ variable: {
+ from: 'LionCheckbox',
+ to: 'WolfCheckbox',
+ paths: [
+ {
+ from: './index.js',
+ to: './index.js',
+ },
+ {
+ from: './src/LionCheckbox.js',
+ to: './index.js',
+ },
+ {
+ from: '@lion/checkbox-group',
+ to: './index.js',
+ },
+ ],
+ },
+ tag: {
+ from: 'lion-checkbox',
+ to: 'wolf-checkbox',
+ paths: [
+ {
+ from: './lion-checkbox.js',
+ to: './__element-definitions/wolf-checkbox.js',
+ },
+ {
+ from: '@lion/checkbox-group/lion-checkbox.js',
+ to: './__element-definitions/wolf-checkbox.js',
+ },
+ ],
+ },
+ },
{
description: 'localize',
variable: {