fix: use merged theme in memory

Author: codebender828

package.json

@@ -46,84 +46,48 @@
     "docs-serve": "yarn workspace chakra-ui-docs nuxt start",
     "evalbundle": "bundlesize",
     "contributors:add": "all-contributors add",
-    "contributors:generate": "all-contributors generate"
+    "contributors:generate": "all-contributors generate",
+    "pkg": "manypkg run",
+    "pkgs:check": "manypkg check",
+    "pkgs:fix": "manypkg fix"
   },
   "dependencies": {
-    "@chakra-ui/styled-system": "^1.12.1",
-    "@emotion/css": "^11.0.0",
-    "@mdx-js/vue-loader": "^1.6.1",
-    "@nuxtjs/dotenv": "^1.4.0",
-    "@nuxtjs/emotion": "^0.1.0",
-    "@nuxtjs/now-builder": "^0.17.1",
-    "@nuxtjs/router": "^1.5.0",
-    "@popperjs/core": "^2.4.0",
-    "@storybook/addon-actions": "^5.2.1",
-    "@storybook/addon-centered": "^5.2.1",
-    "@storybook/addon-links": "^5.2.1",
-    "@storybook/addons": "^5.2.1",
-    "@storybook/storybook-deployer": "^2.8.1",
-    "@storybook/theming": "^5.2.8",
-    "@storybook/vue": "^5.3.3",
-    "aria-hidden": "^1.1.1",
-    "breadstick": "^0.2.14",
-    "can-use-dom": "^0.1.0",
-    "chakra-loader": "latest",
-    "color": "^3.1.2",
-    "copy-to-clipboard": "^3.3.1",
-    "core-js": "^3.6.4",
-    "defu": "^2.0.4",
-    "dotenv-defaults": "^1.1.1",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "eslint-plugin-vue-a11y": "^0.0.31",
-    "feather-icons-paths": "^1.0.8",
-    "file-contributors": "^1.0.2",
-    "focus-trap": "^5.1.0",
-    "focus-trap-vue": "^0.0.4",
-    "husky": "^3.0.8",
-    "install": "^0.13.0",
-    "lerna": "^3.20.2",
-    "lint-staged": "^9.4.2",
-    "mdx-vue": "^1.0.2",
-    "mdx-vue-loader": "^1.0.2",
-    "node-fetch": "^2.6.0",
-    "nuxt": "2.14.6",
-    "portal-vue": "^2.1.6",
-    "prismjs": "^1.19.0",
-    "register-service-worker": "^1.6.2",
-    "sass-loader": "^8.0.2",
-    "v-scroll-lock": "^1.1.0",
-    "vue": "^2.6.11",
-    "vue-error-boundary": "^1.0.3",
-    "vue-live": "1.5.1",
-    "vue-loader": "^15.7.1",
-    "vue-lorem-ipsum": "^0.0.1",
-    "vue-meta": "^2.3.3",
-    "vue-prism-editor": "^0.5.1",
-    "vue-router": "^3.1.6",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "devDependencies": {
     "@babel/cli": "^7.8.4",
-    "@babel/core": "^7.9.0",
+    "@babel/core": "^7.9.6",
     "@babel/plugin-proposal-object-rest-spread": "^7.7.4",
     "@babel/plugin-proposal-optional-chaining": "^7.14.5",
     "@babel/plugin-transform-modules-commonjs": "^7.7.4",
     "@babel/plugin-transform-parameters": "^7.7.4",
     "@babel/preset-env": "^7.15.0",
     "@babel/runtime-corejs2": "^7.8.7",
+    "@chakra-ui/styled-system": "^1.12.2",
     "@changesets/changelog-github": "^0.2.7",
     "@changesets/cli": "^2.7.1",
     "@changesets/get-github-info": "^0.4.4",
-    "@commitlint/cli": "^8.2.0",
-    "@commitlint/config-conventional": "^8.2.0",
+    "@commitlint/cli": "^8.3.5",
+    "@commitlint/config-conventional": "^8.3.4",
     "@emotion/babel-plugin": "^11.1.2",
+    "@emotion/css": "^11.0.0",
     "@emotion/eslint-plugin": "^11.0.0",
     "@emotion/jest": "^11.3.0",
+    "@manypkg/cli": "^0.18.0",
+    "@mdx-js/vue-loader": "^1.6.1",
+    "@nuxtjs/dotenv": "^1.4.0",
+    "@nuxtjs/emotion": "^0.1.0",
     "@nuxtjs/eslint-config": "^3.0.0",
     "@nuxtjs/eslint-module": "^1.0.0",
     "@nuxtjs/google-analytics": "^2.4.0",
     "@nuxtjs/module-test-utils": "^1.6.1",
+    "@nuxtjs/now-builder": "^0.17.1",
+    "@nuxtjs/router": "^1.5.0",
+    "@popperjs/core": "^2.4.0",
+    "@storybook/addon-actions": "^5.2.1",
+    "@storybook/addon-centered": "^5.2.1",
+    "@storybook/addon-links": "^5.2.1",
+    "@storybook/addons": "^5.2.1",
+    "@storybook/storybook-deployer": "^2.8.1",
+    "@storybook/theming": "^5.2.8",
+    "@storybook/vue": "^5.3.3",
     "@testing-library/jest-dom": "^5.1.1",
     "@testing-library/user-event": "^10.0.0",
     "@testing-library/vue": "^4.1.0",
@@ -140,10 +104,11 @@
     "@vue/test-utils": "1.0.0-beta.29",
     "add": "^2.0.6",
     "all-contributors-cli": "^6.20.0",
+    "aria-hidden": "^1.1.1",
     "babel-core": "7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-jest": "^23.6.0",
+    "babel-jest": "^25.5.1",
     "babel-loader": "^8.0.6",
     "babel-plugin-syntax-jsx": "^6.18.0",
     "babel-plugin-transform-es2015-for-of": "^6.23.0",
@@ -152,15 +117,45 @@
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-vue": "^2.0.2",
     "babelrc-rollup": "^3.0.0",
+    "breadstick": "^0.2.14",
     "bundlesize": "^0.18.0",
+    "can-use-dom": "^0.1.0",
+    "chakra-loader": "latest",
+    "color": "^3.1.2",
+    "copy-to-clipboard": "^3.3.1",
+    "core-js": "^3.6.4",
     "cross-env": "^7.0.2",
+    "defu": "^2.0.4",
+    "dotenv-defaults": "^1.1.1",
+    "eslint": "^7.12.1",
     "eslint-config-prettier": "^6.10.0",
+    "eslint-config-standard": "^16.0.3",
     "eslint-loader": "^3.0.3",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-nuxt": ">=0.4.2",
     "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-testing-library": "^3.3.1",
-    "jest": "^25.1.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "eslint-plugin-vue-a11y": "^0.0.31",
+    "feather-icons-paths": "^1.0.8",
+    "file-contributors": "^1.0.2",
+    "focus-trap": "^5.1.0",
+    "focus-trap-vue": "^0.0.4",
+    "husky": "^4.2.5",
+    "install": "^0.13.0",
+    "jest": "^25.5.2",
+    "lerna": "^3.20.2",
+    "lint-staged": "^10.0.0",
+    "mdx-vue": "^1.0.2",
+    "mdx-vue-loader": "^1.0.2",
+    "node-fetch": "^2.6.0",
+    "nuxt": "2.14.6",
+    "portal-vue": "^2.1.6",
     "prettier": "^1.19.1",
+    "prismjs": "^1.19.0",
+    "register-service-worker": "^1.6.2",
     "rimraf": "^3.0.2",
     "rollup": "^1.31.1",
     "rollup-plugin-babel": "^4.3.3",
@@ -172,9 +167,18 @@
     "rollup-plugin-scss": "^2.1.0",
     "rollup-plugin-terser": "^5.1.2",
     "rollup-plugin-vue": "^5.1.4",
+    "sass-loader": "^8.0.2",
     "v-scroll-lock": "^1.1.0",
+    "vue": "^2.6.12",
+    "vue-error-boundary": "^1.0.3",
+    "vue-live": "1.5.1",
     "vue-loader": "^15.7.1",
     "vue-lorem-ipsum": "^0.0.1",
+    "vue-meta": "^2.3.3",
+    "vue-prism-editor": "^0.5.1",
+    "vue-router": "^3.1.6",
+    "vue-server-renderer": "2.6.12",
+    "vue-template-compiler": "2.6.12",
     "watch": "^1.0.2",
     "yarn": "^1.22.10"
   },

packages/chakra-ui-core/package.json

@@ -36,7 +36,7 @@
     "max-overall-size": "85KB"
   },
   "dependencies": {
-    "@chakra-ui/styled-system": "^1.12.1",
+    "@chakra-ui/styled-system": "^1.12.2",
     "@popperjs/core": "^2.4.0",
     "animejs": "^3.1.0",
     "aria-hidden": "^1.1.1",
@@ -50,11 +50,13 @@
   },
   "peerDependencies": {
     "@emotion/css": "^11.0.0",
-    "vue": "^2.6.10"
+    "vue": ">=2.6.10"
   },
   "devDependencies": {
+    "@emotion/css": "^11.0.0",
     "@fortawesome/fontawesome-common-types": "^0.2.36",
-    "rimraf": "^3.0.2"
+    "rimraf": "^3.0.2",
+    "vue": "^2.6.12"
   },
   "keywords": [
     "vue",

packages/chakra-ui-core/rollup.config.js

@@ -3,14 +3,11 @@ import path from 'path'
 import babel from 'rollup-plugin-babel'
 import resolve from 'rollup-plugin-node-resolve'
 import cjs from 'rollup-plugin-commonjs'
-import { terser } from 'rollup-plugin-terser'
 import buble from 'rollup-plugin-buble'
 import scss from 'rollup-plugin-scss'
 import vue from 'rollup-plugin-vue'
 import pkg from './package.json'
 
-const production = !process.env.ROLLUP_WATCH
-
 // Plugins
 const bubelConfig = buble({
   objectAssign: 'Object.assign',
@@ -65,8 +62,8 @@ const commons = {
         'node_modules/object-assign/index.js': ['assign']
       },
       include: /node_modules/
-    }),
-    production && terser()
+    })
+    // production && terser()
   ]
 }
 

