Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@warp-ds/uno
Advanced tools
@warp-ds/uno - npm Package Compare versions
Comparing version 1.5.0 to 1.6.0-next.1
@@ -5,3 +5,2 @@ import { parseArgs } from 'node:util'; | ||
| const { | ||
@@ -27,3 +26,3 @@ values: { cliClasses, ...options }, | ||
| const uno = createGenerator({ presets: [presetWarp( { ...options, development: true } )] }); | ||
| const uno = createGenerator({ presets: [presetWarp({ ...options, development: true })] }); | ||
| const devClasses = ['m-16!', 'opacity-50']; | ||
@@ -30,0 +29,0 @@ const classes = cliClasses ?? devClasses; |
| { | ||
| "name": "@warp-ds/uno", | ||
| "repository": "git@github.com:warp-ds/drive.git", | ||
| "version": "1.5.0", | ||
| "version": "1.6.0-next.1", | ||
| "type": "module", | ||
@@ -30,3 +30,2 @@ "exports": { | ||
| "dev": "node dev.js", | ||
| "dev:env": "vite dev-env --config ./vite.config.js", | ||
| "test": "vitest", | ||
@@ -56,4 +55,2 @@ "build": "rollup -c", | ||
| "unocss": "^0.58.0", | ||
| "uvu": "^0.5.6", | ||
| "vite": "^4.5.1", | ||
| "vitest": "^1.1.3" | ||
@@ -60,0 +57,0 @@ }, |
| import { globalKeywords } from '#utils'; | ||
| const verticalAlignAlias = { | ||
| 'mid': 'middle', | ||
| 'base': 'baseline', | ||
| 'btm': 'bottom', | ||
| 'baseline': 'baseline', | ||
| 'top': 'top', | ||
| 'start': 'top', | ||
| 'middle': 'middle', | ||
| 'bottom': 'bottom', | ||
| 'end': 'bottom', | ||
| mid: 'middle', | ||
| base: 'baseline', | ||
| btm: 'bottom', | ||
| baseline: 'baseline', | ||
| top: 'top', | ||
| start: 'top', | ||
| middle: 'middle', | ||
| bottom: 'bottom', | ||
| end: 'bottom', | ||
| 'text-top': 'text-top', | ||
| 'text-bottom': 'text-bottom', | ||
| 'sub': 'sub', | ||
| 'super': 'super', | ||
| ...Object.fromEntries(globalKeywords.map(x => [x, x])), | ||
| sub: 'sub', | ||
| super: 'super', | ||
| ...Object.fromEntries(globalKeywords.map((x) => [x, x])), | ||
| }; | ||
| export const verticalAligns = [ | ||
| [/^align-([-\w]+)$/, ([, v]) => ({ 'vertical-align': verticalAlignAlias[v] }), { autocomplete: `align-(${Object.keys(verticalAlignAlias).join('|')})` }], | ||
| ]; | ||
| export const verticalAligns = [[/^align-([-\w]+)$/, ([, v]) => ({ 'vertical-align': verticalAlignAlias[v] }), { autocomplete: `align-(${Object.keys(verticalAlignAlias).join('|')})` }]]; | ||
| export const textAligns = ['center', 'left', 'right', 'justify', 'start', 'end', ...globalKeywords].map(v => [`text-${v}`, { 'text-align': v }]); | ||
| export const textAligns = ['center', 'left', 'right', 'justify', 'start', 'end', ...globalKeywords].map((v) => [`text-${v}`, { 'text-align': v }]); |
@@ -16,15 +16,21 @@ import { escapeSelector } from '@unocss/core'; | ||
| export const animations = [ | ||
| [/^animate-inprogress$/, ([_selector]) => { | ||
| const selector = escapeSelector(_selector); | ||
| const base = `.${selector}{${inProgress}}`; | ||
| return base + keyFrames; | ||
| }], | ||
| [/^animate-spinner$/, ([_selector]) => { | ||
| const selector = escapeSelector(_selector); | ||
| const baseSpinner = `.${selector}{${spinner}}`; | ||
| const pseudo = `.${selector}::before,.${selector}::after{${spinnerPseudo}}`; | ||
| const pseudoAfter = `.${selector}::after{${spinnerAfter}}`; | ||
| const pseudoBefore = `.${selector}::before{${spinnerBefore}}`; | ||
| return baseSpinner + pseudo + pseudoAfter + pseudoBefore + spinnerKeyframes; | ||
| }], | ||
| ]; | ||
| [ | ||
| /^animate-inprogress$/, | ||
| ([_selector]) => { | ||
| const selector = escapeSelector(_selector); | ||
| const base = `.${selector}{${inProgress}}`; | ||
| return base + keyFrames; | ||
| }, | ||
| ], | ||
| [ | ||
| /^animate-spinner$/, | ||
| ([_selector]) => { | ||
| const selector = escapeSelector(_selector); | ||
| const baseSpinner = `.${selector}{${spinner}}`; | ||
| const pseudo = `.${selector}::before,.${selector}::after{${spinnerPseudo}}`; | ||
| const pseudoAfter = `.${selector}::after{${spinnerAfter}}`; | ||
| const pseudoBefore = `.${selector}::before{${spinnerBefore}}`; | ||
| return baseSpinner + pseudo + pseudoAfter + pseudoBefore + spinnerKeyframes; | ||
| }, | ||
| ], | ||
| ]; |
@@ -1,3 +0,1 @@ | ||
| export const cssVariables = [ | ||
| [/^\[(--(.*)):(.*)\]$/, ([, variable, _, value]) => ({ [variable]: value?.trim() })], | ||
| ]; | ||
| export const cssVariables = [[/^\[(--(.*)):(.*)\]$/, ([, variable, _, value]) => ({ [variable]: value?.trim() })]]; |
| import { escapeSelector, entriesToCss } from '@unocss/core'; | ||
| import { handler as h } from '#utils'; | ||
| const childStyles = entriesToCss(Object.entries({ | ||
| position: 'absolute', | ||
| height: '100%', | ||
| width: '100%', | ||
| top: '0', | ||
| right: '0', | ||
| bottom: '0', | ||
| left: '0', | ||
| })); | ||
| const childStyles = entriesToCss( | ||
| Object.entries({ | ||
| position: 'absolute', | ||
| height: '100%', | ||
| width: '100%', | ||
| top: '0', | ||
| right: '0', | ||
| bottom: '0', | ||
| left: '0', | ||
| }), | ||
| ); | ||
| export const arBackport = [ | ||
| [/^aspect-(.+)$/, ([_selector, d]) => { | ||
| const selector = escapeSelector(_selector); | ||
| const ratioAsPercentage = h.inverseFraction(d); | ||
| const base = `.${selector}{position:relative;padding-bottom:${ratioAsPercentage};}`; | ||
| const child = `.${selector}>*{${childStyles}}`; | ||
| return base + child; | ||
| }, { autocomplete: ['aspect-(ratio)'] }], | ||
| [/^aspect-(video|square)$/, ([_selector, v]) => { | ||
| const fraction = v === "video" ? "16/9" : "1/1"; | ||
| const ratioAsPercentage = h.inverseFraction(fraction); | ||
| const base = `.${_selector}{position:relative;padding-bottom:${ratioAsPercentage};}`; | ||
| const child = `.${_selector}>*{${childStyles}}`; | ||
| return base + child; | ||
| }, { autocomplete: ['aspect-(ratio)'] }], | ||
| [ | ||
| /^aspect-(.+)$/, | ||
| ([_selector, d]) => { | ||
| const selector = escapeSelector(_selector); | ||
| const ratioAsPercentage = h.inverseFraction(d); | ||
| const base = `.${selector}{position:relative;padding-bottom:${ratioAsPercentage};}`; | ||
| const child = `.${selector}>*{${childStyles}}`; | ||
| return base + child; | ||
| }, | ||
| { autocomplete: ['aspect-(ratio)'] }, | ||
| ], | ||
| [ | ||
| /^aspect-(video|square)$/, | ||
| ([_selector, v]) => { | ||
| const fraction = v === 'video' ? '16/9' : '1/1'; | ||
| const ratioAsPercentage = h.inverseFraction(fraction); | ||
| const base = `.${_selector}{position:relative;padding-bottom:${ratioAsPercentage};}`; | ||
| const child = `.${_selector}>*{${childStyles}}`; | ||
| return base + child; | ||
| }, | ||
| { autocomplete: ['aspect-(ratio)'] }, | ||
| ], | ||
| ['aspect-ratio', { 'aspect-ratio': 'auto' }], | ||
| ]; |
@@ -27,6 +27,9 @@ import { positionMap, globalKeywords, makeGlobalStaticRules, resolveArbitraryValues } from '#utils'; | ||
| ['bg-clip-text', { '-webkit-background-clip': 'text', 'background-clip': 'text' }], | ||
| ...globalKeywords.map(keyword => [`bg-clip-${keyword}`, { | ||
| '-webkit-background-clip': keyword, | ||
| 'background-clip': keyword, | ||
| }]), | ||
| ...globalKeywords.map((keyword) => [ | ||
| `bg-clip-${keyword}`, | ||
| { | ||
| '-webkit-background-clip': keyword, | ||
| 'background-clip': keyword, | ||
| }, | ||
| ]), | ||
@@ -52,13 +55,11 @@ // repeat | ||
| ['bg-current', { 'background-color': 'currentColor' }], | ||
| [/^bg-\[(var\(--.+\)|--.+)]$/, ([, val]) => ({ 'background-color': val.startsWith('--') ? `var(${val})` : val })], | ||
| // arbitrary color | ||
| [/^bg-\[(--.+)]$/, ([, p]) => ({ 'background-color': `var(${p})` })], | ||
| [/^bg-\[(var\(--.+\))]$/, ([, p]) => ({ 'background-color': p })], | ||
| // arbitrary image | ||
| [/^bg-\[(url\(.+\))]$/, ([, p]) => { | ||
| // image | ||
| ['bg-none', { 'background-image': 'none' }], | ||
| [ | ||
| /^bg-\[(url\(.+\))]$/, | ||
| // Extract potential css variable from url: url(var(--a-background-image-url)) -> var(--a-background-image-url) | ||
| const cssVar = p.match(/^url\((var\([^)]+\))\)$/)?.[1]; | ||
| return { 'background-image': cssVar ?? p }; | ||
| }], | ||
| ([, p]) => ({ 'background-image': p.match(/^url\((var\([^)]+\))\)$/)?.[1] ?? p }), | ||
| ], | ||
| ]; |
| import { handler as h, makeGlobalStaticRules } from '#utils'; | ||
| export const appearance = [ | ||
| ['appearance-none', { | ||
| 'appearance': 'none', | ||
| '-webkit-appearance': 'none', | ||
| }], | ||
| [ | ||
| 'appearance-none', | ||
| { | ||
| appearance: 'none', | ||
| '-webkit-appearance': 'none', | ||
| }, | ||
| ], | ||
| ]; | ||
| const willChangeProperty = (prop) => h.properties.auto.global(prop); | ||
| export const willChange = [ | ||
| [/^will-change-(.+)/, ([, p]) => ({ 'will-change': willChangeProperty(p) })], | ||
| ]; | ||
| export const willChange = [[/^will-change-(.+)/, ([, p]) => ({ 'will-change': willChangeProperty(p) })]]; | ||
| export const overscrolls = [ | ||
| ['overscroll-auto', { 'overscroll-behavior': 'auto' }], | ||
| ['overscroll-contain', { 'overscroll-behavior': 'contain' }], | ||
| ['overscroll-none', { 'overscroll-behavior': 'none' }], | ||
| ...makeGlobalStaticRules('overscroll', 'overscroll-behavior'), | ||
| ['overscroll-x-auto', { 'overscroll-behavior-x': 'auto' }], | ||
| ['overscroll-x-contain', { 'overscroll-behavior-x': 'contain' }], | ||
| ['overscroll-x-none', { 'overscroll-behavior-x': 'none' }], | ||
| ...makeGlobalStaticRules('overscroll-x', 'overscroll-behavior-x'), | ||
| ['overscroll-y-auto', { 'overscroll-behavior-y': 'auto' }], | ||
| ['overscroll-y-contain', { 'overscroll-behavior-y': 'contain' }], | ||
| ['overscroll-y-none', { 'overscroll-behavior-y': 'none' }], | ||
| ...makeGlobalStaticRules('overscroll-y', 'overscroll-behavior-y'), | ||
| ]; | ||
| export const overscrolls = [['overscroll-auto', { 'overscroll-behavior': 'auto' }], ['overscroll-contain', { 'overscroll-behavior': 'contain' }], ['overscroll-none', { 'overscroll-behavior': 'none' }], ...makeGlobalStaticRules('overscroll', 'overscroll-behavior'), ['overscroll-x-auto', { 'overscroll-behavior-x': 'auto' }], ['overscroll-x-contain', { 'overscroll-behavior-x': 'contain' }], ['overscroll-x-none', { 'overscroll-behavior-x': 'none' }], ...makeGlobalStaticRules('overscroll-x', 'overscroll-behavior-x'), ['overscroll-y-auto', { 'overscroll-behavior-y': 'auto' }], ['overscroll-y-contain', { 'overscroll-behavior-y': 'contain' }], ['overscroll-y-none', { 'overscroll-behavior-y': 'none' }], ...makeGlobalStaticRules('overscroll-y', 'overscroll-behavior-y')]; | ||
| export const scrollBehaviors = [ | ||
| ['scroll-auto', { 'scroll-behavior': 'auto' }], | ||
| ['scroll-smooth', { 'scroll-behavior': 'smooth' }], | ||
| ...makeGlobalStaticRules('scroll', 'scroll-behavior'), | ||
| ]; | ||
| export const scrollBehaviors = [['scroll-auto', { 'scroll-behavior': 'auto' }], ['scroll-smooth', { 'scroll-behavior': 'smooth' }], ...makeGlobalStaticRules('scroll', 'scroll-behavior')]; |
@@ -1,7 +0,5 @@ | ||
| export const opacity = [ | ||
| [/^opacity-(\d+)$/, ([, d], { theme }) => ({ opacity: theme.opacity[d] }), { autocomplete: 'opacity-${opacity}' }], | ||
| ]; | ||
| export const opacity = [[/^opacity-(\d+)$/, ([, d], { theme }) => ({ opacity: theme.opacity[d] }), { autocomplete: 'opacity-${opacity}' }]]; | ||
| export const caretColors = [ | ||
| ['caret-inherit', { 'caret-color': 'inherit' }], | ||
| ['caret-inherit', { 'caret-color': 'inherit' }], | ||
| ['caret-transparent', { 'caret-color': 'transparent' }], | ||
@@ -12,7 +10,7 @@ ['caret-current', { 'caret-color': 'currentColor' }], | ||
| export const textColors = [ | ||
| // ['text-inherit', { 'color': 'inherit' }], // This class currently sets "text-align: inherit;" in align.js | ||
| ['text-transparent', { 'color': 'transparent' }], | ||
| ['text-current', { 'color': 'currentColor' }], | ||
| [/^text-\[(--.+)]$/, ([, p]) => ({ 'color': `var(${p})` })], | ||
| [/^text-\[(var\(--.+\))]$/, ([, p]) => ({ 'color': p })], | ||
| // ['text-inherit', { 'color': 'inherit' }], // This class currently sets "text-align: inherit;" in align.js | ||
| ['text-transparent', { color: 'transparent' }], | ||
| ['text-current', { color: 'currentColor' }], | ||
| [/^text-\[(--.+)]$/, ([, p]) => ({ color: `var(${p})` })], | ||
| [/^text-\[(var\(--.+\))]$/, ([, p]) => ({ color: p })], | ||
| ]; |
| export const textDecorations = [ | ||
| [/^(underline|line-through)$/, ([, s]) => ({ 'text-decoration-line': s })], | ||
| ['no-underline', { 'text-decoration': 'none' }], | ||
| ]; | ||
| ]; |
| import { globalKeywords, handler as h } from '#utils'; | ||
| export const display = [ | ||
@@ -5,0 +4,0 @@ ['block', { display: 'block' }], |
@@ -6,3 +6,12 @@ import { handler as h, resolveArbitraryValues } from '#utils'; | ||
| /^flex-(.*)$/, | ||
| ([_, d]) => ({ flex: h.bracket(d) != null ? h.bracket(d).split(' ').map(e => h.cssvar.fraction(e) ?? e).join(' ') : h.cssvar.fraction(d) }), | ||
| ([_, d]) => ({ | ||
| flex: | ||
| h.bracket(d) != null | ||
| ? h | ||
| .bracket(d) | ||
| .split(' ') | ||
| .map((e) => h.cssvar.fraction(e) ?? e) | ||
| .join(' ') | ||
| : h.cssvar.fraction(d), | ||
| }), | ||
| ], | ||
@@ -16,18 +25,6 @@ ['flex-1', { flex: '1 1 0%' }], | ||
| ['shrink', { 'flex-shrink': 1 }], | ||
| [ | ||
| /^shrink-\[?(\d+)]?$/, | ||
| ([, d]) => ({ 'flex-shrink': h.number(d) ?? 1 }), | ||
| { autocomplete: ['shrink-<num>'] }, | ||
| ], | ||
| [/^shrink-\[?(\d+)]?$/, ([, d]) => ({ 'flex-shrink': h.number(d) ?? 1 }), { autocomplete: ['shrink-<num>'] }], | ||
| ['grow', { 'flex-grow': 1 }], | ||
| [ | ||
| /^grow-\[?(\d+)]?$/, | ||
| ([, d = '']) => ({ 'flex-grow': h.number(d) ?? 1 }), | ||
| { autocomplete: ['grow-<num>'] }, | ||
| ], | ||
| [ | ||
| /^basis-(.+)$/, | ||
| ([, d], { theme }) => ({ 'flex-basis': theme.spacing?.[d] ?? h.auto.fraction(d) }), | ||
| { autocomplete: ['basis-$spacing'] }, | ||
| ], | ||
| [/^grow-\[?(\d+)]?$/, ([, d = '']) => ({ 'flex-grow': h.number(d) ?? 1 }), { autocomplete: ['grow-<num>'] }], | ||
| [/^basis-(.+)$/, ([, d], { theme }) => ({ 'flex-basis': theme.spacing?.[d] ?? h.auto.fraction(d) }), { autocomplete: ['basis-$spacing'] }], | ||
| // matching arbitrary values | ||
@@ -34,0 +31,0 @@ [ |
| import { entriesToCss, escapeSelector } from '@unocss/core'; | ||
| // TODO: Remove deprecated fallback (--w-s-color-focused) in v2 | ||
| const focusRingStyle = entriesToCss(Object.entries({ | ||
| outline: '2px solid var(--w-s-color-border-focused, var(--w-s-color-focused))', | ||
| 'outline-offset': 'var(--w-outline-offset, 1px)', | ||
| })); | ||
| const focusRingStyle = entriesToCss( | ||
| Object.entries({ | ||
| outline: '2px solid var(--w-s-color-border-focused, var(--w-s-color-focused))', | ||
| 'outline-offset': 'var(--w-outline-offset, 1px)', | ||
| }), | ||
| ); | ||
| const outlineNone = entriesToCss(Object.entries({ | ||
| outline: 'none', | ||
| })); | ||
| const outlineNone = entriesToCss( | ||
| Object.entries({ | ||
| outline: 'none', | ||
| }), | ||
| ); | ||
@@ -18,28 +22,31 @@ const focusRingInsetStyle = { | ||
| const combinatorsByTag = { | ||
| 'group': ' ', | ||
| 'peer': '~', | ||
| 'parent': '>', | ||
| 'previous': '+', | ||
| group: ' ', | ||
| peer: '~', | ||
| parent: '>', | ||
| previous: '+', | ||
| }; | ||
| export const focusRing = [ | ||
| [/focusable$/, ([], { rawSelector: selectorWithVariant, currentSelector }) => { | ||
| if (currentSelector !== selectorWithVariant) { | ||
| const escapedSelector = escapeSelector(selectorWithVariant); | ||
| const tagLabel = selectorWithVariant?.split('-')?.[0] ?? ''; | ||
| const combinator = combinatorsByTag[tagLabel]; | ||
| if (!!combinator) { | ||
| const focus = `.${tagLabel}:focus${combinator}.${escapedSelector},.${tagLabel}:focus-visible${combinator}.${escapedSelector}{${focusRingStyle}}`; | ||
| const notFocusVisible = `.${tagLabel}:not(:focus-visible)${combinator}.${escapedSelector}{${outlineNone}}`; | ||
| [ | ||
| /focusable$/, | ||
| ([], { rawSelector: selectorWithVariant, currentSelector }) => { | ||
| if (currentSelector !== selectorWithVariant) { | ||
| const escapedSelector = escapeSelector(selectorWithVariant); | ||
| const tagLabel = selectorWithVariant?.split('-')?.[0] ?? ''; | ||
| const combinator = combinatorsByTag[tagLabel]; | ||
| if (!!combinator) { | ||
| const focus = `.${tagLabel}:focus${combinator}.${escapedSelector},.${tagLabel}:focus-visible${combinator}.${escapedSelector}{${focusRingStyle}}`; | ||
| const notFocusVisible = `.${tagLabel}:not(:focus-visible)${combinator}.${escapedSelector}{${outlineNone}}`; | ||
| return focus + notFocusVisible; | ||
| } | ||
| return `.${escapedSelector}:${selectorWithVariant.split(':')?.[0]}{${focusRingStyle}}`; | ||
| } else { | ||
| const escapedCurrentSelector = escapeSelector(currentSelector); | ||
| const focus = `.${escapedCurrentSelector}:focus,.${escapedCurrentSelector}:focus-visible{${focusRingStyle}}`; | ||
| const notFocusVisible = `.${escapedCurrentSelector}:not(:focus-visible){${outlineNone}}`; | ||
| return focus + notFocusVisible; | ||
| } | ||
| return `.${escapedSelector}:${selectorWithVariant.split(':')?.[0]}{${focusRingStyle}}`; | ||
| } else { | ||
| const escapedCurrentSelector = escapeSelector(currentSelector); | ||
| const focus = `.${escapedCurrentSelector}:focus,.${escapedCurrentSelector}:focus-visible{${focusRingStyle}}`; | ||
| const notFocusVisible = `.${escapedCurrentSelector}:not(:focus-visible){${outlineNone}}`; | ||
| return focus + notFocusVisible; | ||
| } | ||
| }], | ||
| ["focusable-inset", { ... focusRingInsetStyle }], | ||
| }, | ||
| ], | ||
| ['focusable-inset', { ...focusRingInsetStyle }], | ||
| ]; |
@@ -22,42 +22,16 @@ import { handler as h, resolveArbitraryValues } from '#utils'; | ||
| ['row-span-full', { 'grid-row': '1 / -1' }], | ||
| [ | ||
| /^row-span-(\d+)$/, | ||
| ([, d]) => ({ 'grid-row': `span ${h.number(d)}/span ${h.number(d)}` }), | ||
| ], | ||
| [ | ||
| /^col-span-(\d+)$/, | ||
| ([, d]) => ({ 'grid-column': `span ${h.number(d)}/span ${h.number(d)}` }), | ||
| { autocomplete: ['(row|col)-span-<num>'] }, | ||
| ], | ||
| [/^row-span-(\d+)$/, ([, d]) => ({ 'grid-row': `span ${h.number(d)}/span ${h.number(d)}` })], | ||
| [/^col-span-(\d+)$/, ([, d]) => ({ 'grid-column': `span ${h.number(d)}/span ${h.number(d)}` }), { autocomplete: ['(row|col)-span-<num>'] }], | ||
| // starts & ends | ||
| [ | ||
| /^row-start-(.+)$/, | ||
| ([, d]) => ({ 'grid-row-start': h.number.auto(d) }), | ||
| ], | ||
| [ | ||
| /^col-start-(.+)$/, | ||
| ([, d]) => ({ 'grid-column-start': h.number.auto(d) }), | ||
| ], | ||
| [ | ||
| /^row-end-(.+)$/, | ||
| ([, d]) => ({ 'grid-row-end': h.number.auto(d) }), | ||
| ], | ||
| [ | ||
| /^col-end-(.+)$/, | ||
| ([, d]) => ({ 'grid-column-end': h.number.auto(d) }), | ||
| { autocomplete: ['(row|col)-(start|end)-<num>'] }, | ||
| ], | ||
| [/^row-start-(.+)$/, ([, d]) => ({ 'grid-row-start': h.number.auto(d) })], | ||
| [/^col-start-(.+)$/, ([, d]) => ({ 'grid-column-start': h.number.auto(d) })], | ||
| [/^row-end-(.+)$/, ([, d]) => ({ 'grid-row-end': h.number.auto(d) })], | ||
| [/^col-end-(.+)$/, ([, d]) => ({ 'grid-column-end': h.number.auto(d) }), { autocomplete: ['(row|col)-(start|end)-<num>'] }], | ||
| // auto flows | ||
| [/^auto-rows-(.+)$/, ([, v]) => ({ 'grid-auto-rows': autoDirection(v) })], | ||
| [ | ||
| /^auto-cols-(.+)$/, | ||
| ([, v]) => ({ 'grid-auto-columns': autoDirection(v) }), | ||
| { autocomplete: ['auto-(rows|cols)-<num>'] }, | ||
| ], | ||
| [/^auto-cols-(.+)$/, ([, v]) => ({ 'grid-auto-columns': autoDirection(v) }), { autocomplete: ['auto-(rows|cols)-<num>'] }], | ||
| // matching arbitrary values auto-rows + auto-cols | ||
| [/^auto-rows-\[([\w%]+(?:[-\w()%,.]+)*)\]$/, ([, v]) => ({ 'grid-auto-rows': resolveArbitraryValues(v, null, null) })], | ||
| [/^auto-cols-\[([\w%]+(?:[-\w()%,.]+)*)\]$/, ([, v]) => ({ 'grid-auto-columns': resolveArbitraryValues(v, null, null) }), | ||
| { autocomplete: ['auto-(rows|cols)-<num>'] }, | ||
| ], | ||
| [/^auto-cols-\[([\w%]+(?:[-\w()%,.]+)*)\]$/, ([, v]) => ({ 'grid-auto-columns': resolveArbitraryValues(v, null, null) }), { autocomplete: ['auto-(rows|cols)-<num>'] }], | ||
@@ -72,7 +46,4 @@ ['grid-flow-row', { 'grid-auto-flow': 'row' }], | ||
| [/^grid-cols-(.+)$/, ([, v]) => ({ 'grid-template-columns': h.bracket(v) })], | ||
| [/^grid-rows-minmax-([\w.-]+)$/, ([, d]) => ({ 'grid-template-rows': `repeat(auto-fill,minmax(${d},1fr))` })], | ||
| [ | ||
| /^grid-rows-minmax-([\w.-]+)$/, | ||
| ([, d]) => ({ 'grid-template-rows': `repeat(auto-fill,minmax(${d},1fr))` }), | ||
| ], | ||
| [ | ||
| /^grid-cols-minmax-([\w.-]+)$/, | ||
@@ -83,13 +54,6 @@ ([, d]) => ({ | ||
| ], | ||
| [ | ||
| /^grid-rows-(\d+)$/, | ||
| ([, d]) => ({ 'grid-template-rows': `repeat(${d},minmax(0,1fr))` }), | ||
| ], | ||
| [ | ||
| /^grid-cols-(\d+)$/, | ||
| ([, d]) => ({ 'grid-template-columns': `repeat(${d},minmax(0,1fr))` }), | ||
| { autocomplete: ['grid-(rows|cols)-<num>', 'grid-(rows|cols)-none'] }, | ||
| ], | ||
| [/^grid-rows-(\d+)$/, ([, d]) => ({ 'grid-template-rows': `repeat(${d},minmax(0,1fr))` })], | ||
| [/^grid-cols-(\d+)$/, ([, d]) => ({ 'grid-template-columns': `repeat(${d},minmax(0,1fr))` }), { autocomplete: ['grid-(rows|cols)-<num>', 'grid-(rows|cols)-none'] }], | ||
| ['grid-rows-none', { 'grid-template-rows': 'none' }], | ||
| ['grid-cols-none', { 'grid-template-columns': 'none' }], | ||
| ]; |
@@ -1,33 +0,33 @@ | ||
| import * as align from "./align.js"; | ||
| import * as animations from "./animations.js"; | ||
| import * as arbitrary from "./arbitrary.js"; | ||
| import * as aspectRatio from "./aspect-ratio.js"; | ||
| import * as align from './align.js'; | ||
| import * as animations from './animations.js'; | ||
| import * as arbitrary from './arbitrary.js'; | ||
| import * as aspectRatio from './aspect-ratio.js'; | ||
| import * as backdrop from './backdrop.js'; | ||
| import * as backgrounds from './background.js'; | ||
| import * as behaviors from "./behaviors.js"; | ||
| import * as border from "./border.js"; | ||
| import * as color from "./color.js"; | ||
| import * as display from "./display.js"; | ||
| import * as decoration from "./decoration.js"; | ||
| import * as flex from "./flex.js"; | ||
| import * as focusRing from "./focus-ring.js"; | ||
| import * as gap from "./gap.js"; | ||
| import * as grid from "./grid.js"; | ||
| import * as behaviors from './behaviors.js'; | ||
| import * as border from './border.js'; | ||
| import * as color from './color.js'; | ||
| import * as display from './display.js'; | ||
| import * as decoration from './decoration.js'; | ||
| import * as flex from './flex.js'; | ||
| import * as focusRing from './focus-ring.js'; | ||
| import * as gap from './gap.js'; | ||
| import * as grid from './grid.js'; | ||
| import * as internal from './internal.js'; | ||
| import * as layout from "./layout.js"; | ||
| import * as lineClamp from "./line-clamp.js"; | ||
| import * as list from "./list.js"; | ||
| import * as outline from "./outline.js"; | ||
| import * as position from "./position.js"; | ||
| import * as layout from './layout.js'; | ||
| import * as lineClamp from './line-clamp.js'; | ||
| import * as list from './list.js'; | ||
| import * as outline from './outline.js'; | ||
| import * as position from './position.js'; | ||
| import * as semantic from './semantic.js'; | ||
| import * as shadow from "./shadow.js"; | ||
| import * as size from "./size.js"; | ||
| import * as slider from "./slider.js"; | ||
| import * as shadow from './shadow.js'; | ||
| import * as size from './size.js'; | ||
| import * as slider from './slider.js'; | ||
| import * as spaceMargin from './space-margin.js'; | ||
| import * as spacing from "./spacing.js"; | ||
| import * as typography from "./typography.js"; | ||
| import * as staticRules from "./static.js"; | ||
| import * as transform from "./transform.js"; | ||
| import * as transition from "./transition.js"; | ||
| import * as table from "./table.js"; | ||
| import * as spacing from './spacing.js'; | ||
| import * as typography from './typography.js'; | ||
| import * as staticRules from './static.js'; | ||
| import * as transform from './transform.js'; | ||
| import * as transition from './transition.js'; | ||
| import * as table from './table.js'; | ||
@@ -69,37 +69,35 @@ const ruleGroups = { | ||
| export const rules = [ | ||
| ...Object.values(ruleGroups), | ||
| ].flat(1); | ||
| export const rules = [...Object.values(ruleGroups)].flat(1); | ||
| export * from "./align.js"; | ||
| export * from "./animations.js"; | ||
| export * from "./arbitrary.js"; | ||
| export * from "./aspect-ratio.js"; | ||
| export * from './align.js'; | ||
| export * from './animations.js'; | ||
| export * from './arbitrary.js'; | ||
| export * from './aspect-ratio.js'; | ||
| export * from './backdrop.js'; | ||
| export * from './background.js'; | ||
| export * from "./behaviors.js"; | ||
| export * from "./border.js"; | ||
| export * from "./color.js"; | ||
| export * from "./display.js"; | ||
| export * from "./decoration.js"; | ||
| export * from "./flex.js"; | ||
| export * from "./focus-ring.js"; | ||
| export * from "./gap.js"; | ||
| export * from "./grid.js"; | ||
| export * from './behaviors.js'; | ||
| export * from './border.js'; | ||
| export * from './color.js'; | ||
| export * from './display.js'; | ||
| export * from './decoration.js'; | ||
| export * from './flex.js'; | ||
| export * from './focus-ring.js'; | ||
| export * from './gap.js'; | ||
| export * from './grid.js'; | ||
| export * from './internal.js'; | ||
| export * from "./layout.js"; | ||
| export * from "./line-clamp.js"; | ||
| export * from "./list.js"; | ||
| export * from "./outline.js"; | ||
| export * from "./position.js"; | ||
| export * from './layout.js'; | ||
| export * from './line-clamp.js'; | ||
| export * from './list.js'; | ||
| export * from './outline.js'; | ||
| export * from './position.js'; | ||
| export * from './semantic.js'; | ||
| export * from "./shadow.js"; | ||
| export * from "./size.js"; | ||
| export * from './shadow.js'; | ||
| export * from './size.js'; | ||
| export * from './space-margin.js'; | ||
| export * from "./spacing.js"; | ||
| export * from "./static.js"; | ||
| export * from "./slider.js"; | ||
| export * from "./table.js"; | ||
| export * from "./transform.js"; | ||
| export * from "./transition.js"; | ||
| export * from "./typography.js"; | ||
| export * from './spacing.js'; | ||
| export * from './static.js'; | ||
| export * from './slider.js'; | ||
| export * from './table.js'; | ||
| export * from './transform.js'; | ||
| export * from './transition.js'; | ||
| export * from './typography.js'; |
@@ -8,9 +8,10 @@ import { handler as h, directionMap } from '#utils'; | ||
| [/^i-shadow-(.+)$/, ([, cssvar]) => ({ 'box-shadow': h.warpToken(cssvar) })], | ||
| [/^i-border-([rltb])-(.+)$/, ([, direction, cssvar]) => { | ||
| if (direction in directionMap && cssvar != null) { | ||
| return directionMap[direction].map( | ||
| (dir) => [`border${dir}-color`, h.warpToken(cssvar)], | ||
| ); | ||
| } | ||
| }], | ||
| [ | ||
| /^i-border-([rltb])-(.+)$/, | ||
| ([, direction, cssvar]) => { | ||
| if (direction in directionMap && cssvar != null) { | ||
| return directionMap[direction].map((dir) => [`border${dir}-color`, h.warpToken(cssvar)]); | ||
| } | ||
| }, | ||
| ], | ||
| ]; |
| import { handler as h } from '#utils'; | ||
| const overflowValues = ["auto", "hidden", "visible", "scroll", "clip"]; | ||
| const overflowValues = ['auto', 'hidden', 'visible', 'scroll', 'clip']; | ||
@@ -10,27 +10,14 @@ export const overflows = [ | ||
| { | ||
| autocomplete: [ | ||
| `overflow-(${overflowValues.join("|")})`, | ||
| `overflow-(x|y)-(${overflowValues.join("|")})`, | ||
| ], | ||
| autocomplete: [`overflow-(${overflowValues.join('|')})`, `overflow-(x|y)-(${overflowValues.join('|')})`], | ||
| }, | ||
| ], | ||
| [ | ||
| /^(?:overflow)-([xy])-(.+)$/, | ||
| ([, d, v]) => | ||
| (overflowValues.includes(v) ? { [`overflow-${d}`]: v } : undefined), | ||
| ], | ||
| [/^(?:overflow)-([xy])-(.+)$/, ([, d, v]) => (overflowValues.includes(v) ? { [`overflow-${d}`]: v } : undefined)], | ||
| ]; | ||
| export const columns = [ | ||
| ['columns-auto', { 'columns': 'auto' }], | ||
| ['columns-auto', { columns: 'auto' }], | ||
| [/^columns-([1-9]|1[0-2])$/, | ||
| ([, d]) => ({ 'columns': h.number(d) }), | ||
| { autocomplete: 'columns-<num>' }, | ||
| ], | ||
| [/^columns-([1-9]|1[0-2])$/, ([, d]) => ({ columns: h.number(d) }), { autocomplete: 'columns-<num>' }], | ||
| // matching arbitrary values | ||
| [/^columns-\[(\d+)]$/, | ||
| ([, d]) => ({ 'columns': h.number(d) }), | ||
| { autocomplete: 'columns-<num>' }, | ||
| ], | ||
| [/^columns-\[(\d+)]$/, ([, d]) => ({ columns: h.number(d) }), { autocomplete: 'columns-<num>' }], | ||
| ]; |
| // TODO: can we get rid of box-orient and webkit-box? | ||
| // seems like they might be supporting _very_ old browsers and are marked deprecated | ||
| export const lineClamp = [ | ||
| [/^line-clamp-(\d+)$/, ([, v]) => ({ | ||
| 'overflow': 'hidden', | ||
| 'display': '-webkit-box', | ||
| '-webkit-box-orient': 'vertical', | ||
| '-webkit-line-clamp': v, | ||
| 'line-clamp': v, | ||
| }), { autocomplete: ['line-clamp-<num>'] }], | ||
| [ | ||
| /^line-clamp-(\d+)$/, | ||
| ([, v]) => ({ | ||
| overflow: 'hidden', | ||
| display: '-webkit-box', | ||
| '-webkit-box-orient': 'vertical', | ||
| '-webkit-line-clamp': v, | ||
| 'line-clamp': v, | ||
| }), | ||
| { autocomplete: ['line-clamp-<num>'] }, | ||
| ], | ||
| ]; |
| import { entriesToCss } from '@unocss/core'; | ||
| import { makeGlobalStaticRules } from "#utils"; | ||
| import { makeGlobalStaticRules } from '#utils'; | ||
| const listStyleTypes = { | ||
| 'disc': 'disc', | ||
| 'circle': 'circle', | ||
| 'square': 'square', | ||
| 'decimal': 'decimal', | ||
| disc: 'disc', | ||
| circle: 'circle', | ||
| square: 'square', | ||
| decimal: 'decimal', | ||
| 'zero-decimal': 'decimal-leading-zero', | ||
@@ -28,30 +28,39 @@ }; | ||
| const listCheckedContainerStyles = entriesToCss(Object.entries({ | ||
| 'line-height': 'var(--w-font-line-height-1)', //TODO: Add proper line-height variable | ||
| })); | ||
| const listCheckedItemStyles = entriesToCss(Object.entries({ | ||
| position: 'relative', | ||
| 'padding-left': '24px', //TODO: Change to corresponding variable when available | ||
| })); | ||
| const checkmarkStyles = entriesToCss(Object.entries({ | ||
| content: '""', | ||
| display: 'block', | ||
| position: 'absolute', | ||
| width: '16px', //TODO: Change to corresponding variable when available | ||
| height: '28px', //TODO: Change to corresponding variable when available | ||
| left: 0, | ||
| color: 'var(--w-list-color-icon-checked)', | ||
| 'background-size': 'contain', | ||
| 'background-position': '50%', | ||
| 'background-repeat': 'no-repeat', | ||
| 'background-image': '""', //TODO: Can we do this with an svg image url here? Or how will we solve this? Themeable? | ||
| })); | ||
| const listCheckedContainerStyles = entriesToCss( | ||
| Object.entries({ | ||
| 'line-height': 'var(--w-font-line-height-1)', //TODO: Add proper line-height variable | ||
| }), | ||
| ); | ||
| const listCheckedItemStyles = entriesToCss( | ||
| Object.entries({ | ||
| position: 'relative', | ||
| 'padding-left': '24px', //TODO: Change to corresponding variable when available | ||
| }), | ||
| ); | ||
| const checkmarkStyles = entriesToCss( | ||
| Object.entries({ | ||
| content: '""', | ||
| display: 'block', | ||
| position: 'absolute', | ||
| width: '16px', //TODO: Change to corresponding variable when available | ||
| height: '28px', //TODO: Change to corresponding variable when available | ||
| left: 0, | ||
| color: 'var(--w-list-color-icon-checked)', | ||
| 'background-size': 'contain', | ||
| 'background-position': '50%', | ||
| 'background-repeat': 'no-repeat', | ||
| 'background-image': '""', //TODO: Can we do this with an svg image url here? Or how will we solve this? Themeable? | ||
| }), | ||
| ); | ||
| export const listChecked = [ | ||
| [/^list-checked$/, ([selector]) => { | ||
| const listContainer = `.${selector}{${listCheckedContainerStyles}}`; | ||
| const listItem = `.${selector}>li{${listCheckedItemStyles}}`; | ||
| const checkmark = `.${selector}>li::before{${checkmarkStyles}}`; | ||
| return listContainer + listItem + checkmark; | ||
| }], | ||
| ]; | ||
| [ | ||
| /^list-checked$/, | ||
| ([selector]) => { | ||
| const listContainer = `.${selector}{${listCheckedContainerStyles}}`; | ||
| const listItem = `.${selector}>li{${listCheckedItemStyles}}`; | ||
| const checkmark = `.${selector}>li::before{${checkmarkStyles}}`; | ||
| return listContainer + listItem + checkmark; | ||
| }, | ||
| ], | ||
| ]; |
@@ -17,13 +17,9 @@ import { lineWidth } from '#theme'; | ||
| export const outlineStyle = [ | ||
| ["outline-none", { ...outlineNone }], | ||
| ["outline", { "outline-style": "solid" }], | ||
| ["outline-dashed", { "outline-style": "dashed" }], | ||
| ["outline-dotted", { "outline-style": "dotted" }], | ||
| ["outline-double", { "outline-style": "double" }], | ||
| ['outline-none', { ...outlineNone }], | ||
| ['outline', { 'outline-style': 'solid' }], | ||
| ['outline-dashed', { 'outline-style': 'dashed' }], | ||
| ['outline-dotted', { 'outline-style': 'dotted' }], | ||
| ['outline-double', { 'outline-style': 'double' }], | ||
| ]; | ||
| export const outlineWidth = [ | ||
| [/^outline-(\d+)$/, ([, w]) => ({ ['outline-width']: lineWidth?.[w ?? 1] }), { autocomplete: `outline-(${Object.keys(lineWidth).join('|')})` }], | ||
| ]; | ||
| export const outlineOffset = [ | ||
| [/^outline-offset-(\d+)$/, ([, w]) => ({ [`outline-offset`]: lineWidth?.[w ?? 1] }), { autocomplete: `outline-offset-(${Object.keys(lineWidth).join('|')})` }], | ||
| ]; | ||
| export const outlineWidth = [[/^outline-(\d+)$/, ([, w]) => ({ ['outline-width']: lineWidth?.[w ?? 1] }), { autocomplete: `outline-(${Object.keys(lineWidth).join('|')})` }]]; | ||
| export const outlineOffset = [[/^outline-offset-(\d+)$/, ([, w]) => ({ [`outline-offset`]: lineWidth?.[w ?? 1] }), { autocomplete: `outline-offset-(${Object.keys(lineWidth).join('|')})` }]]; |
| import { handler as h, insetMap, makeGlobalStaticRules, resolveArbitraryValues } from '#utils'; | ||
| import { warnOnce } from '@unocss/core'; | ||
| export const positions = [ | ||
| [/^(static|fixed|absolute|relative|sticky)$/, ([, v]) => ({ position: v })], | ||
| ]; | ||
| export const positions = [[/^(static|fixed|absolute|relative|sticky)$/, ([, v]) => ({ position: v })]]; | ||
@@ -13,11 +11,5 @@ export const orders = [ | ||
| [/^order-([1-9]|1[0-2])$/, | ||
| ([, d]) => ({ 'order': h.number(d) }), | ||
| { autocomplete: 'order-<num>' }, | ||
| ], | ||
| [/^order-([1-9]|1[0-2])$/, ([, d]) => ({ order: h.number(d) }), { autocomplete: 'order-<num>' }], | ||
| // matching arbitrary values | ||
| [/^order-\[(\d+)]$/, | ||
| ([, d]) => ({ 'order': h.number(d) }), | ||
| { autocomplete: 'order-<num>' }, | ||
| ], | ||
| [/^order-\[(\d+)]$/, ([, d]) => ({ order: h.number(d) }), { autocomplete: 'order-<num>' }], | ||
| ]; | ||
@@ -112,12 +104,10 @@ | ||
| const r = handleInsetValue(v, ctx); | ||
| if (r != null && d in insetMap) return insetMap[d].map(i => [i.slice(1), r]); | ||
| if (r != null && d in insetMap) return insetMap[d].map((i) => [i.slice(1), r]); | ||
| } | ||
| export const insets = [ | ||
| [/^inset-(.+)$/, ([, v], ctx) => ({ inset: handleInsetValue(v, ctx) }), | ||
| [ | ||
| /^inset-(.+)$/, | ||
| ([, v], ctx) => ({ inset: handleInsetValue(v, ctx) }), | ||
| { | ||
| autocomplete: [ | ||
| 'inset-$spacing', | ||
| 'inset-<directions>-$spacing', | ||
| '(top|left|right|bottom)-$spacing', | ||
| ], | ||
| autocomplete: ['inset-$spacing', 'inset-<directions>-$spacing', '(top|left|right|bottom)-$spacing'], | ||
| }, | ||
@@ -128,3 +118,4 @@ ], | ||
| //matching arbitrary values | ||
| [/^inset-\[(.\d*)(rem|px|%)?]$/, | ||
| [ | ||
| /^inset-\[(.\d*)(rem|px|%)?]$/, | ||
| ([, value, unit], context) => ({ | ||
@@ -134,10 +125,5 @@ inset: resolveArbitraryValues(value, unit, context), | ||
| ], | ||
| [/^inset-([xy])-\[(.\d*)(rem|px|%)?]$/, | ||
| ([, direction, value, unit], context) => | ||
| insetMap[direction].map((i) => [ | ||
| `${i.slice(1)}`, | ||
| resolveArbitraryValues(value, unit, context), | ||
| ]), | ||
| ], | ||
| [/^(top|left|right|bottom)-\[(.\d*)(rem|px|%)?]$/, | ||
| [/^inset-([xy])-\[(.\d*)(rem|px|%)?]$/, ([, direction, value, unit], context) => insetMap[direction].map((i) => [`${i.slice(1)}`, resolveArbitraryValues(value, unit, context)])], | ||
| [ | ||
| /^(top|left|right|bottom)-\[(.\d*)(rem|px|%)?]$/, | ||
| ([, direction, value, unit], context) => ({ | ||
@@ -173,6 +159,2 @@ [direction]: resolveArbitraryValues(value, unit, context), | ||
| export const boxSizing = [ | ||
| ['box-border', { 'box-sizing': 'border-box' }], | ||
| ['box-content', { 'box-sizing': 'content-box' }], | ||
| ...makeGlobalStaticRules('box', 'box-sizing'), | ||
| ]; | ||
| export const boxSizing = [['box-border', { 'box-sizing': 'border-box' }], ['box-content', { 'box-sizing': 'content-box' }], ...makeGlobalStaticRules('box', 'box-sizing')]; |
| import { directionMap, handler as h } from '#utils'; | ||
| import { escapeSelector } from "@unocss/core"; | ||
| import { escapeSelector } from '@unocss/core'; | ||
| const handleBorder = ([, direction = '', cssvar = '']) => | ||
| directionMap[direction.substring(1)]?.map( | ||
| (dir) => [`border${dir}-color`, h.semanticToken(`border${cssvar}`)], | ||
| ); | ||
| const handleBorder = ([, direction = '', cssvar = '']) => directionMap[direction.substring(1)]?.map((dir) => [`border${dir}-color`, h.semanticToken(`border${cssvar}`)]); | ||
| const handleDivide = ([_selector, direction = '', cssvar = '']) => | ||
| `.${escapeSelector(_selector)}>*+*{${ | ||
| directionMap[direction.substring(1)]?.map((dir) => | ||
| `border${dir}-color: ${h.semanticToken(`border${cssvar}`)};`, | ||
| ).join('') | ||
| }}`; | ||
| const handleDivide = ([_selector, direction = '', cssvar = '']) => `.${escapeSelector(_selector)}>*+*{${directionMap[direction.substring(1)]?.map((dir) => `border${dir}-color: ${h.semanticToken(`border${cssvar}`)};`).join('')}}`; | ||
@@ -16,0 +8,0 @@ export const semanticRules = [ |
@@ -1,4 +0,2 @@ | ||
| export const shadows = [ | ||
| [/^shadow-(s|m|l|xl)$/, ([, size]) => ({ 'box-shadow': `var(--w-shadow-${size})` })], | ||
| ]; | ||
| export const shadows = [[/^shadow-(s|m|l|xl)$/, ([, size]) => ({ 'box-shadow': `var(--w-shadow-${size})` })]]; | ||
@@ -14,4 +12,2 @@ const dropShadowDefaultColor = '64, 64, 64'; | ||
| export const dropShadows = [ | ||
| [/^drop-shadow-(s|m|l|xl)$/, ([, size]) => ({ 'filter': dropShadowDefaults[size] })], | ||
| ]; | ||
| export const dropShadows = [[/^drop-shadow-(s|m|l|xl)$/, ([, size]) => ({ filter: dropShadowDefaults[size] })]]; |
@@ -15,3 +15,4 @@ import { handler as h, resolveBreakpoints, resolveVerticalBreakpoints, resolveArbitraryValues } from '#utils'; | ||
| return `${prop}-content`; | ||
| case 'prose': return '65ch'; | ||
| case 'prose': | ||
| return '65ch'; | ||
| } | ||
@@ -26,20 +27,14 @@ return h.global.auto.fraction(prop); | ||
| { | ||
| autocomplete: [ | ||
| '(w|h)-$width|height|maxWidth|maxHeight|minWidth|minHeight', | ||
| '(max|min)-(w|h)-$width|height|maxWidth|maxHeight|minWidth|minHeight', | ||
| ], | ||
| autocomplete: ['(w|h)-$width|height|maxWidth|maxHeight|minWidth|minHeight', '(max|min)-(w|h)-$width|height|maxWidth|maxHeight|minWidth|minHeight'], | ||
| }, | ||
| ], | ||
| [/^(min-|max-)?(h)-screen-(.+)$/, ([, m, w, s], context) => ({ [getPropName(m, w)]: resolveVerticalBreakpoints(context)?.[s] })], | ||
| [/^(min-|max-)?(w)-screen-(.+)$/, ([, m, w, s], context) => ({ [getPropName(m, w)]: resolveBreakpoints(context)?.[s] }), { | ||
| autocomplete: [ | ||
| '(w|h)-screen', | ||
| '(min|max)-(w|h)-screen', | ||
| 'h-screen-$verticalBreakpoints', | ||
| '(min|max)-h-screen-$verticalBreakpoints', | ||
| 'w-screen-$breakpoints', | ||
| '(min|max)-w-screen-$breakpoints', | ||
| ], | ||
| }], | ||
| [/^(min-|max-)?([wh])-\[(.+)(rem|px)?]$/, ([, minmax, wh, value, unit], context) => ({ [getPropName(minmax, wh)]: resolveArbitraryValues(value, unit, context) })], | ||
| [ | ||
| /^(min-|max-)?(w)-screen-(.+)$/, | ||
| ([, m, w, s], context) => ({ [getPropName(m, w)]: resolveBreakpoints(context)?.[s] }), | ||
| { | ||
| autocomplete: ['(w|h)-screen', '(min|max)-(w|h)-screen', 'h-screen-$verticalBreakpoints', '(min|max)-h-screen-$verticalBreakpoints', 'w-screen-$breakpoints', '(min|max)-w-screen-$breakpoints'], | ||
| }, | ||
| ], | ||
| [/^(min-|max-)?([wh])-\[(.+)(rem|px)?]$/, ([, minmax, wh, value, unit], context) => ({ [getPropName(minmax, wh)]: resolveArbitraryValues(value, unit, context) })], | ||
| ]; |
@@ -16,2 +16,2 @@ // Hardcoded styling for slider border shadow, will be modified and handled with correct color variables at a later stage | ||
| ], | ||
| ]; | ||
| ]; |
@@ -14,5 +14,3 @@ import { directionMap } from '#utils'; | ||
| const key = `margin${item}`; | ||
| const value = item.endsWith('right') || item.endsWith('bottom') | ||
| ? `calc(${v} * var(--w-space-${d}-reverse))` | ||
| : `calc(${v} * calc(1 - var(--w-space-${d}-reverse)))`; | ||
| const value = item.endsWith('right') || item.endsWith('bottom') ? `calc(${v} * var(--w-space-${d}-reverse))` : `calc(${v} * calc(1 - var(--w-space-${d}-reverse)))`; | ||
| return [key, value]; | ||
@@ -22,8 +20,5 @@ }); | ||
| if (results) { | ||
| return [ | ||
| [`--w-space-${d}-reverse`, 0], | ||
| ...results, | ||
| ]; | ||
| return [[`--w-space-${d}-reverse`, 0], ...results]; | ||
| } | ||
| } | ||
| } |
@@ -8,7 +8,3 @@ import { directionSize, resolveArbitraryValues, directionMap } from '#utils'; | ||
| [/^p([xy])-(.\d*)$/, directionSize('padding')], | ||
| [ | ||
| /^p([rltb])-(.\d*)$/, | ||
| directionSize('padding'), | ||
| { autocomplete: '(m|p)<directions>-<num>' }, | ||
| ], | ||
| [/^p([rltb])-(.\d*)$/, directionSize('padding'), { autocomplete: '(m|p)<directions>-<num>' }], | ||
| // matching arbitrary values | ||
@@ -21,18 +17,4 @@ [ | ||
| ], | ||
| [ | ||
| /^p([xy])-\[(.\d*)(rem|px)?]$/, | ||
| ([, direction, value, unit], context) => | ||
| directionMap[direction].map((i) => [ | ||
| `padding${i}`, | ||
| resolveArbitraryValues(value, unit, context), | ||
| ]), | ||
| ], | ||
| [ | ||
| /^p([rltb])-\[(.\d*)(rem|px)?]$/, | ||
| ([, direction, value, unit], context) => | ||
| directionMap[direction].map((i) => [ | ||
| `padding${i}`, | ||
| resolveArbitraryValues(value, unit, context), | ||
| ]), | ||
| ], | ||
| [/^p([xy])-\[(.\d*)(rem|px)?]$/, ([, direction, value, unit], context) => directionMap[direction].map((i) => [`padding${i}`, resolveArbitraryValues(value, unit, context)])], | ||
| [/^p([rltb])-\[(.\d*)(rem|px)?]$/, ([, direction, value, unit], context) => directionMap[direction].map((i) => [`padding${i}`, resolveArbitraryValues(value, unit, context)])], | ||
| ]; | ||
@@ -51,18 +33,4 @@ | ||
| ], | ||
| [ | ||
| /^m([xy])-\[(.\d*)(rem|px)?]$/, | ||
| ([, direction, value, unit], context) => | ||
| directionMap[direction].map((i) => [ | ||
| `margin${i}`, | ||
| resolveArbitraryValues(value, unit, context), | ||
| ]), | ||
| ], | ||
| [ | ||
| /^m([rltb])-\[(.\d*)(rem|px)?]$/, | ||
| ([, direction, value, unit], context) => | ||
| directionMap[direction].map((i) => [ | ||
| `margin${i}`, | ||
| resolveArbitraryValues(value, unit, context), | ||
| ]), | ||
| ], | ||
| [/^m([xy])-\[(.\d*)(rem|px)?]$/, ([, direction, value, unit], context) => directionMap[direction].map((i) => [`margin${i}`, resolveArbitraryValues(value, unit, context)])], | ||
| [/^m([rltb])-\[(.\d*)(rem|px)?]$/, ([, direction, value, unit], context) => directionMap[direction].map((i) => [`margin${i}`, resolveArbitraryValues(value, unit, context)])], | ||
| ]; |
| import { globalKeywords, handler as h, makeGlobalStaticRules, positionMap } from '#utils'; | ||
| export const appearances = [ | ||
| ['visible', { visibility: 'visible' }], | ||
| ['invisible', { visibility: 'hidden' }], | ||
| ['backface-visible', { 'backface-visibility': 'visible' }], | ||
| ['backface-hidden', { 'backface-visibility': 'hidden' }], | ||
| ...makeGlobalStaticRules('backface', 'backface-visibility'), | ||
| ]; | ||
| export const appearances = [['visible', { visibility: 'visible' }], ['invisible', { visibility: 'hidden' }], ['backface-visible', { 'backface-visibility': 'visible' }], ['backface-hidden', { 'backface-visibility': 'hidden' }], ...makeGlobalStaticRules('backface', 'backface-visibility')]; | ||
| const cursorValues = ['auto', 'default', 'none', 'context-menu', 'help', 'pointer', 'progress', 'wait', 'cell', 'crosshair', 'text', 'vertical-text', 'alias', 'copy', 'move', 'no-drop', 'not-allowed', 'grab', 'grabbing', 'all-scroll', 'col-resize', 'row-resize', 'n-resize', 'e-resize', 's-resize', 'w-resize', 'ne-resize', 'nw-resize', 'se-resize', 'sw-resize', 'ew-resize', 'ns-resize', 'nesw-resize', 'nwse-resize', 'zoom-in', 'zoom-out']; | ||
| export const cursors = [ | ||
| [/^cursor-(.+)$/, ([, c]) => ({ cursor: h.global(c) })], | ||
| ...cursorValues.map((v) => [`cursor-${v}`, { cursor: v }]), | ||
| ]; | ||
| export const cursors = [[/^cursor-(.+)$/, ([, c]) => ({ cursor: h.global(c) })], ...cursorValues.map((v) => [`cursor-${v}`, { cursor: v }])]; | ||
| export const pointerEvents = [ | ||
| ['pointer-events-auto', { 'pointer-events': 'auto' }], | ||
| ['pointer-events-none', { 'pointer-events': 'none' }], | ||
| ...makeGlobalStaticRules('pointer-events'), | ||
| ]; | ||
| export const pointerEvents = [['pointer-events-auto', { 'pointer-events': 'auto' }], ['pointer-events-none', { 'pointer-events': 'none' }], ...makeGlobalStaticRules('pointer-events')]; | ||
| export const resizes = [ | ||
| ['resize-x', { resize: 'horizontal' }], | ||
| ['resize-y', { resize: 'vertical' }], | ||
| ['resize', { resize: 'both' }], | ||
| ['resize-none', { resize: 'none' }], | ||
| ...makeGlobalStaticRules('resize'), | ||
| ]; | ||
| export const resizes = [['resize-x', { resize: 'horizontal' }], ['resize-y', { resize: 'vertical' }], ['resize', { resize: 'both' }], ['resize-none', { resize: 'none' }], ...makeGlobalStaticRules('resize')]; | ||
| export const userSelects = [ | ||
| ['select-auto', { 'user-select': 'auto' }], | ||
| ['select-all', { 'user-select': 'all' }], | ||
| ['select-text', { 'user-select': 'text' }], | ||
| ['select-none', { 'user-select': 'none' }], | ||
| ...makeGlobalStaticRules('select', 'user-select'), | ||
| ]; | ||
| export const userSelects = [['select-auto', { 'user-select': 'auto' }], ['select-all', { 'user-select': 'all' }], ['select-text', { 'user-select': 'text' }], ['select-none', { 'user-select': 'none' }], ...makeGlobalStaticRules('select', 'user-select')]; | ||
| export const whitespaces = [ | ||
| [ | ||
| /^whitespace-([-\w]+)$/, | ||
| ([, v]) => (['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces', ...globalKeywords].includes(v) ? { 'white-space': v } : undefined), | ||
| { autocomplete: 'whitespace-(normal|nowrap|pre|pre-line|pre-wrap|break-spaces)' }, | ||
| ], | ||
| ]; | ||
| export const whitespaces = [[/^whitespace-([-\w]+)$/, ([, v]) => (['normal', 'nowrap', 'pre', 'pre-line', 'pre-wrap', 'break-spaces', ...globalKeywords].includes(v) ? { 'white-space': v } : undefined), { autocomplete: 'whitespace-(normal|nowrap|pre|pre-line|pre-wrap|break-spaces)' }]]; | ||
@@ -62,3 +31,3 @@ // this is left flexible intentionally | ||
| export const textOverflows = [ | ||
| ['truncate', { 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'white-space': 'nowrap' }], | ||
| ['truncate', { overflow: 'hidden', 'text-overflow': 'ellipsis', 'white-space': 'nowrap' }], | ||
| ['text-ellipsis', { 'text-overflow': 'ellipsis' }], | ||
@@ -92,10 +61,11 @@ ['text-clip', { 'text-overflow': 'clip' }], | ||
| [ | ||
| 'sr-only', { | ||
| 'position': 'absolute', | ||
| 'width': '1px', | ||
| 'height': '1px', | ||
| 'padding': '0', | ||
| 'margin': '-1px', | ||
| 'overflow': 'hidden', | ||
| 'clip': 'rect(0,0,0,0)', | ||
| 'sr-only', | ||
| { | ||
| position: 'absolute', | ||
| width: '1px', | ||
| height: '1px', | ||
| padding: '0', | ||
| margin: '-1px', | ||
| overflow: 'hidden', | ||
| clip: 'rect(0,0,0,0)', | ||
| 'white-space': 'nowrap', | ||
@@ -108,9 +78,9 @@ 'border-width': 0, | ||
| { | ||
| 'position': 'static', | ||
| 'width': 'auto', | ||
| 'height': 'auto', | ||
| 'padding': '0', | ||
| 'margin': '0', | ||
| 'overflow': 'visible', | ||
| 'clip': 'auto', | ||
| position: 'static', | ||
| width: 'auto', | ||
| height: 'auto', | ||
| padding: '0', | ||
| margin: '0', | ||
| overflow: 'visible', | ||
| clip: 'auto', | ||
| 'white-space': 'normal', | ||
@@ -135,5 +105,9 @@ }, | ||
| // object position | ||
| [/^object-(.+)$/, ([, d]) => { | ||
| if (positionMap[d]) return { 'object-position': positionMap[d] }; | ||
| }, { autocomplete: `object-(${Object.keys(positionMap).join('|')})` }], | ||
| [ | ||
| /^object-(.+)$/, | ||
| ([, d]) => { | ||
| if (positionMap[d]) return { 'object-position': positionMap[d] }; | ||
| }, | ||
| { autocomplete: `object-(${Object.keys(positionMap).join('|')})` }, | ||
| ], | ||
| ]; | ||
@@ -198,3 +172,3 @@ | ||
| ['mb-safe', { 'margin-bottom': 'env(safe-area-inset-bottom, 0px)' }], | ||
| [/^pb-safe-\[([\d]+)]$/, ([, d]) => ({ 'padding-bottom': `calc(${d}px + env(safe-area-inset-bottom, 0px))` })], | ||
| ]; | ||
| [/^pb-safe-\[([\d]+)]$/, ([, d]) => ({ 'padding-bottom': `calc(${d}px + env(safe-area-inset-bottom, 0px))` })], | ||
| ]; |
@@ -1,63 +0,16 @@ | ||
| import { | ||
| handler as h, | ||
| makeGlobalStaticRules, | ||
| positionMap, | ||
| xyzMap, | ||
| resolveArbitraryValues, | ||
| } from '#utils'; | ||
| import { handler as h, makeGlobalStaticRules, positionMap, xyzMap, resolveArbitraryValues } from '#utils'; | ||
| const transformValues = [ | ||
| 'translate', | ||
| 'rotate', | ||
| 'scale', | ||
| ]; | ||
| const transformValues = ['translate', 'rotate', 'scale']; | ||
| const transformCpu = [ | ||
| 'translateX(var(--w-translate-x))', | ||
| 'translateY(var(--w-translate-y))', | ||
| 'translateZ(var(--w-translate-z))', | ||
| 'rotate(var(--w-rotate))', | ||
| 'rotateX(var(--w-rotate-x))', | ||
| 'rotateY(var(--w-rotate-y))', | ||
| 'rotateZ(var(--w-rotate-z))', | ||
| 'skewX(var(--w-skew-x))', | ||
| 'skewY(var(--w-skew-y))', | ||
| 'scaleX(var(--w-scale-x))', | ||
| 'scaleY(var(--w-scale-y))', | ||
| 'scaleZ(var(--w-scale-z))', | ||
| ].join(' '); | ||
| const transformCpu = ['translateX(var(--w-translate-x))', 'translateY(var(--w-translate-y))', 'translateZ(var(--w-translate-z))', 'rotate(var(--w-rotate))', 'rotateX(var(--w-rotate-x))', 'rotateY(var(--w-rotate-y))', 'rotateZ(var(--w-rotate-z))', 'skewX(var(--w-skew-x))', 'skewY(var(--w-skew-y))', 'scaleX(var(--w-scale-x))', 'scaleY(var(--w-scale-y))', 'scaleZ(var(--w-scale-z))'].join(' '); | ||
| const transformGpu = [ | ||
| 'translate3d(var(--w-translate-x), var(--w-translate-y), var(--w-translate-z))', | ||
| 'rotate(var(--w-rotate))', | ||
| 'rotateX(var(--w-rotate-x))', | ||
| 'rotateY(var(--w-rotate-y))', | ||
| 'rotateZ(var(--w-rotate-z))', | ||
| 'skewX(var(--w-skew-x))', | ||
| 'skewY(var(--w-skew-y))', | ||
| 'scaleX(var(--w-scale-x))', | ||
| 'scaleY(var(--w-scale-y))', | ||
| 'scaleZ(var(--w-scale-z))', | ||
| ].join(' '); | ||
| const transformGpu = ['translate3d(var(--w-translate-x), var(--w-translate-y), var(--w-translate-z))', 'rotate(var(--w-rotate))', 'rotateX(var(--w-rotate-x))', 'rotateY(var(--w-rotate-y))', 'rotateZ(var(--w-rotate-z))', 'skewX(var(--w-skew-x))', 'skewY(var(--w-skew-y))', 'scaleX(var(--w-scale-x))', 'scaleY(var(--w-scale-y))', 'scaleZ(var(--w-scale-z))'].join(' '); | ||
| export const transforms = [ | ||
| // origins | ||
| [ | ||
| /^origin-(.+)$/, | ||
| ([, s]) => ({ 'transform-origin': positionMap[s] }), | ||
| { autocomplete: [`origin-(${Object.keys(positionMap).join('|')})`, `origin-(${Object.keys(positionMap).join('|')})`] }, | ||
| ], | ||
| [/^origin-(.+)$/, ([, s]) => ({ 'transform-origin': positionMap[s] }), { autocomplete: [`origin-(${Object.keys(positionMap).join('|')})`, `origin-(${Object.keys(positionMap).join('|')})`] }], | ||
| // modifiers | ||
| [/^translate-([xyz])-(.+)$/, handleTranslate], | ||
| // matching arbitrary values for translate | ||
| [ | ||
| /^translate-([xyz])-\[(.\d*)(rem|px)?]$/, | ||
| ([, direction, value, unit], context) => [ | ||
| ...xyzMap[direction].map((i) => [ | ||
| `--w-translate${i}`, | ||
| resolveArbitraryValues(value, unit, context), | ||
| ]), | ||
| ['transform', transformCpu], | ||
| ], | ||
| ], | ||
| [/^translate-([xyz])-\[(.\d*)(rem|px)?]$/, ([, direction, value, unit], context) => [...xyzMap[direction].map((i) => [`--w-translate${i}`, resolveArbitraryValues(value, unit, context)]), ['transform', transformCpu]]], | ||
| [/^rotate-()(.+)$/, handleRotate], | ||
@@ -82,6 +35,3 @@ [/^rotate-([xyz])-(.+)$/, handleRotate], | ||
| if (v != null) { | ||
| return [ | ||
| ...xyzMap[d].map((i) => [`--w-translate${i}`, v]), | ||
| ['transform', transformCpu], | ||
| ]; | ||
| return [...xyzMap[d].map((i) => [`--w-translate${i}`, v]), ['transform', transformCpu]]; | ||
| } | ||
@@ -92,6 +42,3 @@ } | ||
| if (v != null) { | ||
| return [ | ||
| ...xyzMap[d].map((i) => [`--w-scale${i}`, v]), | ||
| ['transform', transformCpu], | ||
| ]; | ||
| return [...xyzMap[d].map((i) => [`--w-scale${i}`, v]), ['transform', transformCpu]]; | ||
| } | ||
@@ -106,3 +53,3 @@ } | ||
| [`--w-rotate-${d}`]: v, | ||
| 'transform': transformCpu, | ||
| transform: transformCpu, | ||
| }; | ||
@@ -115,3 +62,3 @@ } else { | ||
| '--w-rotate': v, | ||
| 'transform': transformCpu, | ||
| transform: transformCpu, | ||
| }; | ||
@@ -118,0 +65,0 @@ } |
@@ -21,38 +21,25 @@ import { globalKeywords, handler as h, makeGlobalStaticRules } from '#utils'; | ||
| // transition | ||
| [/^transition(?:-([a-z-]+(?:,[a-z-]+)*))?(?:-(\d+))?$/, ([, prop, d], { theme }) => { | ||
| const p = prop != null | ||
| ? transitionProperty(prop) | ||
| : [transitionPropertyGroup.colors, 'opacity', 'box-shadow', 'transform', 'filter', 'backdrop-filter'].join(','); | ||
| if (p) { | ||
| const duration = theme.duration?.[d || 'DEFAULT'] ?? h.time(d || '150'); | ||
| return { | ||
| 'transition-property': p, | ||
| 'transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)', | ||
| 'transition-duration': duration, | ||
| }; | ||
| } | ||
| }, { autocomplete: `transition-(${Object.keys(transitionPropertyGroup).join('|')})` }], | ||
| // timings | ||
| [ | ||
| /^duration-(.+)$/, | ||
| ([, d], { theme }) => ({ 'transition-duration': theme.duration?.[d || 'DEFAULT'] ?? h.time(d) }), | ||
| { autocomplete: 'duration-$duration' }, | ||
| /^transition(?:-([a-z-]+(?:,[a-z-]+)*))?(?:-(\d+))?$/, | ||
| ([, prop, d], { theme }) => { | ||
| const p = prop != null ? transitionProperty(prop) : [transitionPropertyGroup.colors, 'opacity', 'box-shadow', 'transform', 'filter', 'backdrop-filter'].join(','); | ||
| if (p) { | ||
| const duration = theme.duration?.[d || 'DEFAULT'] ?? h.time(d || '150'); | ||
| return { | ||
| 'transition-property': p, | ||
| 'transition-timing-function': 'cubic-bezier(0.4, 0, 0.2, 1)', | ||
| 'transition-duration': duration, | ||
| }; | ||
| } | ||
| }, | ||
| { autocomplete: `transition-(${Object.keys(transitionPropertyGroup).join('|')})` }, | ||
| ], | ||
| [ | ||
| /^delay-(.+)$/, | ||
| ([, d], { theme }) => ({ 'transition-delay': theme.duration?.[d || 'DEFAULT'] ?? h.time(d) }), | ||
| { autocomplete: 'delay-$duration' }, | ||
| ], | ||
| [/^ease-(.+)$/, | ||
| ([, d]) => ({ 'transition-timing-function': easings[d] }), | ||
| { autocomplete: 'ease-(linear|in|out|in-out)' }, | ||
| ], | ||
| // timings | ||
| [/^duration-(.+)$/, ([, d], { theme }) => ({ 'transition-duration': theme.duration?.[d || 'DEFAULT'] ?? h.time(d) }), { autocomplete: 'duration-$duration' }], | ||
| [/^delay-(.+)$/, ([, d], { theme }) => ({ 'transition-delay': theme.duration?.[d || 'DEFAULT'] ?? h.time(d) }), { autocomplete: 'delay-$duration' }], | ||
| [/^ease-(.+)$/, ([, d]) => ({ 'transition-timing-function': easings[d] }), { autocomplete: 'ease-(linear|in|out|in-out)' }], | ||
| // matching arbitrary values transition-timing | ||
| [/^ease-\[(cubic-bezier\(.*\))]$/, | ||
| ([, value]) => ({ 'transition-timing-function': value }), | ||
| ], | ||
| [/^ease-\[(cubic-bezier\(.*\))]$/, ([, value]) => ({ 'transition-timing-function': value })], | ||
| // props | ||
| [/^transition-property-(.+)$/, | ||
| ([, v]) => ({ 'transition-property': h.global(v) || transitionProperty(v) }), | ||
| { autocomplete: [`transition-property-(${[...globalKeywords, ...Object.keys(transitionPropertyGroup)].join('|')})`] }], | ||
| [/^transition-property-(.+)$/, ([, v]) => ({ 'transition-property': h.global(v) || transitionProperty(v) }), { autocomplete: [`transition-property-(${[...globalKeywords, ...Object.keys(transitionPropertyGroup)].join('|')})`] }], | ||
| // none | ||
@@ -59,0 +46,0 @@ ['transition-none', { transition: 'none' }], |
@@ -5,9 +5,5 @@ import { textMap, lineHeightMap, resolveArbitraryValues } from '#utils'; | ||
| [/^text-(12|14|16|20|22|28|34|48)$/, ([, d]) => ({ 'font-size': `var(--w-font-size-${textMap[d]})`, 'line-height': `var(--w-line-height-${textMap[d]})` })], | ||
| [/^text-(xs|s|m|ml|l|xl|xxl|xxxl)$/, ([, size]) => | ||
| ({ 'font-size': `var(--w-font-size-${size})`, 'line-height': `var(--w-line-height-${size})` }), | ||
| ], | ||
| [/^text-(xs|s|m|ml|l|xl|xxl|xxxl)$/, ([, size]) => ({ 'font-size': `var(--w-font-size-${size})`, 'line-height': `var(--w-line-height-${size})` })], | ||
| [/^leading-(16|18|22|26|28|34|41|56)$/, ([, d]) => ({ 'line-height': `var(--w-line-height-${lineHeightMap[d]})` })], | ||
| [/^leading-(xs|s|m|ml|l|xl|xxl|xxxl)$/, ([, size]) => | ||
| ({ 'line-height': `var(--w-line-height-${size})` }), | ||
| ], | ||
| [/^leading-(xs|s|m|ml|l|xl|xxl|xxxl)$/, ([, size]) => ({ 'line-height': `var(--w-line-height-${size})` })], | ||
| [/^leading-\[(.+)(rem|px)?]$/, ([, value, unit], context) => ({ 'line-height': resolveArbitraryValues(value, unit, context) })], | ||
@@ -14,0 +10,0 @@ ['tabular-nums', { 'font-family': 'ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif', 'font-variant-numeric': 'tabular-nums' }], |
| import { pageContainer } from './pageContainer.js'; | ||
| import { typographyAliases } from './typography.js'; | ||
| export const shortcuts = [typographyAliases, pageContainer]; | ||
| export const shortcuts = [typographyAliases, pageContainer]; |
@@ -1,1 +0,1 @@ | ||
| export const pageContainer = { 'page-container': 's-bg m-0 p-0 max-w-[1010px] pl-[16px] pr-[16px] xl:mx-auto xl:pl-[31px] xl:pr-[31px]' }; | ||
| export const pageContainer = { 'page-container': 's-bg m-0 p-0 max-w-[1010px] pl-[16px] pr-[16px] xl:mx-auto xl:pl-[31px] xl:pr-[31px]' }; |
@@ -18,2 +18,2 @@ export const typographyAliases = { | ||
| 'text-detail': 'text-xs', | ||
| }; | ||
| }; |
@@ -6,3 +6,3 @@ import { escapeRegExp } from '@unocss/core'; | ||
| const alphaPlaceholders = ['%alpha', '<alpha-value>']; | ||
| const alphaPlaceholdersRE = new RegExp(alphaPlaceholders.map(v => escapeRegExp(v)).join('|')); | ||
| const alphaPlaceholdersRE = new RegExp(alphaPlaceholders.map((v) => escapeRegExp(v)).join('|')); | ||
| export function hex2rgba(hex = '') { | ||
@@ -26,3 +26,3 @@ const color = parseHexColor(hex); | ||
| type, | ||
| components: components.map(c => (typeof c === 'string' ? c.trim() : c)), | ||
| components: components.map((c) => (typeof c === 'string' ? c.trim() : c)), | ||
| alpha: typeof alpha === 'string' ? alpha.trim() : alpha, | ||
@@ -66,9 +66,7 @@ }; | ||
| case 4: | ||
| const digits = Array.from(body, s => Number.parseInt(s, 16)).map(n => (n << 4) | n); | ||
| const digits = Array.from(body, (s) => Number.parseInt(s, 16)).map((n) => (n << 4) | n); | ||
| return { | ||
| type: 'rgb', | ||
| components: digits.slice(0, 3), | ||
| alpha: body.length === 3 | ||
| ? undefined | ||
| : Math.round(digits[3] / 255 * 100) / 100, | ||
| alpha: body.length === 3 ? undefined : Math.round((digits[3] / 255) * 100) / 100, | ||
| }; | ||
@@ -80,8 +78,4 @@ case 6: | ||
| type: 'rgb', | ||
| components: body.length === 6 | ||
| ? [(value >> 16) & 0xFF, (value >> 8) & 0xFF, value & 0xFF] | ||
| : [(value >> 24) & 0xFF, (value >> 16) & 0xFF, (value >> 8) & 0xFF], | ||
| alpha: body.length === 6 | ||
| ? undefined | ||
| : Math.round((value & 0xFF) / 255 * 100) / 100, | ||
| components: body.length === 6 ? [(value >> 16) & 0xff, (value >> 8) & 0xff, value & 0xff] : [(value >> 24) & 0xff, (value >> 16) & 0xff, (value >> 8) & 0xff], | ||
| alpha: body.length === 6 ? undefined : Math.round(((value & 0xff) / 255) * 100) / 100, | ||
| }; | ||
@@ -127,3 +121,6 @@ } | ||
| if (parsed) { | ||
| const { alpha, components: [type, ...components] } = parsed; | ||
| const { | ||
| alpha, | ||
| components: [type, ...components], | ||
| } = parsed; | ||
| return { | ||
@@ -141,3 +138,6 @@ type, | ||
| if (parsed) { | ||
| const { alpha, components: [type, ...components] } = parsed; | ||
| const { | ||
| alpha, | ||
| components: [type, ...components], | ||
| } = parsed; | ||
| return { | ||
@@ -144,0 +144,0 @@ type, |
@@ -22,6 +22,3 @@ import { isString } from '@unocss/core'; | ||
| if (i === 0 || i === l - separatorLength) return; | ||
| return [ | ||
| str.slice(0, i), | ||
| str.slice(i + separatorLength), | ||
| ]; | ||
| return [str.slice(0, i), str.slice(i + separatorLength)]; | ||
| } | ||
@@ -28,0 +25,0 @@ } |
@@ -8,18 +8,62 @@ import { escapeSelector } from '@unocss/core'; | ||
| // basic props | ||
| 'color', 'border-color', 'background-color', 'flex-grow', 'flex', 'flex-shrink', | ||
| 'caret-color', 'font', 'gap', 'opacity', 'visibility', 'z-index', 'font-weight', | ||
| 'zoom', 'text-shadow', 'transform', 'box-shadow', | ||
| 'color', | ||
| 'border-color', | ||
| 'background-color', | ||
| 'flex-grow', | ||
| 'flex', | ||
| 'flex-shrink', | ||
| 'caret-color', | ||
| 'font', | ||
| 'gap', | ||
| 'opacity', | ||
| 'visibility', | ||
| 'z-index', | ||
| 'font-weight', | ||
| 'zoom', | ||
| 'text-shadow', | ||
| 'transform', | ||
| 'box-shadow', | ||
| // positions | ||
| 'background-position', 'left', 'right', 'top', 'bottom', 'object-position', | ||
| 'background-position', | ||
| 'left', | ||
| 'right', | ||
| 'top', | ||
| 'bottom', | ||
| 'object-position', | ||
| // sizes | ||
| 'max-height', 'min-height', 'max-width', 'min-width', 'height', 'width', | ||
| 'border-width', 'margin', 'padding', 'outline-width', 'outline-offset', | ||
| 'font-size', 'line-height', 'text-indent', 'vertical-align', | ||
| 'border-spacing', 'letter-spacing', 'word-spacing', | ||
| 'max-height', | ||
| 'min-height', | ||
| 'max-width', | ||
| 'min-width', | ||
| 'height', | ||
| 'width', | ||
| 'border-width', | ||
| 'margin', | ||
| 'padding', | ||
| 'outline-width', | ||
| 'outline-offset', | ||
| 'font-size', | ||
| 'line-height', | ||
| 'text-indent', | ||
| 'vertical-align', | ||
| 'border-spacing', | ||
| 'letter-spacing', | ||
| 'word-spacing', | ||
| // enhances | ||
| 'stroke', 'filter', 'backdrop-filter', 'fill', 'mask', 'mask-size', 'mask-border', 'clip-path', 'clip', | ||
| 'stroke', | ||
| 'filter', | ||
| 'backdrop-filter', | ||
| 'fill', | ||
| 'mask', | ||
| 'mask-size', | ||
| 'mask-border', | ||
| 'clip-path', | ||
| 'clip', | ||
| 'border-radius', | ||
| ]; | ||
| function round(n) { | ||
| return n.toFixed(10).replace(/\.0+$/, '').replace(/(\.\d+?)0+$/, '$1'); | ||
| return n | ||
| .toFixed(10) | ||
| .replace(/\.0+$/, '') | ||
| .replace(/(\.\d+?)0+$/, '$1'); | ||
| } | ||
@@ -99,13 +143,13 @@ export function numberWithUnit(str) { | ||
| switch (hintedType) { | ||
| case 'string': return base | ||
| .replace(/(^|[^\\])_/g, '$1 ') | ||
| .replace(/\\_/g, '_'); | ||
| case 'quoted': return base | ||
| .replace(/(^|[^\\])_/g, '$1 ') | ||
| .replace(/\\_/g, '_') | ||
| .replace(/(["\\])/g, '\\$1') | ||
| .replace(/^(.+)$/, '"$1"'); | ||
| case 'string': | ||
| return base.replace(/(^|[^\\])_/g, '$1 ').replace(/\\_/g, '_'); | ||
| case 'quoted': | ||
| return base | ||
| .replace(/(^|[^\\])_/g, '$1 ') | ||
| .replace(/\\_/g, '_') | ||
| .replace(/(["\\])/g, '\\$1') | ||
| .replace(/^(.+)$/, '"$1"'); | ||
| } | ||
| return base | ||
| .replace(/(url\(.*?\))/g, v => v.replace(/_/g, '\\_')) | ||
| .replace(/(url\(.*?\))/g, (v) => v.replace(/_/g, '\\_')) | ||
| .replace(/(^|[^\\])_/g, '$1 ') | ||
@@ -155,3 +199,3 @@ .replace(/\\_/g, '_') | ||
| export function properties(str) { | ||
| if (str.split(',').every(prop => cssProps.includes(prop))) return str; | ||
| if (str.split(',').every((prop) => cssProps.includes(prop))) return str; | ||
| } | ||
@@ -158,0 +202,0 @@ export function position(str) { |
| export const directionMap = { | ||
| 'l': ['-left'], | ||
| 'r': ['-right'], | ||
| 't': ['-top'], | ||
| 'b': ['-bottom'], | ||
| 's': ['-inline-start'], | ||
| 'e': ['-inline-end'], | ||
| 'x': ['-left', '-right'], | ||
| 'y': ['-top', '-bottom'], | ||
| l: ['-left'], | ||
| r: ['-right'], | ||
| t: ['-top'], | ||
| b: ['-bottom'], | ||
| s: ['-inline-start'], | ||
| e: ['-inline-end'], | ||
| x: ['-left', '-right'], | ||
| y: ['-top', '-bottom'], | ||
| '': [''], | ||
| 'bs': ['-block-start'], | ||
| 'be': ['-block-end'], | ||
| 'is': ['-inline-start'], | ||
| 'ie': ['-inline-end'], | ||
| 'block': ['-block-start', '-block-end'], | ||
| 'inline': ['-inline-start', '-inline-end'], | ||
| bs: ['-block-start'], | ||
| be: ['-block-end'], | ||
| is: ['-inline-start'], | ||
| ie: ['-inline-end'], | ||
| block: ['-block-start', '-block-end'], | ||
| inline: ['-inline-start', '-inline-end'], | ||
| }; | ||
@@ -30,19 +30,19 @@ export const insetMap = { | ||
| export const cornerMap = { | ||
| 'l': ['-top-left', '-bottom-left'], | ||
| 'r': ['-top-right', '-bottom-right'], | ||
| 't': ['-top-left', '-top-right'], | ||
| 'b': ['-bottom-left', '-bottom-right'], | ||
| 'tl': ['-top-left'], | ||
| 'lt': ['-top-left'], | ||
| 'tr': ['-top-right'], | ||
| 'rt': ['-top-right'], | ||
| 'bl': ['-bottom-left'], | ||
| 'lb': ['-bottom-left'], | ||
| 'br': ['-bottom-right'], | ||
| 'rb': ['-bottom-right'], | ||
| l: ['-top-left', '-bottom-left'], | ||
| r: ['-top-right', '-bottom-right'], | ||
| t: ['-top-left', '-top-right'], | ||
| b: ['-bottom-left', '-bottom-right'], | ||
| tl: ['-top-left'], | ||
| lt: ['-top-left'], | ||
| tr: ['-top-right'], | ||
| rt: ['-top-right'], | ||
| bl: ['-bottom-left'], | ||
| lb: ['-bottom-left'], | ||
| br: ['-bottom-right'], | ||
| rb: ['-bottom-right'], | ||
| '': [''], | ||
| 'bs': ['-start-start', '-start-end'], | ||
| 'be': ['-end-start', '-end-end'], | ||
| 'is': ['-end-start', '-start-start'], | ||
| 'ie': ['-start-end', '-end-end'], | ||
| bs: ['-start-start', '-start-end'], | ||
| be: ['-end-start', '-end-end'], | ||
| is: ['-end-start', '-start-start'], | ||
| ie: ['-start-end', '-end-end'], | ||
| 'bs-is': ['-start-start'], | ||
@@ -58,43 +58,16 @@ 'is-bs': ['-start-start'], | ||
| export const xyzMap = { | ||
| 'x': ['-x'], | ||
| 'y': ['-y'], | ||
| 'z': ['-z'], | ||
| x: ['-x'], | ||
| y: ['-y'], | ||
| z: ['-z'], | ||
| '': ['-x', '-y'], | ||
| }; | ||
| const basePositionMap = [ | ||
| 'top', | ||
| 'top center', | ||
| 'top left', | ||
| 'top right', | ||
| 'bottom', | ||
| 'bottom center', | ||
| 'bottom left', | ||
| 'bottom right', | ||
| 'left', | ||
| 'left center', | ||
| 'left top', | ||
| 'left bottom', | ||
| 'right', | ||
| 'right center', | ||
| 'right top', | ||
| 'right bottom', | ||
| 'center', | ||
| 'center top', | ||
| 'center bottom', | ||
| 'center left', | ||
| 'center right', | ||
| 'center center', | ||
| ]; | ||
| export const positionMap = Object.assign({}, | ||
| // [{ top: 'top' }, { 'top-center': 'top center' }, ...] | ||
| ...basePositionMap.map(p => ({ [p.replace(/ /, '-')]: p })), | ||
| const basePositionMap = ['top', 'top center', 'top left', 'top right', 'bottom', 'bottom center', 'bottom left', 'bottom right', 'left', 'left center', 'left top', 'left bottom', 'right', 'right center', 'right top', 'right bottom', 'center', 'center top', 'center bottom', 'center left', 'center right', 'center center']; | ||
| export const positionMap = Object.assign( | ||
| {}, | ||
| // [{ top: 'top' }, { 'top-center': 'top center' }, ...] | ||
| ...basePositionMap.map((p) => ({ [p.replace(/ /, '-')]: p })), | ||
| // [{ t: 'top' }, { tc: 'top center' }, ...] | ||
| ...basePositionMap.map(p => ({ [p.replace(/\b(\w)\w+/g, '$1').replace(/ /, '')]: p }))); | ||
| export const globalKeywords = [ | ||
| 'inherit', | ||
| 'initial', | ||
| 'revert', | ||
| 'revert-layer', | ||
| 'unset', | ||
| ]; | ||
| ...basePositionMap.map((p) => ({ [p.replace(/\b(\w)\w+/g, '$1').replace(/ /, '')]: p })), | ||
| ); | ||
| export const globalKeywords = ['inherit', 'initial', 'revert', 'revert-layer', 'unset']; | ||
@@ -101,0 +74,0 @@ // for backward compatible typography classes like text-12 or leading-16 |
@@ -16,3 +16,3 @@ import { toArray } from '@unocss/core'; | ||
| const v = theme.spacing?.[size] ?? h.bracket.global.auto.fraction(size); | ||
| if (v != null) return directionMap[direction].map(i => [`${propertyPrefix}${i}`, v]); | ||
| if (v != null) return directionMap[direction].map((i) => [`${propertyPrefix}${i}`, v]); | ||
| }; | ||
@@ -29,3 +29,6 @@ } | ||
| if (obj && typeof obj !== 'string') { | ||
| const camel = colors.slice(index).join('-').replace(/(-[a-z])/g, n => n.slice(1).toUpperCase()); | ||
| const camel = colors | ||
| .slice(index) | ||
| .join('-') | ||
| .replace(/(-[a-z])/g, (n) => n.slice(1).toUpperCase()); | ||
| if (obj[camel]) return obj[camel]; | ||
@@ -46,6 +49,3 @@ if (obj[c]) { | ||
| if (split[0] === `[${type}`) { | ||
| return [ | ||
| split.slice(0, 2).join(':'), | ||
| split[2], | ||
| ]; | ||
| return [split.slice(0, 2).join(':'), split[2]]; | ||
| } | ||
@@ -79,5 +79,3 @@ | ||
| } | ||
| const colors = main | ||
| .replace(/([a-z])([0-9])/g, '$1-$2') | ||
| .split(/-/g); | ||
| const colors = main.replace(/([a-z])([0-9])/g, '$1-$2').split(/-/g); | ||
| const [name] = colors; | ||
@@ -194,3 +192,3 @@ if (!name) return; | ||
| export function makeGlobalStaticRules(prefix, property) { | ||
| return globalKeywords.map(keyword => [`${prefix}-${keyword}`, { [property ?? prefix]: keyword }]); | ||
| return globalKeywords.map((keyword) => [`${prefix}-${keyword}`, { [property ?? prefix]: keyword }]); | ||
| } | ||
@@ -216,7 +214,3 @@ export function getBracket(str, open, close) { | ||
| if (parenthesis === 0) { | ||
| return [ | ||
| str.slice(openAt, i + 1), | ||
| str.slice(i + 1), | ||
| str.slice(0, openAt), | ||
| ]; | ||
| return [str.slice(openAt, i + 1), str.slice(i + 1), str.slice(0, openAt)]; | ||
| } | ||
@@ -230,6 +224,6 @@ break; | ||
| if (value.includes('_')) { | ||
| const valueWithoutUnderscore = value.replace(/_/g, " "); | ||
| const valueWithoutUnderscore = value.replace(/_/g, ' '); | ||
| if (/\d/.test(valueWithoutUnderscore)) { | ||
| const digits = valueWithoutUnderscore.split(' '); | ||
| return digits?.map(number => h.rem(number) || number).join(' '); | ||
| return digits?.map((number) => h.rem(number) || number).join(' '); | ||
| } else { | ||
@@ -241,5 +235,5 @@ return valueWithoutUnderscore; | ||
| if (unit === 'px' || context?.theme?.usingPixels) return h.px(value); | ||
| if (unit === '%') return `${h.percent(`${value}`) * 100 }${unit}`; | ||
| if (unit === '%') return `${h.percent(`${value}`) * 100}${unit}`; | ||
| if (value.startsWith('--')) return `var(${value})`; | ||
| return h.rem(value) || value; | ||
| } | ||
| } |
@@ -13,6 +13,7 @@ import { escapeRegExp } from '@unocss/core'; | ||
| matcher: input.slice(match[0].length), | ||
| handle: (input, next) => next({ | ||
| ...input, | ||
| ...handler(input), | ||
| }), | ||
| handle: (input, next) => | ||
| next({ | ||
| ...input, | ||
| ...handler(input), | ||
| }), | ||
| }; | ||
@@ -33,6 +34,7 @@ } | ||
| matcher: input.slice(match[0].length), | ||
| handle: (input, next) => next({ | ||
| ...input, | ||
| parent: `${input.parent ? `${input.parent} $$ ` : ''}${parent}`, | ||
| }), | ||
| handle: (input, next) => | ||
| next({ | ||
| ...input, | ||
| parent: `${input.parent ? `${input.parent} $$ ` : ''}${parent}`, | ||
| }), | ||
| }; | ||
@@ -62,3 +64,3 @@ } | ||
| } | ||
| for (const separator of separators.filter(x => x !== '/')) { | ||
| for (const separator of separators.filter((x) => x !== '/')) { | ||
| const pos = matcher.indexOf(separator, prefix.length); | ||
@@ -68,7 +70,3 @@ if (pos !== -1) { | ||
| const unlabelled = labelPos === -1 || pos <= labelPos; | ||
| return [ | ||
| matcher.slice(prefix.length, unlabelled ? pos : labelPos), | ||
| matcher.slice(pos + separator.length), | ||
| unlabelled ? '' : matcher.slice(labelPos + 1, pos), | ||
| ]; | ||
| return [matcher.slice(prefix.length, unlabelled ? pos : labelPos), matcher.slice(pos + separator.length), unlabelled ? '' : matcher.slice(labelPos + 1, pos)]; | ||
| } | ||
@@ -75,0 +73,0 @@ } |
@@ -1,35 +0,7 @@ | ||
| import { | ||
| variantBreakpoints, | ||
| variantImportant, | ||
| variantNegative, | ||
| variantTaggedPseudoClasses, | ||
| variantPseudoClassFunctions, | ||
| variantPseudoClassesAndElements, | ||
| variantPartClasses, | ||
| } from '@unocss/preset-mini/variants'; | ||
| import { variantBreakpoints, variantImportant, variantNegative, variantTaggedPseudoClasses, variantPseudoClassFunctions, variantPseudoClassesAndElements, variantPartClasses } from '@unocss/preset-mini/variants'; | ||
| import { variantSpaceAndDivide } from './spaceAndDivide.js'; | ||
| import { variantLastChild } from './lastChild.js'; | ||
| export const variants = [ | ||
| variantLastChild, | ||
| variantBreakpoints(), | ||
| variantImportant(), | ||
| variantNegative, | ||
| variantPseudoClassFunctions(), | ||
| variantPseudoClassesAndElements(), | ||
| variantSpaceAndDivide, | ||
| variantPartClasses, | ||
| ...variantTaggedPseudoClasses({ attributifyPseudo: false }), | ||
| ]; | ||
| export const variants = [variantLastChild, variantBreakpoints(), variantImportant(), variantNegative, variantPseudoClassFunctions(), variantPseudoClassesAndElements(), variantSpaceAndDivide, variantPartClasses, ...variantTaggedPseudoClasses({ attributifyPseudo: false })]; | ||
| export { | ||
| variantLastChild, | ||
| variantBreakpoints, | ||
| variantImportant, | ||
| variantNegative, | ||
| variantPseudoClassFunctions, | ||
| variantPseudoClassesAndElements, | ||
| variantSpaceAndDivide, | ||
| variantTaggedPseudoClasses, | ||
| variantPartClasses, | ||
| }; | ||
| export { variantLastChild, variantBreakpoints, variantImportant, variantNegative, variantPseudoClassFunctions, variantPseudoClassesAndElements, variantSpaceAndDivide, variantTaggedPseudoClasses, variantPartClasses }; |
| export const variantLastChild = (matcher) => { | ||
| if (!matcher?.startsWith('last-child:')) { return matcher; }; | ||
| if (!matcher?.startsWith('last-child:')) { | ||
| return matcher; | ||
| } | ||
| return { | ||
@@ -7,2 +9,2 @@ matcher: matcher.slice(11), | ||
| }; | ||
| }; | ||
| }; |
@@ -5,2 +5,1 @@ export { useTheme } from '#theme'; | ||
| export { shortcuts } from '#shortcuts'; | ||
@@ -9,8 +9,8 @@ import { escapeSelector } from '@unocss/core'; | ||
| return (obj) => { | ||
| if (shouldExternalize && externalClasses.includes(obj.selector)) return obj.entries = []; | ||
| obj.entries.forEach(e => { | ||
| if (shouldExternalize && externalClasses.includes(obj.selector)) return (obj.entries = []); | ||
| obj.entries.forEach((e) => { | ||
| e[0] = e[0].replace(/^--un-/, `--${prefix}`); | ||
| if (typeof e[1] === "string") e[1] = e[1].replace(/var\(--un-/g, `var(--${prefix}`); | ||
| if (typeof e[1] === 'string') e[1] = e[1].replace(/var\(--un-/g, `var(--${prefix}`); | ||
| }); | ||
| }; | ||
| }; |
@@ -12,3 +12,3 @@ const breakpoints = { | ||
| const divideByTen = n => { | ||
| const divideByTen = (n) => { | ||
| const roundedDecimal = Number((n / 10).toFixed(1)); // avoid any JS maths stupidity | ||
@@ -18,30 +18,30 @@ return Math.round(roundedDecimal) === roundedDecimal ? Math.round(roundedDecimal) : roundedDecimal; | ||
| export const spaceBase = [0, 1, 2, 4, 6, 8, 10, 12, 14, 16, 20, 24, 28, 32, 40, 44, 48, 56, 64, 80, 96, 112, 128, 144]; | ||
| const spacingInPx = spaceBase.reduce((acc, e) => (acc[e] = `${e}px`, acc), {}); | ||
| const spacingInRem = spaceBase.reduce((acc, e) => (acc[e] = `${divideByTen(e)}rem`, acc), {}); | ||
| const spacingInPx = spaceBase.reduce((acc, e) => ((acc[e] = `${e}px`), acc), {}); | ||
| const spacingInRem = spaceBase.reduce((acc, e) => ((acc[e] = `${divideByTen(e)}rem`), acc), {}); | ||
| const zIndex = { | ||
| 0: "0", | ||
| 10: "10", | ||
| 20: "20", | ||
| 30: "30", | ||
| 40: "40", | ||
| 50: "50", | ||
| 0: '0', | ||
| 10: '10', | ||
| 20: '20', | ||
| 30: '30', | ||
| 40: '40', | ||
| 50: '50', | ||
| }; | ||
| export const lineWidth = { | ||
| 0: "0", | ||
| 1: "1px", | ||
| 2: "2px", | ||
| 4: "4px", | ||
| 8: "8px", | ||
| 0: '0', | ||
| 1: '1px', | ||
| 2: '2px', | ||
| 4: '4px', | ||
| 8: '8px', | ||
| }; | ||
| const borderRadius = { | ||
| 0: "0", | ||
| 2: "2px", | ||
| 4: "4px", | ||
| 6: "6px", | ||
| 8: "8px", | ||
| 16: "16px", | ||
| "full": "9999px", | ||
| 0: '0', | ||
| 2: '2px', | ||
| 4: '4px', | ||
| 6: '6px', | ||
| 8: '8px', | ||
| 16: '16px', | ||
| full: '9999px', | ||
| }; | ||
@@ -58,6 +58,6 @@ | ||
| export const durationBase = [75, 100, 150, 200, 300, 500, 700, 1000]; | ||
| const duration = durationBase.reduce((acc, e) => (acc[e] = `${e}ms`, acc), {}); | ||
| const duration = durationBase.reduce((acc, e) => ((acc[e] = `${e}ms`), acc), {}); | ||
| export const useTheme = (opts = {}) => { | ||
| const baseSpacing = opts.usePixels ? spacingInPx : spacingInRem; | ||
| const baseSpacing = opts.usePixels ? spacingInPx : spacingInRem; | ||
| const width = { ...baseSpacing, screen: '100vw' }; | ||
@@ -64,0 +64,0 @@ const height = { ...baseSpacing, screen: '100vh' }; |
Sorry, the diff of this file is too big to display
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Dev dependency count
- decreased by-15.38%
11
Worsened metrics
- Total package byte prevSize
- decreased by-0.81%
209140
- Lines of code
- decreased by-7.16%
5134
- Number of low quality alerts
- increased by100%
2
- Published versions last year
- decreased by-2.22%
44
No dependency changes