@symbo.ls/emotion 3.2.3 → 3.2.8

package/classList.js

@@ -0,0 +1,61 @@
+'use strict'
+
+import { exec, isObject, isString } from '@domql/utils'
+
+const RE_MULTI_SPACE = /\s+/g
+
+export const assignKeyAsClassname = element => {
+  const { key } = element
+  if (element.classlist === true) element.classlist = key
+  else if (
+    !element.classlist &&
+    typeof key === 'string' &&
+    key.charCodeAt(0) === 95 &&
+    key.charCodeAt(1) !== 95
+  ) {
+    element.classlist = key.slice(1)
+  }
+}
+
+// stringifies class object
+export const classify = (obj, element) => {
+  let className = ''
+  for (const item in obj) {
+    const param = obj[item]
+    if (typeof param === 'boolean' && param) className += ` ${item}`
+    else if (typeof param === 'string') className += ` ${param}`
+    else if (typeof param === 'function') {
+      className += ` ${exec(param, element)}`
+    }
+  }
+  return className
+}
+
+export const classList = (params, element) => {
+  if (!params) return
+  const { key } = element
+  if (params === true) params = element.classlist = { key }
+  if (isString(params)) params = element.classlist = { default: params }
+  if (isObject(params)) params = classify(params, element)
+  // TODO: fails on string
+  const className = params.replace(RE_MULTI_SPACE, ' ').trim()
+  return className
+}
+
+// LEGACY (still needed in old domql)
+export const applyClassListOnNode = (params, element, node) => {
+  const className = classList(params, element)
+  // Use setAttribute for universal SVG/HTML compatibility
+  if (node && typeof node.setAttribute === 'function') {
+    node.setAttribute('class', className)
+  } else if (node) {
+    try { node.className = className } catch (e) { /* SVG element */ }
+  }
+  return className
+}
+
+export function applyClasslist (params, element, node) {
+  applyClassListOnNode(params, element, node)
+}
+
+export default applyClasslist

package/index.js

@@ -1,6 +1,10 @@
 'use strict'
 
 import createInstance from '@emotion/css/create-instance'
+import { isObjectLike, isString, isNumber, isBoolean, exec } from '@domql/utils'
+import { applyClassListOnNode } from './classList.js'
+
+export * from './classList.js'
 
 export const createEmotion = (key = 'smbls', container) => {
   const cleanKey = key.replaceAll(/\./g, '-')
@@ -8,3 +12,69 @@ export const createEmotion = (key = 'smbls', container) => {
 }
 
 export const emotion = createEmotion()
+
+export const transformEmotionStyle = emotion => {
+  return (params, element, state) => {
+    const execParams = exec(params, element)
+    if (params) {
+      const { __ref: ref } = element
+      ref.__class.style = execParams
+    }
+    transformEmotionClass(emotion)(
+      element.classlist,
+      element,
+      element.state,
+      true
+    )
+  }
+}
+
+export const transformEmotionClass = emotion => {
+  return (params, element, state, flag) => {
+    if (element.style && !flag) return
+    const { __ref } = element
+    const { __class, __classNames } = __ref
+
+    if (!isObjectLike(params)) return
+    if (element.props.class) {
+      __classNames.classProps = element.props.class
+    }
+    if (element.attr?.class) {
+      __classNames.class = element.attr.class
+    }
+
+    for (const key in __class) {
+      const prop = __class[key]
+      if (!prop) {
+        delete __classNames[key]
+        continue
+      }
+      let className
+      if (isString(prop) || isNumber(prop)) className = prop
+      else if (isBoolean(prop)) className = element.key
+      else className = emotion.css(prop)
+      __classNames[key] = className
+    }
+
+    // Remove stale classNames that no longer exist in __class
+    for (const key in __classNames) {
+      if (key === 'classProps' || key === 'class') continue
+      if (__class[key] === undefined) {
+        delete __classNames[key]
+      }
+    }
+
+    if (element.node) applyClassListOnNode(__classNames, element, element.node)
+  }
+}
+
+export const transformDOMQLEmotion = (emotion, options) => {
+  if (!emotion) emotion = createInstance(options || { key: 'smbls' })
+
+  return {
+    style: transformEmotionStyle(emotion),
+    classlist: transformEmotionClass(emotion)
+  }
+}
+
+export * from './initEmotion.js'

package/initEmotion.js

@@ -0,0 +1,45 @@
+'use strict'
+
+import { transformDOMQLEmotion, emotion as defaultEmotion } from './index.js'
+import { init, DEFAULT_CONTEXT } from 'smbls'
+import { deepClone, deepMerge } from '@domql/utils'
+
+import { DEFAULT_CONFIG } from '@symbo.ls/default-config'
+
+const OPTION_KEYS = [
+  'useReset', 'useVariable', 'useFontImport', 'useIconSprite',
+  'useSvgSprite', 'useDocumentTheme', 'useDefaultIcons', 'useDefaultConfig', 'verbose',
+  'globalTheme'
+]
+
+export const initEmotion = (key, options = {}) => {
+  const doc = options.parent || options.document || document
+  const initOptions = options.initOptions || {}
+  const emotion = initOptions.emotion
+
+  if (!initOptions.emotion) initOptions.emotion = defaultEmotion
+
+  const registry =
+    options.registry || transformDOMQLEmotion(initOptions.emotion, options)
+  const designSystem =
+    initOptions.useDefaultConfig || options.useDefaultConfig || options.designSystem?.useDefaultConfig
+      ? deepMerge(options.designSystem, deepClone(DEFAULT_CONFIG))
+      : options.designSystem || deepClone(DEFAULT_CONFIG)
+
+  // Pick context-level overrides (from user's config.js spread into context)
+  const contextOverrides = {}
+  for (const k of OPTION_KEYS) {
+    if (options[k] !== undefined) contextOverrides[k] = options[k]
+  }
+
+  const scratchSystem = init(designSystem, {
+    key,
+    emotion,
+    document: doc,
+    ...DEFAULT_CONTEXT,
+    ...contextOverrides,
+    ...initOptions
+  })
+
+  return [scratchSystem, emotion, registry]
+}

package/package.json

@@ -1,15 +1,14 @@
 {
   "name": "@symbo.ls/emotion",
-  "version": "3.2.3",
+  "version": "3.2.8",
   "license": "MIT",
-  "source": "index.js",
-  "main": "index.js",
   "type": "module",
-  "targets": {},
-  "files": [],
+  "main": "index.js",
+  "source": "index.js",
   "dependencies": {
-    "@emotion/css": "^11.10.0"
-  },
-  "browserslist": "> 0.5%, last 2 versions, not dead",
-  "gitHead": "9fc1b79b41cdc725ca6b24aec64920a599634681"
+    "@domql/utils": "^3.2.3",
+    "@emotion/css": "^11.10.0",
+    "@symbo.ls/default-config": "^3.2.3",
+    "smbls": "^3.2.3"
+  }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2023 symbo.ls
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.