packages/chakra-ui-core/src/CButton/CButton.js

@@ -28,7 +28,6 @@ import { buttonProps } from './utils/button.props'
  * @see Docs https://vue.chakra-ui.com/button
  */
 const CButtonIcon = {
-  name: 'CBreadcrumb',
   mixins: [createStyledAttrsMixin('CButtonIcon', true)],
   props: {
     icon: {

packages/chakra-ui-core/src/CThemeProvider/CThemeProvider.js

@@ -19,6 +19,7 @@ const CThemeProvider = {
   provide () {
     return {
       $chakraTheme: () => this.theme,
+      $chakraRawTheme: () => this.theme,
       $chakraIcons: this.icons,
       /**
        * By default the ThemeProvider exposes a colorMode value of light

packages/chakra-ui-core/src/Chakra/index.js

@@ -36,6 +36,8 @@ const Chakra = {
     // Recursively merge extended theme variables
     const mergedTheme = toCSSVar(merge(defaultTheme, options.extendTheme))
 
+    console.log('mergedTheme', mergedTheme)
+
     Vue.directive('chakra', createClientDirective(mergedTheme))
 
     // Bind theme and icons to prototype

packages/chakra-ui-core/src/utils/components.js

@@ -1,6 +1,7 @@
 import { css } from '@emotion/css'
 import { runIfFn } from '@chakra-ui/utils'
-import { composeSystem, __get } from './styled-system'
+import { css as _css } from '@chakra-ui/styled-system'
+import { __get } from './styled-system'
 import { hasOwn, extractChakraAttrs } from './object'
 
 export const isVueComponent = (value) => {
@@ -37,7 +38,7 @@ export function createWatcher (property) {
 export const createStyledAttrsMixin = name => ({
   name,
   inheritAttrs: false,
-  inject: ['$chakraTheme', '$chakraColorMode'],
+  inject: ['$chakraTheme', '$chakraRawTheme', '$chakraColorMode'],
   data () {
     return {
       attrs$: {},
@@ -58,6 +59,9 @@ export const createStyledAttrsMixin = name => ({
     theme () {
       return this.$chakraTheme()
     },
+    rawTheme () {
+      return this.$chakraRawTheme()
+    },
     /** Split style attributes and native attributes */
     splitProps () {
       const $attrs = this.$data.attrs$
@@ -80,14 +84,23 @@ export const createStyledAttrsMixin = name => ({
     className () {
       const { styleAttrs } = this.splitProps
 
-      const boxStylesObject = composeSystem(
-        {
-          ...this.componentStyles || {},
-          ...this.baseStyle,
-          ...styleAttrs
-        },
-        this.theme
-      )
+      // console.log(name, this.componentStyles)
+
+      // const boxStylesObject = composeSystem(
+      //   {
+      //     ...this.componentStyles || {},
+      //     ...this.baseStyle,
+      //     ...styleAttrs
+      //   },
+      //   this.theme
+      // )
+      const merged = {
+        ...this.componentStyles || {},
+        ...this.baseStyle,
+        ...styleAttrs
+      }
+      const boxStylesObject = _css(merged)(this.theme)
+
       return css(boxStylesObject)
     },
     /** Computed attributes object */

packages/chakra-ui-nuxt/lib/module.js

@@ -1,7 +1,9 @@
 const { resolve } = require('path')
 const defu = require('defu')
-const { defaultTheme, parsePackIcons, internalIcons, createServerDirective } = require('@chakra-ui/vue')
+const { parsePackIcons, internalIcons, createServerDirective } = require('@chakra-ui/vue')
+const defaultTheme = require('@chakra-ui/theme-vue')
 const { ChakraLoaderPlugin } = require('chakra-loader')
+const { toCSSVar } = require('@chakra-ui/styled-system')
 
 module.exports = function (moduleOptions) {
   const { nuxt } = this
@@ -15,7 +17,7 @@ module.exports = function (moduleOptions) {
   }
 
   // Recursively merge extended theme variables
-  const theme = defu(options.extendTheme, defaultTheme)
+  const mergedTheme = toCSSVar(defu(options.extendTheme, defaultTheme.default))
 
   // Resolve icons
   let packIcons = {}
@@ -30,10 +32,10 @@ module.exports = function (moduleOptions) {
   nuxt.options.build.transpile.push('@chakra-ui')
 
   if (nuxt.options.render.bundleRenderer.directives) {
-    nuxt.options.render.bundleRenderer.directives.chakra = createServerDirective(theme)
+    nuxt.options.render.bundleRenderer.directives.chakra = createServerDirective(mergedTheme)
   } else {
     nuxt.options.render.bundleRenderer.directives = {
-      chakra: createServerDirective(theme)
+      chakra: createServerDirective(mergedTheme)
     }
   }
 
@@ -52,14 +54,14 @@ module.exports = function (moduleOptions) {
       )
     })
   }
-
   // Global bindings and plugins
   this.addPlugin({
     src: resolve(__dirname, 'plugin.js'),
     fileName: 'chakra.js',
     options: {
-      theme,
-      icons
+      theme: mergedTheme,
+      icons,
+      extendTheme: options.extendTheme
     }
   })
 }