Skip to content

Commit

Permalink
feat(preset-mini)!: change handler type
Browse files Browse the repository at this point in the history
  • Loading branch information
@chu121su12
chu121su12 committed Oct 13, 2022
1 parent d2b022d commit 7af3e8e
Show file tree
Hide file tree
Showing 8 changed files with 43 additions and 40 deletions.
2 changes: 1 addition & 1 deletion packages/preset-attributify/src/variant.ts
View file
Expand Up @@ -2,7 +2,7 @@ import type { VariantObject } from '@unocss/core'
import { isAttributifySelector } from '@unocss/core'
import type { AttributifyOptions } from './types'

export const variantsRE = /^(?!\[(?:[^:]+):(?:.+)\]$)((?:.+:)?!?)?(.*)$/
export const variantsRE = /^(?!.*\[(?:[^:]+):(?:.+)\]$)((?:.+:)?!?)?(.*)$/

export const variantAttributify = (options: AttributifyOptions = {}): VariantObject => {
const prefix = options.prefix ?? 'un-'
Expand Down
3 changes: 1 addition & 2 deletions packages/preset-mini/src/_rules/static.ts
View file
Expand Up @@ -69,8 +69,7 @@ export const contentVisibility: Rule[] = [
]

export const contents: Rule[] = [
[/^content-\[(.+)\]$/, ([, v]) => ({ content: `"${v}"` })],
[/^content-(\$.+)]$/, ([, v]) => ({ content: h.cssvar(v) })],
[/^content-(.+)$/, ([, v]) => ({ content: h.bracket.cssvar(v) })],
['content-empty', { content: '""' }],
['content-none', { content: '""' }],
]
Expand Down
12 changes: 7 additions & 5 deletions packages/preset-mini/src/_utils/handlers/handlers.ts
View file
Expand Up @@ -91,7 +91,7 @@ export function fraction(str: string) {
return `${round(num * 100)}%`
}

