@antsoo-lib/components 0.1.11 → 0.1.13

package/src/_util/cssinjs/linters/legacyNotSelectorLinter.ts

@@ -1,33 +0,0 @@
-import type { Linter, LinterInfo } from './interface'
-import { lintWarning } from './utils'
-
-function isConcatSelector(selector: string) {
-  const notContent = selector.match(/:not\(([^)]*)\)/)?.[1] || ''
-
-  // split selector. e.g.
-  // `h1#a.b` => ['h1', #a', '.b']
-  const splitCells = notContent.split(/(\[[^[]*\])|(?=[.#])/).filter((str) => str)
-
-  return splitCells.length > 1
-}
-
-function parsePath(info: LinterInfo) {
-  return info.parentSelectors.reduce((prev, cur) => {
-    if (!prev) {
-      return cur
-    }
-
-    return cur.includes('&') ? cur.replace(/&/g, prev) : `${prev} ${cur}`
-  }, '')
-}
-
-const linter: Linter = (_key, _value, info) => {
-  const parentSelectorPath = parsePath(info)
-  const notList = parentSelectorPath.match(/:not\([^)]*\)/g) || []
-
-  if (notList.length > 0 && notList.some(isConcatSelector)) {
-    lintWarning(`Concat ':not' selector not support in legacy browsers.`, info)
-  }
-}
-
-export default linter

package/src/_util/cssinjs/linters/logicalPropertiesLinter.ts

@@ -1,88 +0,0 @@
-import type { Linter } from './interface'
-import { lintWarning } from './utils'
-
-const linter: Linter = (key, value, info) => {
-  switch (key) {
-    case 'marginLeft':
-    case 'marginRight':
-    case 'paddingLeft':
-    case 'paddingRight':
-    case 'left':
-    case 'right':
-    case 'borderLeft':
-    case 'borderLeftWidth':
-    case 'borderLeftStyle':
-    case 'borderLeftColor':
-    case 'borderRight':
-    case 'borderRightWidth':
-    case 'borderRightStyle':
-    case 'borderRightColor':
-    case 'borderTopLeftRadius':
-    case 'borderTopRightRadius':
-    case 'borderBottomLeftRadius':
-    case 'borderBottomRightRadius':
-      lintWarning(
-        `You seem to be using non-logical property '${key}' which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`,
-        info,
-      )
-      return
-    case 'margin':
-    case 'padding':
-    case 'borderWidth':
-    case 'borderStyle':
-      // case 'borderColor':
-      if (typeof value === 'string') {
-        const valueArr = value.split(' ').map((item) => item.trim())
-        if (valueArr.length === 4 && valueArr[1] !== valueArr[3]) {
-          lintWarning(
-            `You seem to be using '${key}' property with different left ${key} and right ${key}, which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`,
-            info,
-          )
-        }
-      }
-      return
-    case 'clear':
-    case 'textAlign':
-      if (value === 'left' || value === 'right') {
-        lintWarning(
-          `You seem to be using non-logical value '${value}' of ${key}, which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`,
-          info,
-        )
-      }
-      return
-    case 'borderRadius':
-      if (typeof value === 'string') {
-        const radiusGroups = value.split('/').map((item) => item.trim())
-        const invalid = radiusGroups.reduce((result, group) => {
-          if (result) {
-            return result
-          }
-          const radiusArr = group.split(' ').map((item) => item.trim())
-          // borderRadius: '2px 4px'
-          if (radiusArr.length >= 2 && radiusArr[0] !== radiusArr[1]) {
-            return true
-          }
-          // borderRadius: '4px 4px 2px'
-          if (radiusArr.length === 3 && radiusArr[1] !== radiusArr[2]) {
-            return true
-          }
-          // borderRadius: '4px 4px 2px 4px'
-          if (radiusArr.length === 4 && radiusArr[2] !== radiusArr[3]) {
-            return true
-          }
-          return result
-        }, false)
-
-        if (invalid) {
-          lintWarning(
-            `You seem to be using non-logical value '${value}' of ${key}, which is not compatible with RTL mode. Please use logical properties and values instead. For more information: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties.`,
-            info,
-          )
-        }
-      }
-
-    default:
-  }
-}
-
-export default linter

package/src/_util/cssinjs/linters/parentSelectorLinter.ts

@@ -1,15 +0,0 @@
-import type { Linter } from '..'
-import { lintWarning } from './utils'
-
-const linter: Linter = (_key, _value, info) => {
-  if (
-    info.parentSelectors.some((selector) => {
-      const selectors = selector.split(',')
-      return selectors.some((item) => item.split('&').length > 2)
-    })
-  ) {
-    lintWarning('Should not use more than one `&` in a selector.', info)
-  }
-}
-
-export default linter

package/src/_util/cssinjs/linters/utils.ts

@@ -1,13 +0,0 @@
-import devWarning from '../../../vc-util/warning'
-import type { LinterInfo } from './interface'
-
-export function lintWarning(message: string, info: LinterInfo) {
-  const { path, parentSelectors } = info
-
-  devWarning(
-    false,
-    `[Ant Design Vue CSS-in-JS] ${path ? `Error in '${path}': ` : ''}${message}${
-      parentSelectors.length ? ` Selector info: ${parentSelectors.join(' -> ')}` : ''
-    }`,
-  )
-}

package/src/_util/cssinjs/theme/Theme.ts

@@ -1,38 +0,0 @@
-import warning from '../../warning'
-import type { DerivativeFunc, TokenType } from './interface'
-
-let uuid = 0
-
-/**
- * Theme with algorithms to derive tokens from design tokens.
- * Use `createTheme` first which will help to manage the theme instance cache.
- */
-export default class Theme<DesignToken extends TokenType, DerivativeToken extends TokenType> {
-  private derivatives: DerivativeFunc<DesignToken, DerivativeToken>[]
-  public readonly id: number
-
-  constructor(
-    derivatives:
-      | DerivativeFunc<DesignToken, DerivativeToken>
-      | DerivativeFunc<DesignToken, DerivativeToken>[],
-  ) {
-    this.derivatives = Array.isArray(derivatives) ? derivatives : [derivatives]
-    this.id = uuid
-
-    if (derivatives.length === 0) {
-      warning(
-        derivatives.length > 0,
-        '[Ant Design Vue CSS-in-JS] Theme should have at least one derivative function.',
-      )
-    }
-
-    uuid += 1
-  }
-
-  getDerivativeToken(token: DesignToken): DerivativeToken {
-    return this.derivatives.reduce<DerivativeToken>(
-      (result, derivative) => derivative(token, result),
-      undefined as any,
-    )
-  }
-}

package/src/_util/cssinjs/theme/ThemeCache.ts

@@ -1,135 +0,0 @@
-import type Theme from './Theme'
-import type { DerivativeFunc } from './interface'
-
-// ================================== Cache ==================================
-type ThemeCacheMap = Map<
-  DerivativeFunc<any, any>,
-  {
-    map?: ThemeCacheMap
-    value?: [Theme<any, any>, number]
-  }
->
-
-type DerivativeOptions = DerivativeFunc<any, any>[]
-
-export function sameDerivativeOption(left: DerivativeOptions, right: DerivativeOptions) {
-  if (left.length !== right.length) {
-    return false
-  }
-  for (let i = 0; i < left.length; i++) {
-    if (left[i] !== right[i]) {
-      return false
-    }
-  }
-  return true
-}
-
-export default class ThemeCache {
-  public static MAX_CACHE_SIZE = 20
-  public static MAX_CACHE_OFFSET = 5
-
-  private readonly cache: ThemeCacheMap
-  private keys: DerivativeOptions[]
-  private cacheCallTimes: number
-
-  constructor() {
-    this.cache = new Map()
-    this.keys = []
-    this.cacheCallTimes = 0
-  }
-
-  public size(): number {
-    return this.keys.length
-  }
-
-  private internalGet(
-    derivativeOption: DerivativeOptions,
-    updateCallTimes = false,
-  ): [Theme<any, any>, number] | undefined {
-    let cache: ReturnType<ThemeCacheMap['get']> = { map: this.cache }
-    derivativeOption.forEach((derivative) => {
-      if (!cache) {
-        cache = undefined
-      } else {
-        cache = cache?.map?.get(derivative)
-      }
-    })
-    if (cache?.value && updateCallTimes) {
-      cache.value[1] = this.cacheCallTimes++
-    }
-    return cache?.value
-  }
-
-  public get(derivativeOption: DerivativeOptions): Theme<any, any> | undefined {
-    return this.internalGet(derivativeOption, true)?.[0]
-  }
-
-  public has(derivativeOption: DerivativeOptions): boolean {
-    return !!this.internalGet(derivativeOption)
-  }
-
-  public set(derivativeOption: DerivativeOptions, value: Theme<any, any>): void {
-    // New cache
-    if (!this.has(derivativeOption)) {
-      if (this.size() + 1 > ThemeCache.MAX_CACHE_SIZE + ThemeCache.MAX_CACHE_OFFSET) {
-        const [targetKey] = this.keys.reduce<[DerivativeOptions, number]>(
-          (result, key) => {
-            const [, callTimes] = result
-            if (this.internalGet(key)![1] < callTimes) {
-              return [key, this.internalGet(key)![1]]
-            }
-            return result
-          },
-          [this.keys[0], this.cacheCallTimes],
-        )
-        this.delete(targetKey)
-      }
-
-      this.keys.push(derivativeOption)
-    }
-
-    let cache = this.cache
-    derivativeOption.forEach((derivative, index) => {
-      if (index === derivativeOption.length - 1) {
-        cache.set(derivative, { value: [value, this.cacheCallTimes++] })
-      } else {
-        const cacheValue = cache.get(derivative)
-        if (!cacheValue) {
-          cache.set(derivative, { map: new Map() })
-        } else if (!cacheValue.map) {
-          cacheValue.map = new Map()
-        }
-        cache = cache.get(derivative)!.map!
-      }
-    })
-  }
-
-  private deleteByPath(
-    currentCache: ThemeCacheMap,
-    derivatives: DerivativeFunc<any, any>[],
-  ): Theme<any, any> | undefined {
-    const cache = currentCache.get(derivatives[0])!
-    if (derivatives.length === 1) {
-      if (!cache.map) {
-        currentCache.delete(derivatives[0])
-      } else {
-        currentCache.set(derivatives[0], { map: cache.map })
-      }
-      return cache.value?.[0]
-    }
-    const result = this.deleteByPath(cache.map!, derivatives.slice(1))
-    if ((!cache.map || cache.map.size === 0) && !cache.value) {
-      currentCache.delete(derivatives[0])
-    }
-    return result
-  }
-
-  public delete(derivativeOption: DerivativeOptions): Theme<any, any> | undefined {
-    // If cache exists
-    if (this.has(derivativeOption)) {
-      this.keys = this.keys.filter((item) => !sameDerivativeOption(item, derivativeOption))
-      return this.deleteByPath(this.cache, derivativeOption)
-    }
-    return undefined
-  }
-}

package/src/_util/cssinjs/theme/createTheme.ts

@@ -1,26 +0,0 @@
-import Theme from './Theme'
-import ThemeCache from './ThemeCache'
-import type { DerivativeFunc, TokenType } from './interface'
-
-const cacheThemes = new ThemeCache()
-
-/**
- * Same as new Theme, but will always return same one if `derivative` not changed.
- */
-export default function createTheme<
-  DesignToken extends TokenType,
-  DerivativeToken extends TokenType,
->(
-  derivatives:
-    | DerivativeFunc<DesignToken, DerivativeToken>[]
-    | DerivativeFunc<DesignToken, DerivativeToken>,
-) {
-  const derivativeArr = Array.isArray(derivatives) ? derivatives : [derivatives]
-  // Create new theme if not exist
-  if (!cacheThemes.has(derivativeArr)) {
-    cacheThemes.set(derivativeArr, new Theme(derivativeArr))
-  }
-
-  // Get theme from cache and return
-  return cacheThemes.get(derivativeArr)!
-}

package/src/_util/cssinjs/theme/index.ts

@@ -1,4 +0,0 @@
-export { default as createTheme } from './createTheme'
-export { default as Theme } from './Theme'
-export { default as ThemeCache } from './ThemeCache'
-export type { DerivativeFunc, TokenType } from './interface'

package/src/_util/cssinjs/theme/interface.ts

@@ -1,5 +0,0 @@
-export type TokenType = object
-export type DerivativeFunc<DesignToken extends TokenType, DerivativeToken extends TokenType> = (
-  designToken: DesignToken,
-  derivativeToken?: DerivativeToken,
-) => DerivativeToken

package/src/_util/cssinjs/transformers/interface.ts

@@ -1,5 +0,0 @@
-import type { CSSObject } from '..'
-
-export interface Transformer {
-  visit?: (cssObj: CSSObject) => CSSObject
-}

package/src/_util/cssinjs/transformers/legacyLogicalProperties.ts

@@ -1,162 +0,0 @@
-import type { CSSObject } from '..'
-import type { Transformer } from './interface'
-
-function splitValues(value: string | number) {
-  if (typeof value === 'number') {
-    return [value]
-  }
-
-  const splitStyle = String(value).split(/\s+/)
-
-  // Combine styles split in brackets, like `calc(1px + 2px)`
-  let temp = ''
-  let brackets = 0
-  return splitStyle.reduce<string[]>((list, item) => {
-    if (item.includes('(')) {
-      temp += item
-      brackets += item.split('(').length - 1
-    } else if (item.includes(')')) {
-      temp += ` ${item}`
-      brackets -= item.split(')').length - 1
-      if (brackets === 0) {
-        list.push(temp)
-        temp = ''
-      }
-    } else if (brackets > 0) {
-      temp += ` ${item}`
-    } else {
-      list.push(item)
-    }
-    return list
-  }, [])
-}
-
-type MatchValue = string[] & {
-  notSplit?: boolean
-}
-
-function noSplit(list: MatchValue): MatchValue {
-  list.notSplit = true
-  return list
-}
-
-const keyMap: Record<string, MatchValue> = {
-  // Inset
-  inset: ['top', 'right', 'bottom', 'left'],
-  insetBlock: ['top', 'bottom'],
-  insetBlockStart: ['top'],
-  insetBlockEnd: ['bottom'],
-  insetInline: ['left', 'right'],
-  insetInlineStart: ['left'],
-  insetInlineEnd: ['right'],
-
-  // Margin
-  marginBlock: ['marginTop', 'marginBottom'],
-  marginBlockStart: ['marginTop'],
-  marginBlockEnd: ['marginBottom'],
-  marginInline: ['marginLeft', 'marginRight'],
-  marginInlineStart: ['marginLeft'],
-  marginInlineEnd: ['marginRight'],
-
-  // Padding
-  paddingBlock: ['paddingTop', 'paddingBottom'],
-  paddingBlockStart: ['paddingTop'],
-  paddingBlockEnd: ['paddingBottom'],
-  paddingInline: ['paddingLeft', 'paddingRight'],
-  paddingInlineStart: ['paddingLeft'],
-  paddingInlineEnd: ['paddingRight'],
-
-  // Border
-  borderBlock: noSplit(['borderTop', 'borderBottom']),
-  borderBlockStart: noSplit(['borderTop']),
-  borderBlockEnd: noSplit(['borderBottom']),
-  borderInline: noSplit(['borderLeft', 'borderRight']),
-  borderInlineStart: noSplit(['borderLeft']),
-  borderInlineEnd: noSplit(['borderRight']),
-
-  // Border width
-  borderBlockWidth: ['borderTopWidth', 'borderBottomWidth'],
-  borderBlockStartWidth: ['borderTopWidth'],
-  borderBlockEndWidth: ['borderBottomWidth'],
-  borderInlineWidth: ['borderLeftWidth', 'borderRightWidth'],
-  borderInlineStartWidth: ['borderLeftWidth'],
-  borderInlineEndWidth: ['borderRightWidth'],
-
-  // Border style
-  borderBlockStyle: ['borderTopStyle', 'borderBottomStyle'],
-  borderBlockStartStyle: ['borderTopStyle'],
-  borderBlockEndStyle: ['borderBottomStyle'],
-  borderInlineStyle: ['borderLeftStyle', 'borderRightStyle'],
-  borderInlineStartStyle: ['borderLeftStyle'],
-  borderInlineEndStyle: ['borderRightStyle'],
-
-  // Border color
-  borderBlockColor: ['borderTopColor', 'borderBottomColor'],
-  borderBlockStartColor: ['borderTopColor'],
-  borderBlockEndColor: ['borderBottomColor'],
-  borderInlineColor: ['borderLeftColor', 'borderRightColor'],
-  borderInlineStartColor: ['borderLeftColor'],
-  borderInlineEndColor: ['borderRightColor'],
-
-  // Border radius
-  borderStartStartRadius: ['borderTopLeftRadius'],
-  borderStartEndRadius: ['borderTopRightRadius'],
-  borderEndStartRadius: ['borderBottomLeftRadius'],
-  borderEndEndRadius: ['borderBottomRightRadius'],
-}
-
-function skipCheck(value: string | number) {
-  return { _skip_check_: true, value }
-}
-
-/**
- * Convert css logical properties to legacy properties.
- * Such as: `margin-block-start` to `margin-top`.
- * Transform list:
- * - inset
- * - margin
- * - padding
- * - border
- */
-const transform: Transformer = {
-  visit: (cssObj) => {
-    const clone: CSSObject = {}
-
-    Object.keys(cssObj).forEach((key) => {
-      const value = cssObj[key]
-      const matchValue = keyMap[key]
-
-      if (matchValue && (typeof value === 'number' || typeof value === 'string')) {
-        const values = splitValues(value)
-
-        if (matchValue.length && matchValue.notSplit) {
-          // not split means always give same value like border
-          matchValue.forEach((matchKey) => {
-            clone[matchKey] = skipCheck(value)
-          })
-        } else if (matchValue.length === 1) {
-          // Handle like `marginBlockStart` => `marginTop`
-          clone[matchValue[0]] = skipCheck(value)
-        } else if (matchValue.length === 2) {
-          // Handle like `marginBlock` => `marginTop` & `marginBottom`
-          matchValue.forEach((matchKey, index) => {
-            clone[matchKey] = skipCheck(values[index] ?? values[0])
-          })
-        } else if (matchValue.length === 4) {
-          // Handle like `inset` => `top` & `right` & `bottom` & `left`
-          matchValue.forEach((matchKey, index) => {
-            clone[matchKey] = skipCheck(values[index] ?? values[index - 2] ?? values[0])
-          })
-        } else {
-          clone[key] = value
-        }
-      } else {
-        clone[key] = value
-      }
-    })
-
-    return clone
-  },
-}
-
-export default transform

package/src/_util/cssinjs/transformers/px2rem.ts

@@ -1,77 +0,0 @@
-/**
- * respect https://github.com/cuth/postcss-pxtorem
- */
-import unitless from '@emotion/unitless'
-
-import type { CSSObject } from '..'
-import type { Transformer } from './interface'
-
-export interface Options {
-  /**
-   * The root font size.
-   * @default 16
-   */
-  rootValue?: number
-  /**
-   * The decimal numbers to allow the REM units to grow to.
-   * @default 5
-   */
-  precision?: number
-  /**
-   * Whether to allow px to be converted in media queries.
-   * @default false
-   */
-  mediaQuery?: boolean
-}
-
-const pxRegex = /url\([^)]+\)|var\([^)]+\)|(\d+(?:\.\d+)?|\.\d+)px/g
-
-function toFixed(number: number, precision: number) {
-  const multiplier = 10 ** (precision + 1)
-  const wholeNumber = Math.floor(number * multiplier)
-  return (Math.round(wholeNumber / 10) * 10) / multiplier
-}
-
-const transform = (options: Options = {}): Transformer => {
-  const { rootValue = 16, precision = 5, mediaQuery = false } = options
-
-  const pxReplace = (m: string, $1: any) => {
-    if (!$1) return m
-    const pixels = Number.parseFloat($1)
-    // covenant: pixels <= 1, not transform to rem @zombieJ
-    if (pixels <= 1) return m
-    const fixedVal = toFixed(pixels / rootValue, precision)
-    return `${fixedVal}rem`
-  }
-
-  const visit = (cssObj: CSSObject): CSSObject => {
-    const clone: CSSObject = { ...cssObj }
-
-    Object.entries(cssObj).forEach(([key, value]) => {
-      if (typeof value === 'string' && value.includes('px')) {
-        const newValue = value.replace(pxRegex, pxReplace)
-        clone[key] = newValue
-      }
-
-      // no unit
-      if (!unitless[key] && typeof value === 'number' && value !== 0) {
-        clone[key] = `${value}px`.replace(pxRegex, pxReplace)
-      }
-
-      // Media queries
-      const mergedKey = key.trim()
-      if (mergedKey.startsWith('@') && mergedKey.includes('px') && mediaQuery) {
-        const newKey = key.replace(pxRegex, pxReplace)
-
-        clone[newKey] = clone[key]
-        delete clone[key]
-      }
-    })
-
-    return clone
-  }
-
-  return { visit }
-}
-
-export default transform