From d5cf30a91de8169f008b8292af30e09b6727f09a Mon Sep 17 00:00:00 2001 From: Neil Date: Wed, 31 Aug 2022 15:14:43 +0800 Subject: [PATCH] fix: when tag content have `>` --- .vscode/settings.json | 3 +- packages/transformer-applet/src/index.ts | 11 +- packages/transformer-attributify/src/index.ts | 5 +- playground/src/pages/index/index.vue | 28 ++- test/fixtures/attributify.vue | 51 ------ test/fixtures/rules.vue | 28 ++- test/transformer-applet.test.ts | 51 +++--- test/transformer-attributify.test.ts | 168 ++++++------------ 8 files changed, 121 insertions(+), 224 deletions(-) delete mode 100644 test/fixtures/attributify.vue diff --git a/.vscode/settings.json b/.vscode/settings.json index fd67ac9..8fb50a8 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -7,5 +7,6 @@ "**/.DS_Store": true, "**/Thumbs.db": true, "**/node_modules": true - } + }, + "unocss.root": "./playground" } diff --git a/packages/transformer-applet/src/index.ts b/packages/transformer-applet/src/index.ts index aef9b19..dd71b7b 100644 --- a/packages/transformer-applet/src/index.ts +++ b/packages/transformer-applet/src/index.ts @@ -3,7 +3,7 @@ import MagicString from 'magic-string' import type { TransformerAppletOptions } from './types' import { compileApplet } from './compile' -const elementRE = /<\w(?=.*>)[\w:\.$-]*\s(((\&>)|.*?)*?)\/?>/gs +const elementRE = /<\w(?=.*>)[\w:\.$-]*\s(((".*?>?.*?")|.*?)*?)\/?>/gs const valuedAttributeRE = /([?]|(?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:!%-]+)(?:={?(["'])([^\2]*?)\2}?)?/g // Regular expression of characters to be escaped @@ -33,14 +33,19 @@ export default function transformerApplet(options: TransformerAppletOptions = {} if (!content) continue + if (['class', 'className', 'hover-class'].includes(name)) { - if (!name.includes(':')) { + if (name.includes(':')) + continue + + if (charReg.test(content)) { const replacements = await compileApplet(content, ctx, options) matchStrTemp = matchStrTemp.replace(content, replacements.join(' ')) } } } - code.overwrite(start, start + eleMatch[0].length, matchStrTemp) + if (eleMatch[0] !== matchStrTemp) + code.overwrite(start, start + eleMatch[0].length, matchStrTemp) } code = new MagicString(code.toString()) diff --git a/packages/transformer-attributify/src/index.ts b/packages/transformer-attributify/src/index.ts index e0eb9b2..f9b6c94 100644 --- a/packages/transformer-attributify/src/index.ts +++ b/packages/transformer-attributify/src/index.ts @@ -10,7 +10,7 @@ const strippedPrefixes = [ const splitterRE = /[\s'"`;]+/g // const elementRE = /<\w(?=.*>)[\w:\.$-]*\s((?:['"`\{].*?['"`\}]|.*?)*?)>/gs -const elementRE = /<\w(?=.*>)[\w:\.$-]*\s(((\&>)|.*?)*?)\/?>/gs +const elementRE = /<\w(?=.*>)[\w:\.$-]*\s(((".*?>?.*?")|.*?)*?)\/?>/gs const valuedAttributeRE = /([?]|(?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:!%-]+)(?:={?(["'])([^\2]*?)\2}?)?/g export const defaultIgnoreAttributes = ['placeholder', 'setup', 'lang', 'scoped'] @@ -40,6 +40,7 @@ export default function transformerAttributify(options: TransformerAttributifyOp const matchStr = attribute[0] const name = attribute[1] const content = attribute[3] + // console.log('name', name, 'content', content) let _name = prefixedOnly ? name.replace(prefix, '') : name if (!ignoreAttributes.includes(_name)) { @@ -80,7 +81,7 @@ export default function transformerAttributify(options: TransformerAttributifyOp matchStrTemp = `${matchStrTemp.slice(0, sliceNum)} class="${attrSelectors.join(' ')}"${matchStrTemp.slice(sliceNum)}` } else { - matchStrTemp = matchStrTemp.replace(existsClass, `${existsClass} ${attrSelectors.join(' ')}`) + matchStrTemp = matchStrTemp.replace(`"${existsClass}"`, `"${existsClass} ${attrSelectors.join(' ')}"`) } code.overwrite(start, start + eleMatch[0].length, matchStrTemp) } diff --git a/playground/src/pages/index/index.vue b/playground/src/pages/index/index.vue index 1e2e347..f9ce11f 100644 --- a/playground/src/pages/index/index.vue +++ b/playground/src/pages/index/index.vue @@ -1,43 +1,39 @@ diff --git a/test/fixtures/attributify.vue b/test/fixtures/attributify.vue deleted file mode 100644 index 0c7eace..0000000 --- a/test/fixtures/attributify.vue +++ /dev/null @@ -1,51 +0,0 @@ - - - diff --git a/test/fixtures/rules.vue b/test/fixtures/rules.vue index 5a5ed68..167d1a4 100644 --- a/test/fixtures/rules.vue +++ b/test/fixtures/rules.vue @@ -1,44 +1,40 @@ diff --git a/test/transformer-applet.test.ts b/test/transformer-applet.test.ts index 01d6310..9cf9710 100644 --- a/test/transformer-applet.test.ts +++ b/test/transformer-applet.test.ts @@ -34,76 +34,75 @@ describe('transformer-applet', () => { expect(result).toMatchInlineSnapshot(` { "code": " ", "css": "/* layer: applet_shortcuts */ .uno-tw4biu{margin:0.125rem;padding:0.25rem;font-size:1.5rem;line-height:2rem;} - .uno-j2nj36{display:flex;flex-direction:column;align-items:center;justify-content:center;} - .uno-e22fjo{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} .uno-1lreki{border-width:1px;border-style:solid;--un-bg-opacity:1;background-color:rgba(191,219,254,var(--un-bg-opacity));} .uno-98db2v{--un-bg-opacity:1;background-color:hsla(2.7,81.9%,69.6%,var(--un-bg-opacity));} .uno-y5ng0p{--un-bg-opacity:1 !important;background-color:rgba(74,222,128,var(--un-bg-opacity)) !important;} - .uno-gdmskp{--un-url:url(https://static.runoob.com/images/demo/demo3.jpg);background-image:var(--un-url);} - .uno-82knp1{padding:0.25rem;} + .uno-w33epq{--un-url:url(https://static.runoob.com/images/demo/demo2.jpg);background-image:var(--un-url);} .uno-qju0i9{padding:0.625rem;--un-text-opacity:1;color:rgba(234,179,8,var(--un-text-opacity));} .uno-2z589z{padding-left:0.625rem;padding-right:0.625rem;--un-text-opacity:1;color:rgba(234,179,8,var(--un-text-opacity));} .uno-4oaq3e{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));} /* layer: default */ + .ma{margin:auto;} .inline-block{display:inline-block;} .h-10{height:2.5rem;} - .w-10{width:2.5rem;} - .w-20{width:5rem;} + .h-20{height:5rem;} + .w-40{width:10rem;} .flex{display:flex;} - .gap-2{grid-gap:0.5rem;gap:0.5rem;} + .rotate-180{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} + .items-center{align-items:center;} + .gap-1{grid-gap:0.25rem;gap:0.25rem;} .border{border-width:1px;border-style:solid;} .bg-blue{--un-bg-opacity:1;background-color:rgba(96,165,250,var(--un-bg-opacity));} .hover\\\\:bg-green:hover{--un-bg-opacity:1;background-color:rgba(74,222,128,var(--un-bg-opacity));} + .p-1{padding:0.25rem;} .p-2{padding:0.5rem;} .text-center{text-align:center;} - .text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} - .underline{text-decoration-line:underline;}", + .text-right{text-align:right;} + .text-sm{font-size:0.875rem;line-height:1.25rem;} + .text-blue{--un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity));} + .text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}", } `) }) diff --git a/test/transformer-attributify.test.ts b/test/transformer-attributify.test.ts index fd1ea1c..b8704ec 100644 --- a/test/transformer-attributify.test.ts +++ b/test/transformer-attributify.test.ts @@ -42,145 +42,95 @@ describe('transformer-attributify', () => { test('basic', async () => { const content = await fs.readFile( - path.resolve(__dirname, './fixtures/attributify.vue'), + path.resolve(__dirname, './fixtures/rules.vue'), ) const result = await transform(content.toString()) expect(result).toMatchInlineSnapshot(` { "code": " + ", - "css": "/* layer: shortcuts */ - .btn-block{border-radius:0.5rem;padding-top:0.5rem;padding-bottom:0.5rem;padding-left:1rem;padding-right:1rem;} - .bg-base{--un-bg-opacity:1;background-color:rgba(243,244,246,var(--un-bg-opacity));} - .dark .bg-base{--un-bg-opacity:1;background-color:rgba(34,34,34,var(--un-bg-opacity));} - .color-base{--un-text-opacity:1;color:rgba(55,65,81,var(--un-text-opacity));} - .dark .color-base{--un-text-opacity:1;color:rgba(250,250,250,var(--un-text-opacity));} - /* layer: default */ - .pointer-events-none{pointer-events:none;} - .absolute{position:absolute;} - .relative{position:relative;} - .left-4{left:1rem;} - .top-1\\\\/3{top:33.3333333333%;} + "css": "/* layer: default */ + .m-0\\\\.5{margin:0.125rem;} .ma{margin:auto;} - .mb--3{margin-bottom:-0.75rem;} - .mb-a{margin-bottom:auto;} - .mt-1{margin-top:0.25rem;} - .mt-a{margin-top:auto;} - .block{display:block;} .inline-block{display:inline-block;} .h-10{height:2.5rem;} - .h-14{height:3.5rem;} - .h-80{height:20rem;} - .w-10{width:2.5rem;} + .h-20{height:5rem;} + .w-40{width:10rem;} .flex{display:flex;} - .inline-flex{display:inline-flex;} + .flex-1{flex:1 1 0%;} .flex-col{flex-direction:column;} - .origin-top-left, - [peer=\\"\\"]:focus~.peer-focus-origin-top-left, - [peer=\\"\\"]:not(:placeholder-shown)~.peer-not-placeholder-shown-origin-top-left{transform-origin:top left;} - .-translate-y-4, - [peer=\\"\\"]:focus~.peer-focus--translate-y-4, - [peer=\\"\\"]:not(:placeholder-shown)~.peer-not-placeholder-shown--translate-y-4{--un-translate-y:-1rem;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} .rotate-180{--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-rotate:180deg;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} - .scale-75, - [peer=\\"\\"]:focus~.peer-focus-scale-75, - [peer=\\"\\"]:not(:placeholder-shown)~.peer-not-placeholder-shown-scale-75{--un-scale-x:0.75;--un-scale-y:0.75;transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));} - .select-none{user-select:none;} - .\\\\[\\\\&\\\\>\\\\*\\\\]\\\\:border-gray\\\\/50>*{border-color:rgba(156,163,175,0.5);} + .items-center{align-items:center;} + .flex-gap-1, + .gap-1{grid-gap:0.25rem;gap:0.25rem;} + .border{border-width:1px;border-style:solid;} + .border-2{border-width:2px;border-style:solid;} + .border-blue{--un-border-opacity:1;border-color:rgba(96,165,250,var(--un-border-opacity));} + .\\\\!bg-green{--un-bg-opacity:1 !important;background-color:rgba(74,222,128,var(--un-bg-opacity)) !important;} .bg-\\\\[hsl\\\\(2\\\\.7\\\\,81\\\\.9\\\\%\\\\,69\\\\.6\\\\%\\\\)\\\\]{--un-bg-opacity:1;background-color:hsla(2.7,81.9%,69.6%,var(--un-bg-opacity));} .bg-blue{--un-bg-opacity:1;background-color:rgba(96,165,250,var(--un-bg-opacity));} - .bg-blue-600{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));} - .bg-gradient-from-yellow-400, - .from-yellow-400{--un-gradient-from:rgba(250,204,21,var(--un-from-opacity, 1));--un-gradient-to:rgba(250,204,21,0);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);} - .bg-gradient-via-red-500, - .via-red-500{--un-gradient-to:rgba(239,68,68,0);--un-gradient-stops:var(--un-gradient-from), rgba(239,68,68,var(--un-via-opacity, 1)), var(--un-gradient-to);} - .bg-gradient-to-pink-500, - .to-pink-500{--un-gradient-to:rgba(236,72,153,var(--un-to-opacity, 1));} - .bg-gradient-to-r{--un-gradient-shape:to right;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));} + .bg-blue-200{--un-bg-opacity:1;background-color:rgba(191,219,254,var(--un-bg-opacity));} + .hover\\\\:bg-green:hover{--un-bg-opacity:1;background-color:rgba(74,222,128,var(--un-bg-opacity));} + .bg-\\\\[url\\\\(https\\\\:\\\\/\\\\/static\\\\.runoob\\\\.com\\\\/images\\\\/demo\\\\/demo2\\\\.jpg\\\\)\\\\]{--un-url:url(https://static.runoob.com/images/demo/demo2.jpg);background-image:var(--un-url);} + .bg-cover{background-size:cover;} + .bg-center{background-position:center;} .p-1{padding:0.25rem;} - .p-10{padding:2.5rem;} - .px-4{padding-left:1rem;padding-right:1rem;} - .pt-4{padding-top:1rem;} + .p-2{padding:0.5rem;} + .p-2\\\\.5{padding:0.625rem;} + .p-4{padding:1rem;} + .px-2\\\\.5{padding-left:0.625rem;padding-right:0.625rem;} .text-center{text-align:center;} - .text-4xl, - [peer=\\"\\"]:checked~.peer-checked-text-4xl{font-size:2.25rem;line-height:2.5rem;} - .text-5xl{font-size:3rem;line-height:1;} - .font-100{font-weight:100;} - .font-200{font-weight:200;} - .leading-1rem{line-height:1rem;} - .tracking-wider{letter-spacing:0.05em;} - .color-blue{--un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity));} - .text-gray-7{--un-text-opacity:1;color:rgba(55,65,81,var(--un-text-opacity));} - .text-green-500, - [peer=\\"\\"]:focus~.peer-focus-text-green-500, - [peer=\\"\\"]:not(:placeholder-shown)~.peer-not-placeholder-shown-text-green-500{--un-text-opacity:1;color:rgba(34,197,94,var(--un-text-opacity));} + .text-right{text-align:right;} + .text-2xl{font-size:1.5rem;line-height:2rem;} + .text-4xl{font-size:2.25rem;line-height:2.5rem;} + .text-sm{font-size:0.875rem;line-height:1.25rem;} + .text-xl{font-size:1.25rem;line-height:1.75rem;} + .color-blue, + .text-blue{--un-text-opacity:1;color:rgba(96,165,250,var(--un-text-opacity));} + .color-white, + .text-\\\\#fff, + .text-white{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));} .text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));} - .text-teal-400, - [group=\\"\\"]:hover .group-hover-text-teal-400{--un-text-opacity:1;color:rgba(45,212,191,var(--un-text-opacity));} - .text-true-gray-800{--un-text-opacity:1;color:rgba(38,38,38,var(--un-text-opacity));} - .text-yellow-500{--un-text-opacity:1;color:rgba(234,179,8,var(--un-text-opacity));} - .op-20{opacity:0.2;} - .op-50, - [group=\\"\\"]:hover .group-hover-op-50{opacity:0.5;} - .all\\\\:transition-400 *{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:400ms;} - .transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms;} - .transition-200{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:200ms;} - .after-content-\\\\[\\\\!\\\\]::after, - .content-\\\\[\\\\!\\\\]{content:\\"!\\";} - .m-0{margin:0rem;} - @media (min-width: 640px){ - .sm-bg-blue-600{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));} - }", + .text-yellow-500{--un-text-opacity:1;color:rgba(234,179,8,var(--un-text-opacity));}", } `) })