feat(compiler-sfc): new SFC css varaible injection implementation

ref: https://github.com/vuejs/rfcs/pull/231

packages/compiler-sfc/__tests__/__snapshots__/cssVars.spec.ts.snap

@@ -0,0 +1,107 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CSS vars injection codegen <script> w/ default export 1`] = `
+"const __default__ = { setup() {} }
+import { useCssVars as _useCssVars } from 'vue'
+const __injectCSSVars__ = () => {
+_useCssVars(_ctx => ({
+  color: (_ctx.color)
+}), \\"xxxxxxxx\\")}
+const __setup__ = __default__.setup
+__default__.setup = __setup__
+  ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
+  : __injectCSSVars__
+export default __default__"
+`;
+
+exports[`CSS vars injection codegen <script> w/ default export in strings/comments 1`] = `
+"
+          // export default {}
+          const __default__ = {}
+        
+import { useCssVars as _useCssVars } from 'vue'
+const __injectCSSVars__ = () => {
+_useCssVars(_ctx => ({
+  color: (_ctx.color)
+}), \\"xxxxxxxx\\")}
+const __setup__ = __default__.setup
+__default__.setup = __setup__
+  ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
+  : __injectCSSVars__
+export default __default__"
+`;
+
+exports[`CSS vars injection codegen <script> w/ no default export 1`] = `
+"const a = 1
+const __default__ = {}
+import { useCssVars as _useCssVars } from 'vue'
+const __injectCSSVars__ = () => {
+_useCssVars(_ctx => ({
+  color: (_ctx.color)
+}), \\"xxxxxxxx\\")}
+const __setup__ = __default__.setup
+__default__.setup = __setup__
+  ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
+  : __injectCSSVars__
+export default __default__"
+`;
+
+exports[`CSS vars injection codegen w/ <script setup> 1`] = `
+"import { useCssVars as _useCssVars, unref as _unref } from 'vue'
+
+export default {
+  expose: [],
+  setup(__props) {
+
+_useCssVars(_ctx => ({
+  color: (color)
+}), \\"xxxxxxxx\\")
+const color = 'red'
+return { color }
+}
+
+}"
+`;
+
+exports[`CSS vars injection generating correct code for nested paths 1`] = `
+"const a = 1
+const __default__ = {}
+import { useCssVars as _useCssVars } from 'vue'
+const __injectCSSVars__ = () => {
+_useCssVars(_ctx => ({
+  color: (_ctx.color),
+  font_size: (_ctx.font.size)
+}), \\"xxxxxxxx\\")}
+const __setup__ = __default__.setup
+__default__.setup = __setup__
+  ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
+  : __injectCSSVars__
+export default __default__"
+`;
+
+exports[`CSS vars injection w/ <script setup> binding analysis 1`] = `
+"import { useCssVars as _useCssVars, unref as _unref } from 'vue'
+import { ref } from 'vue'
+        
+export default {
+  expose: [],
+  props: {
+            foo: String
+          },
+  setup(__props) {
+
+_useCssVars(_ctx => ({
+  color: (color),
+  size: (_unref(size)),
+  foo: (__props.foo)
+}), \\"xxxxxxxx\\")
+
+        const color = 'red'
+        const size = ref('10px')
+        
+        
+return { color, size, ref }
+}
+
+}"
+`;