Skip to content

Commit

Permalink
feat(transformer): add enable option
Browse files Browse the repository at this point in the history
  • Loading branch information
@zguolee
zguolee committed Oct 24, 2022
1 parent 265ab27 commit 6ca2784
Show file tree
Hide file tree
Showing 5 changed files with 28 additions and 24 deletions.
3 changes: 3 additions & 0 deletions packages/transformer-applet/src/index.ts
View file
Expand Up @@ -12,11 +12,14 @@ const stringRE = /'(.*?)'|/g
const templateLiteralsRE = /`([\s\S]*?)`/g

export default function transformerApplet(options: TransformerAppletOptions = {}): SourceCodeTransformer {
const enable = options.enable ?? true
const ignorePrefix = options.ignorePrefix || 'applet-ignore:'
return {
name: 'transformer-applet',
enforce: 'pre',
async transform(s, id, ctx) {
if (!enable)
return
let code = new MagicString(s.toString())

// process class attribute
Expand Down
6 changes: 6 additions & 0 deletions packages/transformer-attributify/README.md
View file
Expand Up @@ -29,6 +29,12 @@ export default defineConfig({

```ts
export interface TransformerAttributifyOptions {
/**
* Enable attributify, only build applet should be true
* e.g. In uniapp set `enable: !(process.env.UNI_PLATFORM === 'h5')` to disable for h5
* @default true
*/
enable?: boolean

/**
* @default 'un-'
Expand Down
3 changes: 3 additions & 0 deletions packages/transformer-attributify/src/index.ts
View file
Expand Up @@ -16,6 +16,7 @@ const valuedAttributeRE = /([?]|(?!\d|-{2}|-\d)[a-zA-Z0-9\u00A0-\uFFFF-_:!%-]+)(
export const defaultIgnoreAttributes = ['placeholder', 'setup', 'lang', 'scoped']

export default function transformerAttributify(options: TransformerAttributifyOptions = {}): SourceCodeTransformer {
const enable = options.enable ?? true
const ignoreAttributes = options?.ignoreAttributes ?? defaultIgnoreAttributes
const nonValuedAttribute = options?.nonValuedAttribute ?? true
const prefix = options.prefix ?? 'un-'
Expand All @@ -26,6 +27,8 @@ export default function transformerAttributify(options: TransformerAttributifyOp
name: 'transformer-attributify',
enforce: 'pre',
async transform(s, _, { uno }) {
if (!enable)
return
const code = new MagicString(s.toString())

const elementMatches = code.original.matchAll(elementRE)
Expand Down
6 changes: 6 additions & 0 deletions packages/transformer-attributify/src/types.ts
View file
@@ -1,4 +1,10 @@
export interface TransformerAttributifyOptions {
/**
* Enable attributify, only build applet should be true
* e.g. In uniapp set `enable: !(process.env.UNI_PLATFORM === 'h5')` to disable for h5
* @default true
*/
enable?: boolean

/**
* @default 'un-'
Expand Down
34 changes: 10 additions & 24 deletions test/transformer-attributify.test.ts
View file
Expand Up @@ -62,35 +62,35 @@ describe('transformer-attributify', () => {
</script>
<template>
<div class=\\"text-center aaa p-4\\" p=\\"4\\">
<div text=\\"4xl\\" class=\\"rotate-180 i-carbon-campsite text-4xl\\" :class=\\"bg\\" />
<div class=\\"text-center aaa\\" p=\\"4\\">
<div text=\\"4xl\\" class=\\"rotate-180 i-carbon-campsite\\" :class=\\"bg\\" />
<div class=\\"border bg-blue-200 font-(light mono) \\">
<div class=\\"hover:(!bg-gray-600 text-red font-bold) text-#fff\\" text=\\"#fff\\">
<div class=\\"hover:(!bg-gray-600 text-red font-bold)\\" text=\\"#fff\\">
{{ 'applet-ignore: hover:(!bg-gray-600 text-red font-bold)' }}
</div>
</div>
<div :class=\\"\`p-2.5 \${bool ? 'p-0.5' : ''}\`\\" m-2 :hover-class=\\"['!bg-green']\\" class=\\"m-2\\">
<div :class=\\"\`p-2.5 \${bool ? 'p-0.5' : ''}\`\\" m-2 :hover-class=\\"['!bg-green']\\">
class=\\"hover:bg-green\\"
</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\\"/>
<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\\" />
<div bg=\\"green-(!200 800)\\">
{{ \`index\${index + 1}\` }}{{ \`index\` }}
</div>
</div>
<div flex=\\"~ col\\" b=\\"~ green dark:(red 2)\\" :class=\\"\`bg-\${bg}\`\\" 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\\">
<div flex=\\"~ col\\" b=\\"~ green dark:(red 2)\\" :class=\\"\`bg-\${bg}\`\\">
<div text-right h-10 flex=\\"1\\" text=\\"red\\" :class=\\"{ 'text-sm': index > 0 }\\">
0123456789
</div>
<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>
<div class=\\"bg-[url(https://static.runoob.com/images/demo/demo2.jpg)] w-40 h-20 ma color-white bg-center bg-cover\\" w-40 h-20 ma color=\\"white\\" bg=\\"center cover\\">
<div class=\\"bg-[url(https://static.runoob.com/images/demo/demo2.jpg)]\\" w-40 h-20 ma color=\\"white\\" bg=\\"center cover\\">
{{ 'applet-ignore: bg-[url(https://static.runoob.com/images/demo/demo2.jpg)]' }}
</div>
<div class=\\"m-0.5 p-1 text-2xl\\" :class=\\"bool ? '' : 'text-yellow-500 p-2.5'\\">
Expand All @@ -107,38 +107,24 @@ describe('transformer-attributify', () => {
.h-20{height:5rem;}
.w-40{width:10rem;}
.flex{display:flex;}
.flex-1{flex:1 1 0%;}
.flex-col{flex-direction:column;}
.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;}
.flex-gap-1,
.gap-1{grid-gap:0.25rem;gap:0.25rem;}
.b,
.border{border-width:1px;border-style:solid;}
.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));}
.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-0\\\\.5{padding:0.125rem;}
.p-1{padding:0.25rem;}
.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-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{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));}
.\\\\!text-red{--un-text-opacity:1 !important;color:rgba(248,113,113,var(--un-text-opacity)) !important;}
.text-red{--un-text-opacity:1;color:rgba(248,113,113,var(--un-text-opacity));}
.text-yellow-500{--un-text-opacity:1;color:rgba(234,179,8,var(--un-text-opacity));}
.m-2{margin:0.5rem;}",
Expand Down

0 comments on commit 6ca2784

Please sign in to comment.