@antsoo-lib/components 0.1.2 → 0.1.4

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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,88 @@
+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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,13 @@
+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

@@ -0,0 +1,38 @@
+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

@@ -0,0 +1,135 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,5 @@
+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

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

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

@@ -0,0 +1,162 @@
+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

@@ -0,0 +1,77 @@
+/**
+ * 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