Skip to content

Commit

Permalink
fix: attributify mode with variantGroup
Browse files Browse the repository at this point in the history
  • Loading branch information
@zguolee
zguolee committed Sep 2, 2022
1 parent d790067 commit 9b3df78
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 19 deletions.
11 changes: 10 additions & 1 deletion packages/transformer-attributify/src/index.ts
View file
Expand Up @@ -66,7 +66,16 @@ export default function transformerAttributify(options: TransformerAttributifyOp
else {
const attrs = await Promise.all(content.split(splitterRE).filter(Boolean)
.map(async (v) => {
const token = v === '~' ? _name : v.startsWith('!') ? `!${_name}-${v.slice(1)}` : `${_name}-${v}`
let token = v
// b="~ green dark:(red 2)"
if (v === '~') { token = _name }
else if (v.includes(':')) {
const splitV = v.split(':')
token = `${splitV[0]}:${splitV[1]}`
}
else if (v.startsWith('!')) { token = `!${_name}-${v.slice(1)}` }
else { token = `${_name}-${v}` }

return [token, !!await uno.parseToken(token)] as const
}))
const result = attrs.filter(([, v]) => v).map(([v]) => v)
Expand Down
14 changes: 9 additions & 5 deletions playground/src/pages/index/index.vue
View file
Expand Up @@ -19,16 +19,20 @@ const bool = ref<boolean>()
class="hover:bg-green"
</div>
<div flex="~ col gap-1" class="p-1" items-center :class="bool ? 'text-yellow-500 px-2.5' : ''">
<div i-carbon-campsite inline-block text="xl !red" />
<div color="blue">
{{ `index${index + 1}` }}
<div i-carbon-campsite inline-block color="blue" text="xl !red" />
<div bg="green-(!200 800)">
{{ `index${index + 1}` }}{{ `index` }}
</div>
</div>
<div flex="~ col" border="2 blue">
<div flex="~ col" b="~ green dark:(red 2)">
<div text-right h-10 flex="1" text="red" :class="{ 'text-sm': index > 0 }">
0123456789
</div>
<div h-10 flex="1" text-blue :class="[index > 1 ? 'text' : '']" :style="[index > 1 ? '' : '']" :type="index > 1">
<div
h-10 flex="1" :class="[index > 1 ? 'text' : '']"
text="blue dark:(red !bold)" :style="[index > 1 ? '' : '']"
:type="index > 1"
>
{{ bgIgnore }}
</div>
</div>
Expand Down
12 changes: 9 additions & 3 deletions test/fixtures/rules.vue
View file
Expand Up @@ -20,13 +20,19 @@ const bool = ref<boolean>()
</div>
<div flex="~ col gap-1" class="p-1" items-center :class="bool ? 'text-yellow-500 px-2.5' : ''">
<div i-carbon-campsite inline-block color="blue" text="xl !red" />
{{ `index${index + 1}` }}{{ `index` }}
<div bg="green-(!200 800)">
{{ `index${index + 1}` }}{{ `index` }}
</div>
</div>
<div flex="~ col" border="2 blue">
<div flex="~ col" b="~ green dark:(red 2)">
<div text-right h-10 flex="1" text="red" :class="{ 'text-sm': index > 0 }">
0123456789
</div>
<div h-10 flex="1" text-blue :class="[index > 1 ? 'text' : '']" :style="[index > 1 ? '' : '']" :type="index > 1">
<div
h-10 flex="1" :class="[index > 1 ? 'text' : '']"
text="blue dark:(red !bold)" :style="[index > 1 ? '' : '']"
:type="index > 1"
>
{{ bgIgnore }}
</div>
</div>
Expand Down
20 changes: 15 additions & 5 deletions test/transformer-applet.test.ts
View file
Expand Up @@ -6,12 +6,17 @@ import { createGenerator } from '@unocss/core'
import MagicString from 'magic-string'
import transformerApplet from '@unocss-applet/transformer-applet'
import presetUno from '@unocss/preset-uno'
import { transformerDirectives, transformerVariantGroup } from 'unocss'

describe('transformer-applet', () => {
const uno = createGenerator({
presets: [
presetUno(),
],
transformers: [
transformerDirectives(),
transformerVariantGroup(),
],
})
const transformer = transformerApplet()

Expand Down Expand Up @@ -55,13 +60,19 @@ describe('transformer-applet', () => {
</div>
<div flex=\\"~ col gap-1\\" class=\\"p-1\\" items-center :class=\\"bool ? 'uno-2z589z' : ''\\">
<div i-carbon-campsite inline-block color=\\"blue\\" text=\\"xl !red\\" />
{{ \`index\${index + 1}\` }}{{ \`index\` }}
<div bg=\\"green-(!200 800)\\">
{{ \`index\${index + 1}\` }}{{ \`index\` }}
</div>
</div>
<div flex=\\"~ col\\" border=\\"2 blue\\">
<div flex=\\"~ col\\" b=\\"~ green dark:(red 2)\\">
<div text-right h-10 flex=\\"1\\" text=\\"red\\" :class=\\"{ 'text-sm': index > 0 }\\">
0123456789
</div>
<div h-10 flex=\\"1\\" text-blue :class=\\"[index > 1 ? 'text' : '']\\" :style=\\"[index > 1 ? '' : '']\\" :type=\\"index > 1\\">
<div
h-10 flex=\\"1\\" :class=\\"[index > 1 ? 'text' : '']\\"
text=\\"blue dark:(red !bold)\\" :style=\\"[index > 1 ? '' : '']\\"
:type=\\"index > 1\\"
>
{{ bgIgnore }}
</div>
</div>
Expand Down Expand Up @@ -95,7 +106,7 @@ describe('transformer-applet', () => {
.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;}
.b{border-width:1px;border-style:solid;}
.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));}
.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);}
Expand All @@ -104,7 +115,6 @@ describe('transformer-applet', () => {
.text-center{text-align:center;}
.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));}",
}
`)
Expand Down
21 changes: 16 additions & 5 deletions test/transformer-attributify.test.ts
View file
Expand Up @@ -6,6 +6,7 @@ import { createGenerator } from '@unocss/core'
import MagicString from 'magic-string'
import transformerAttributify from '@unocss-applet/transformer-attributify'
import presetUno from '@unocss/preset-uno'
import { transformerDirectives, transformerVariantGroup } from 'unocss'

describe('transformer-attributify', () => {
const uno = createGenerator({
Expand All @@ -26,6 +27,10 @@ describe('transformer-attributify', () => {
rules: [
[/^m-(\d)$/, ([, d]) => ({ margin: `${+d / 4}rem` })],
],
transformers: [
transformerDirectives(),
transformerVariantGroup(),
],
})
const transformer = transformerAttributify()

Expand Down Expand Up @@ -69,13 +74,19 @@ describe('transformer-attributify', () => {
</div>
<div flex=\\"~ col gap-1\\" class=\\"p-1 flex flex-col flex-gap-1 items-center\\" items-center :class=\\"bool ? 'text-yellow-500 px-2.5' : ''\\">
<div i-carbon-campsite inline-block color=\\"blue\\" text=\\"xl !red\\" class=\\"inline-block color-blue text-xl !text-red\\"/>
{{ \`index\${index + 1}\` }}{{ \`index\` }}
<div bg=\\"green-(!200 800)\\">
{{ \`index\${index + 1}\` }}{{ \`index\` }}
</div>
</div>
<div flex=\\"~ col\\" border=\\"2 blue\\" class=\\"flex flex-col border-2 border-blue\\">
<div flex=\\"~ col\\" b=\\"~ green dark:(red 2)\\" class=\\"flex flex-col b b-green\\">
<div text-right h-10 flex=\\"1\\" text=\\"red\\" :class=\\"{ 'text-sm': index > 0 }\\" class=\\"text-right h-10 flex-1 text-red\\">
0123456789
</div>
<div h-10 flex=\\"1\\" text-blue :class=\\"[index > 1 ? 'text' : '']\\" :style=\\"[index > 1 ? '' : '']\\" :type=\\"index > 1\\" class=\\"h-10 flex-1 text-blue\\">
<div
h-10 flex=\\"1\\" :class=\\"[index > 1 ? 'text' : '']\\"
text=\\"blue dark:(red !bold)\\" :style=\\"[index > 1 ? '' : '']\\"
:type=\\"index > 1\\"
class=\\"h-10 flex-1 text-blue\\">
{{ bgIgnore }}
</div>
</div>
Expand All @@ -102,9 +113,9 @@ describe('transformer-attributify', () => {
.items-center{align-items:center;}
.flex-gap-1,
.gap-1{grid-gap:0.25rem;gap:0.25rem;}
.b,
.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));}
.b-green{--un-border-opacity:1;border-color:rgba(74,222,128,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-200{--un-bg-opacity:1;background-color:rgba(191,219,254,var(--un-bg-opacity));}
Expand Down

0 comments on commit 9b3df78

Please sign in to comment.