const bracketTypeRe = /^\[(color|length|position|raw|string):/i
const bracketTypeRe = /^\[(color|length|position|quoted|string):/i
function bracketWithType(str: string, requiredType?: string) {
if (str && str.startsWith('[') && str.endsWith(']')) {
let base: string | undefined
Expand Down Expand Up @@ -125,13 +125,15 @@ function bracketWithType(str: string, requiredType?: string) {
return

switch (hintedType) {
case 'raw': return base

case 'string': return base
.replace(/(^|[^\\])_/g, '$1 ')
.replace(/\\_/g, '_')
.replace(/(['\\])/g, '\\$1')
.replace(/^(.+)$/, '\'$1\'')

case 'quoted': return base
.replace(/(^|[^\\])_/g, '$1 ')
.replace(/\\_/g, '_')
.replace(/(["\\])/g, '\\$1')
.replace(/^(.+)$/, '"$1"')
}

return base
Expand Down
17 changes: 9 additions & 8 deletions test/__snapshots__/preset-attributify.test.ts.snap
View file
Expand Up @@ -46,7 +46,7 @@ Set {
"[translate-y-=\\"\\"]",
"[%=\\"\\"]",
"[rotate-30=\\"\\"]",
"[after~=\\"content-[unocss]\\"]",
"[after~=\\"content-[quoted:uno_css]\\"]",
"[rotate-60=\\"\\"]",
"[ma=\\"\\"]",
"[m~=\\"1\\"]",
Expand Down Expand Up @@ -112,8 +112,8 @@ Set {
"[peer-focus~=\\"scale-75\\"]",
"[peer-focus~=\\"origin-top-left\\"]",
"[peer-focus~=\\"text-green-500\\"]",
"[before~=\\"content-!\\"]",
"[after~=\\"content-[!]\\"]",
"[before-content~=\\"[quoted:!]\\"]",
"[after~=\\"content-[string:!]\\"]",
}
`;

Expand Down Expand Up @@ -151,7 +151,7 @@ Set {
"[transform=\\"\\"]",
"[translate-x-100=\\"\\"]",
"[rotate-30=\\"\\"]",
"[after~=\\"content-[unocss]\\"]",
"[after~=\\"content-[quoted:uno-css]\\"]",
"[rotate-60=\\"\\"]",
"[ma=\\"\\"]",
"[m~=\\"1\\"]",
Expand Down Expand Up @@ -202,7 +202,7 @@ exports[`attributify > fixture1 1`] = `
[\\\\!leading-4=\\"\\"]{line-height:1rem !important;}
[important~=\\"text-red\\"]{--un-text-opacity:1 !important;color:rgba(248,113,113,var(--un-text-opacity)) !important;}
[text~=\\"white\\"]{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));}
[after~=\\"content-\\\\[unocss\\\\]\\"]::after{content:\\"unocss\\";}
[after~=\\"content-\\\\[quoted\\\\:uno_css\\\\]\\"]::after{content:\\"uno css\\";}
@media (min-width: 640px){
[sm~=\\"\\\\[color\\\\:red\\\\]\\"]{color:red;}
}
Expand Down Expand Up @@ -264,7 +264,8 @@ exports[`attributify > fixture2 1`] = `
[op-20=\\"\\"]{opacity:0.2;}
[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~=\\"\\\\32 00\\"]{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:\\"!\\";}
[after~=\\"content-\\\\[string\\\\:\\\\!\\\\]\\"]::after{content:!;}
[before-content~=\\"\\\\[quoted\\\\:\\\\!\\\\]\\"]::before{content:\\"!\\";}
@media (min-width: 640px){
[sm~=\\"bg-blue-600\\"]{--un-bg-opacity:1;background-color:rgba(37,99,235,var(--un-bg-opacity));}
}"
Expand Down Expand Up @@ -307,7 +308,7 @@ exports[`attributify > fixture4 1`] = `
[text~=\\"sm\\"]{font-size:0.875rem;line-height:1.25rem;}
[important~=\\"text-red\\"]{--un-text-opacity:1 !important;color:rgba(248,113,113,var(--un-text-opacity)) !important;}
[text~=\\"white\\"]{--un-text-opacity:1;color:rgba(255,255,255,var(--un-text-opacity));}
[after~=\\"content-\\\\[unocss\\\\]\\"]::after{content:\\"unocss\\";}
[after~=\\"content-\\\\[quoted\\\\:uno-css\\\\]\\"]::after{content:\\"uno-css\\";}
@media (min-width: 640px){
[sm~=\\"\\\\[color\\\\:red\\\\]\\"]{color:red;}
}
Expand Down Expand Up @@ -365,7 +366,7 @@ exports[`attributify > variant 1`] = `
"translate-y-",
"%",
"rotate-30",
"after-content-[unocss]",
"after-content-[quoted:uno_css]",
"rotate-60",
"ma",
"m-1",
Expand Down
13 changes: 7 additions & 6 deletions test/__snapshots__/preset-mini.test.ts.snap
View file
Expand Up @@ -38,7 +38,6 @@ exports[`preset-mini > targets 1`] = `
/* layer: 1 */
.uno-layer-1\\\\:translate-0{--un-translate-x:0rem;--un-translate-y:0rem;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));}
/* layer: default */
.content-\\\\$unocss-var{align-content:var(--unocss-var);}
.fw-\\\\$variable{font-weight:var(--variable);}
.items-\\\\$size{align-items:var(--size);}
.ws-\\\\$variable{white-space:var(--variable);}
Expand Down Expand Up @@ -295,11 +294,13 @@ div:hover .group-\\\\[div\\\\:hover\\\\]-\\\\[combinator\\\\:test-4\\\\]{combina
.content-visibility-hidden{content-visibility:hidden;}
.content-visibility-auto{content-visibility:auto;}
.content-visibility-unset{content-visibility:unset;}
.after\\\\:content-\\\\[unocss\\\\]::after,
.content-\\\\[unocss\\\\]{content:\\"unocss\\";}
.content-\\\\[\\\\!\\\\]{content:\\"!\\";}
.content-\\\\[attr\\\\(dashed-attr\\\\)\\\\]{content:\\"attr(dashed-attr)\\";}
.content-\\\\[attr\\\\(underlined_attr\\\\)\\\\]{content:\\"attr(underlined_attr)\\";}
.after\\\\:content-\\\\[quoted\\\\:unocss\\\\]::after,
.content-\\\\[quoted\\\\:unocss\\\\]{content:\\"unocss\\";}
.content-\\\\[normal\\\\]{content:normal;}
.content-\\\\[quoted\\\\:\\\\!\\\\]{content:\\"!\\";}
.content-\\\\[string\\\\:attr\\\\(dashed-attr\\\\)\\\\]{content:attr(dashed-attr);}
.content-\\\\[string\\\\:attr\\\\(underlined\\\\\\\\_attr\\\\)\\\\]{content:attr(underlined_attr);}
.content-\\\\$unocss-var{content:var(--unocss-var);}
.content-empty,
.content-none{content:\\"\\";}
.font-\\\\[system-ui\\\\]{font-family:system-ui;}
Expand Down
11 changes: 6 additions & 5 deletions test/assets/preset-mini-targets.ts
View file
Expand Up @@ -610,10 +610,11 @@ export const presetMiniTargets: string[] = [
// content
'content-empty',
'content-none',
'content-[!]',
'content-[unocss]',
'content-[attr(dashed-attr)]',
'content-[attr(underlined_attr)]',
'content-[normal]',
'content-[quoted:!]',
'content-[quoted:unocss]',
'content-[string:attr(dashed-attr)]',
'content-[string:attr(underlined\\_attr)]',
'content-$unocss-var',

// content visibility
Expand Down Expand Up @@ -923,7 +924,7 @@ export const presetMiniTargets: string[] = [

// variants - pseudo elements
'before:translate-y-full',
'after:content-[unocss]',
'after:content-[quoted:unocss]',
'placeholder-opacity-60',
'placeholder-color-opacity-60',
'placeholder-color-red-1',
Expand Down
17 changes: 8 additions & 9 deletions test/handler.test.ts
View file
Expand Up @@ -32,16 +32,15 @@ describe('value handler', () => {
expect(h.bracket('[var(--A\\_B)]')).eql('var(--A_B)')
})

it('bracket raw-type', () => {
expect(h.bracket('[raw:a b]')).eql('a b')
expect(h.bracket('[raw:a_b]')).eql('a_b')
expect(h.bracket('[raw:a\\_b]')).eql('a\\_b')
expect(h.bracket('[raw:attr("data-label") ":" attr("data-value")]')).eql('attr("data-label") ":" attr("data-value")')
it('bracket string-type', () => {
expect(h.bracket('[string:a_b]')).eql('a b')
expect(h.bracket('[string:a\\_b]')).eql('a\_b')
expect(h.bracket('[string:attr(data-label)_":_"]')).eql('attr(data-label) ": "')
})

it('bracket string-type', () => {
expect(h.bracket('[string:a_b]')).eql('\'a b\'')
expect(h.bracket('[string:a\\_b]')).eql('\'a_b\'')
expect(h.bracket('[string:with-\\,-\'-and-"]')).eql('\'with-\\\\,-\\\'-and-"\'')
it('bracket quoted-type', () => {
expect(h.bracket('[quoted:a_b]')).eql('"a b"')
expect(h.bracket('[quoted:a\\_b]')).eql('"a_b"')
expect(h.bracket('[quoted:\'with-\\,-\'-and-"]')).toMatchInlineSnapshot('"\\"\'with-\\\\\\\\,-\'-and-\\\\\\"\\""')
})
})
8 changes: 4 additions & 4 deletions test/preset-attributify.test.ts
View file
Expand Up @@ -29,7 +29,7 @@ describe('attributify', () => {
translate-x-100%
translate-y-[10%]
rotate-30
after="content-[unocss]"
after="content-[quoted:uno_css]"
rotate-60="" ma=""
m='\`
1 2
Expand Down Expand Up @@ -65,8 +65,8 @@ describe('attributify', () => {
<label absolute leading-1rem left-4 pointer-events-none text-gray-7 top="1/3" transition="200 linear"
peer-not-placeholder-shown="-translate-y-4 scale-75 origin-top-left text-green-500"
peer-focus="-translate-y-4 scale-75 origin-top-left text-green-500"
before="content-!"
after="content-[!]"
before-content="[quoted:!]"
after="content-[string:!]"
>Experience now</label>
</div>
</div>
Expand Down Expand Up @@ -100,7 +100,7 @@ describe('attributify', () => {
transform
translate-x-100
rotate-30
after={"content-[unocss]"}
after={"content-[quoted:uno-css]"}
rotate-60="" ma=""
m='\`
1 2
Expand Down

0 comments on commit 7af3e8e

Please sign in to comment.