chore: build global styles

Author: codebender828

.idea/workspace.xml

@@ -6,7 +6,7 @@
  *
  * This is a generated file. Do not edit it's contents.
  *
- * This file was generated on 2022-03-05T09:54:15.061Z
+ * This file was generated on 2022-07-10T15:02:42.611Z
  */
 
 import { ChakraProps, chakra } from "@chakra-ui/vue-system"

components.d.ts

@@ -12,6 +12,7 @@ export interface ButtonProps extends BaseThemedComponentProps {
   type?: ButtonTypes
   leftIcon?: string
   rightIcon?: string
+  spinnerPlacement?: "start" | "end"
   iconSpacing?: SystemProps["marginRight"]
 }
 

packages/c-button/src/button.utils.ts

@@ -1,32 +1,39 @@
-import clsx from 'clsx'
-import { mergeProps, SetupContext, h, Fragment } from 'vue'
-import { CSSInterpolation, serializeStyles } from '@emotion/serialize'
-import { extractStyleAttrs } from '@chakra-ui/vue-utils'
-import { getRegisteredStyles, insertStyles, SerializedStyles } from '@emotion/utils'
-import camelCase from 'lodash.camelcase'
-import { CreateStyled, PrivateStyledComponent, StyledOptions } from './types'
-import { defaultCache, __unusafe_useEmotionCache } from './cache'
-import { useEmotionTheme } from './theming'
-import memoize from 'lodash.memoize'
+import clsx from "clsx"
+import { mergeProps, SetupContext, h, Fragment } from "vue"
+import { CSSInterpolation, serializeStyles } from "@emotion/serialize"
+import { extractStyleAttrs } from "@chakra-ui/vue-utils"
+import {
+  getRegisteredStyles,
+  insertStyles,
+  SerializedStyles,
+} from "@emotion/utils"
+import camelCase from "lodash.camelcase"
+import { CreateStyled, PrivateStyledComponent, StyledOptions } from "./types"
+import { defaultCache, __unusafe_useEmotionCache } from "./cache"
+import { useEmotionTheme } from "./theming"
+import memoize from "lodash.memoize"
 
 const ILLEGAL_ESCAPE_SEQUENCE_ERROR = `You have illegal escape sequence in your template literal, most likely inside content's property value.
 Because you write your CSS inside a JavaScript string you actually have to do double escaping, so for example "content: '\\00d7';" should become "content: '\\\\00d7';".
 You can read more about this here:
 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#ES2018_revision_of_illegal_escape_sequences`
 
-let isBrowser = typeof document !== 'undefined'
+let isBrowser = typeof document !== "undefined"
 
 const Noop = () => null
 const camelCaseCache: any = {}
 
 const _camelCase = memoize((key) => camelCase(key))
 
 // @ts-ignore
-export const createStyled: CreateStyled = (tag: any, options?: StyledOptions) => {
-  if (process.env.NODE_ENV !== 'production') {
+export const createStyled: CreateStyled = (
+  tag: any,
+  options?: StyledOptions
+) => {
+  if (process.env.NODE_ENV !== "production") {
     if (tag === undefined) {
       throw new Error(
-        'You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it.'
+        "You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it."
       )
     }
   }
@@ -42,7 +49,7 @@ export const createStyled: CreateStyled = (tag: any, options?: StyledOptions) =>
   }
 
   // Extract arguments from template literals
-  return function<Props>(): PrivateStyledComponent<Props> {
+  return function <Props>(): PrivateStyledComponent<Props> {
     let args = arguments
     let styles =
       isReal && tag.__emotion_styles !== undefined
@@ -55,27 +62,34 @@ export const createStyled: CreateStyled = (tag: any, options?: StyledOptions) =>
     if (args[0] == null || args[0].raw === undefined) {
       styles.push.apply(styles, args)
     } else {
-      if (process.env.NODE_ENV !== 'production' && args[0][0] === undefined) {
+      if (process.env.NODE_ENV !== "production" && args[0][0] === undefined) {
         console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
       }
       styles.push(args[0][0])
       let len = args.length
       let i = 1
       for (; i < len; i++) {
-        if (process.env.NODE_ENV !== 'production' && args[0][i] === undefined) {
+        if (process.env.NODE_ENV !== "production" && args[0][i] === undefined) {
           console.error(ILLEGAL_ESCAPE_SEQUENCE_ERROR)
         }
         styles.push(args[i], args[0][i])
       }
     }
 
-    function StyledComponent (props: any, { attrs, expose, slots }: SetupContext) {
+    function StyledComponent(
+      props: any,
+      { attrs, expose, slots }: SetupContext
+    ) {
       const cache = __unusafe_useEmotionCache(defaultCache)
       const { as, ...restAttrs } = attrs || {}
 
       let mergedProps = { ...props, ...restAttrs }
 
-      let className = options?.__label ? `${cache.key}-${options?.__label || typeof tag === 'string' ? tag : 'element'} ` :  ``
+      let className = options?.__label
+        ? `${cache.key}-${
+            options?.__label || typeof tag === "string" ? tag : "element"
+          } `
+        : ``
       const FinalTag = as || baseTag
       const classInterpolations = [] as string[]
 
@@ -98,7 +112,7 @@ export const createStyled: CreateStyled = (tag: any, options?: StyledOptions) =>
         ...attrs,
         ...mergedProps,
       })
-  
+
       if (attrs.class) {
         className += getRegisteredStyles(
           cache.registered,
@@ -116,14 +130,13 @@ export const createStyled: CreateStyled = (tag: any, options?: StyledOptions) =>
       const rules = insertStyles(
         cache,
         serialized,
-        typeof FinalTag === 'string'
+        typeof FinalTag === "string"
       )
 
       className += `${cache.key}-${serialized.name}`
-        if (targetClassName !== undefined) {
-          className += ` ${targetClassName}`
-        }
-
+      if (targetClassName !== undefined) {
+        className += ` ${targetClassName}`
+      }
 
       const { attrs: htmlAttrs } = extractStyleAttrs(mergedProps)
       const vnodeProps = {
@@ -133,25 +146,21 @@ export const createStyled: CreateStyled = (tag: any, options?: StyledOptions) =>
       // @ts-expect-error
       delete vnodeProps?.theme
 
-      const StyledElement = (
-        <FinalTag {...vnodeProps}>
-          {slots}
-        </FinalTag>
-      )
-      
+      const StyledElement = <FinalTag {...vnodeProps}>{slots}</FinalTag>
+
       let possiblyStyleElement = <Noop />
       if (!isBrowser && rules !== undefined) {
         let serializedNames = serialized.name
         let next = serialized.next
         while (next !== undefined) {
-          serializedNames += ' ' + next.name
+          serializedNames += " " + next.name
           next = next.next
         }
         possiblyStyleElement = (
           <style
             {...{
               [`data-emotion`]: `${cache.key} ${serializedNames}`,
-              nonce: cache.sheet.nonce
+              nonce: cache.sheet.nonce,
             }}
           >
             {rules}
@@ -167,36 +176,39 @@ export const createStyled: CreateStyled = (tag: any, options?: StyledOptions) =>
     }
 
     StyledComponent._name =
-      identifierName === undefined ?
-        `Styled${
-          typeof baseTag === 'string' ? baseTag : baseTag.name || 'Component'
-        }` :
-        identifierName
+      identifierName === undefined
+        ? `Styled${
+            typeof baseTag === "string" ? baseTag : baseTag.name || "Component"
+          }`
+        : identifierName
 
     StyledComponent.__emotion_real = StyledComponent
     StyledComponent.__emotion_base = baseTag
     StyledComponent.__emotion_styles = styles
 
-    Object.defineProperty(StyledComponent, 'toString', {
+    Object.defineProperty(StyledComponent, "toString", {
       value() {
         if (
           targetClassName === undefined &&
-          process.env.NODE_ENV !== 'production'
+          process.env.NODE_ENV !== "production"
         ) {
-          return 'NO_COMPONENT_SELECTOR'
+          return "NO_COMPONENT_SELECTOR"
         }
 
         return `.${targetClassName}`
-      }
+      },
     })
 
-    StyledComponent.withComponent = (nextTag: any, nextOptions: StyledOptions) => {
+    StyledComponent.withComponent = (
+      nextTag: any,
+      nextOptions: StyledOptions
+    ) => {
       return createStyled(
         nextTag,
-        nextOptions === undefined ?
-          options :
-          { ...(options || {}), ...nextOptions }
-      // Here we use apply to make TypeScript happy. Otherwise we would use spread operator
+        nextOptions === undefined
+          ? options
+          : { ...(options || {}), ...nextOptions }
+        // Here we use apply to make TypeScript happy. Otherwise we would use spread operator
       ).apply(null, styles)
     }
 
@@ -205,6 +217,8 @@ export const createStyled: CreateStyled = (tag: any, options?: StyledOptions) =>
   }
 }
 
-export function css(...args: Array<CSSInterpolation | TemplateStringsArray>): SerializedStyles {
+export function css(
+  ...args: Array<CSSInterpolation | TemplateStringsArray>
+): SerializedStyles {
   return serializeStyles(args, {})
-}
+}

packages/styled/src/styled.tsx

@@ -1,26 +1,32 @@
-import weakMemoize from '@emotion/weak-memoize'
-import { createContext } from '@chakra-ui/vue-utils';
+import weakMemoize from "@emotion/weak-memoize"
+import { createContext } from "@chakra-ui/vue-utils"
 import { getTheme } from "./utils"
-import { ComputedRef } from 'vue';
+import { ComputedRef } from "vue"
 
-const [_EmotionThemeProvider, useEmotionTheme, EmotionThemeContextSymbol] = createContext<object>({
-  strict: false,
-  name: "EmotionThemeContext",
-})
+const [_EmotionThemeProvider, useEmotionTheme, EmotionThemeContextSymbol] =
+  createContext<object>({
+    strict: false,
+    name: "EmotionThemeContext",
+  })
 
-let createCacheWithTheme = /* #__PURE__ */ weakMemoize(outerTheme => {
-  return weakMemoize(theme => {
+let createCacheWithTheme = /* #__PURE__ */ weakMemoize((outerTheme) => {
+  return weakMemoize((theme) => {
     return getTheme(outerTheme, theme)
   })
 })
 
-function EmotionThemeProvider (theme: object | ((Obj: object) => Object)) {
+function EmotionThemeProvider(theme: object | ((Obj: object) => Object)) {
   let _theme = useEmotionTheme()
   if (theme !== _theme) {
-    // @ts-ignore
+    // @ts-ignore weak map typing not fulfilled properly
     _theme = createCacheWithTheme(_theme)(theme)
   }
   _EmotionThemeProvider(_theme)
 }
 
-export { createCacheWithTheme as createThemeCache, EmotionThemeProvider, useEmotionTheme, EmotionThemeContextSymbol }
+export {
+  createCacheWithTheme as createThemeCache,
+  EmotionThemeProvider,
+  useEmotionTheme,
+  EmotionThemeContextSymbol,
+}