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

ref: https://github.com/vuejs/rfcs/pull/231
2020-11-16 18:27:15 -05:00
parent 62372e9943
commit 41bb7fa330
16 changed files with 497 additions and 341 deletions
--- a/packages/compiler-sfc/tests/snapshots/compileScript.spec.ts.snap
+++ b/packages/compiler-sfc/tests/snapshots/compileScript.spec.ts.snap
@@ -1,62 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`SFC compile <script setup> CSS vars injection <script> w/ default export 1`] = `
-"const __default__ = { setup() {} }
-import { useCssVars as _useCssVars } from 'vue'
-const __injectCSSVars__ = () => {
-_useCssVars(_ctx => ({ color: _ctx.color }))
-}
-const __setup__ = __default__.setup
-__default__.setup = __setup__
-  ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
-  : __injectCSSVars__
-export default __default__"
-`;
-
-exports[`SFC compile <script setup> CSS vars injection <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 }))
-}
-const __setup__ = __default__.setup
-__default__.setup = __setup__
-  ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
-  : __injectCSSVars__
-export default __default__"
-`;
-
-exports[`SFC compile <script setup> CSS vars injection <script> w/ no default export 1`] = `
-"const a = 1
-const __default__ = {}
-import { useCssVars as _useCssVars } from 'vue'
-const __injectCSSVars__ = () => {
-_useCssVars(_ctx => ({ color: _ctx.color }))
-}
-const __setup__ = __default__.setup
-__default__.setup = __setup__
-  ? (props, ctx) => { __injectCSSVars__();return __setup__(props, ctx) }
-  : __injectCSSVars__
-export default __default__"
-`;
-
-exports[`SFC compile <script setup> CSS vars injection w/ <script setup> 1`] = `
-"import { useCssVars as _useCssVars } from 'vue'
-
-export default {
-  expose: [],
-  setup() {
-const color = 'red'
-_useCssVars(_ctx => ({ color }))
-return { color }
-}
-
-}"
-`;
-
 exports[`SFC compile <script setup> defineOptions() 1`] = `
 "export default {
  expose: [],
@@ -86,7 +29,7 @@ export default {
                default: () => bar
              }
            },
-  setup() {
+  setup(__props) {

          
        
@@ -104,7 +47,7 @@ exports[`SFC compile <script setup> errors should allow defineOptions() referenc
                default: bar => bar + 1
              }
            },
-  setup() {
+  setup(__props) {

          const bar = 1
          
@@ -121,7 +64,7 @@ import { ref } from 'vue'
      
 export default {
  expose: [],
-  setup() {
+  setup(__props) {

      const foo = _ref(1)
      
@@ -136,7 +79,7 @@ exports[`SFC compile <script setup> imports import dedupe between <script> and <
        
 export default {
  expose: [],
-  setup() {
+  setup(__props) {

        x()
        
@@ -152,7 +95,7 @@ exports[`SFC compile <script setup> imports should extract comment for import or
        
 export default {
  expose: [],
-  setup() {
+  setup(__props) {

        
 return { a, b }
@@ -165,7 +108,7 @@ exports[`SFC compile <script setup> imports should hoist and expose imports 1`]
 "import { ref } from 'vue'
 export default {
  expose: [],
-  setup() {
+  setup(__props) {

 return { ref }
 }
@@ -182,13 +125,13 @@ import { ref } from 'vue'
        
 export default {
  expose: [],
-  setup() {
+  setup(__props) {

        const count = ref(0)
        const constant = {}
        function fn() {}
        
-return (_ctx, _cache, $props, $setup, $data, $options) => {
+return (_ctx, _cache) => {
  return (_openBlock(), _createBlock(_Fragment, null, [
    _createVNode(Foo),
    _createVNode(\\"div\\", { onClick: fn }, _toDisplayString(_unref(count)) + \\" \\" + _toDisplayString(constant) + \\" \\" + _toDisplayString(_unref(other)), 1 /* TEXT */)
@@ -208,11 +151,11 @@ import { ref } from 'vue'
        
 export default {
  expose: [],
-  setup() {
+  setup(__props) {

        const count = ref(0)
        
-return (_ctx, _cache, $props, $setup, $data, $options) => {
+return (_ctx, _cache) => {
  return (_openBlock(), _createBlock(_Fragment, null, [
    _createVNode(\\"div\\", null, _toDisplayString(_unref(count)), 1 /* TEXT */),
    _hoisted_1
@@ -228,7 +171,7 @@ exports[`SFC compile <script setup> ref: syntax sugar accessing ref binding 1`]

 export default {
  expose: [],
-  setup() {
+  setup(__props) {

      const a = _ref(1)
      console.log(a.value)
@@ -247,7 +190,7 @@ exports[`SFC compile <script setup> ref: syntax sugar array destructure 1`] = `

 export default {
  expose: [],
-  setup() {
+  setup(__props) {

      const n = _ref(1), [__a, __b = 1, ...__c] = useFoo()
 const a = _ref(__a);
@@ -266,7 +209,7 @@ exports[`SFC compile <script setup> ref: syntax sugar convert ref declarations 1

 export default {
  expose: [],
-  setup() {
+  setup(__props) {

      const foo = _ref()
      const a = _ref(1)
@@ -287,7 +230,7 @@ exports[`SFC compile <script setup> ref: syntax sugar multi ref declarations 1`]

 export default {
  expose: [],
-  setup() {
+  setup(__props) {

      const a = _ref(1), b = _ref(2), c = _ref({
        count: 0
@@ -304,7 +247,7 @@ exports[`SFC compile <script setup> ref: syntax sugar mutating ref binding 1`] =

 export default {
  expose: [],
-  setup() {
+  setup(__props) {

      const a = _ref(1)
      const b = _ref({ count: 0 })
@@ -326,7 +269,7 @@ exports[`SFC compile <script setup> ref: syntax sugar nested destructure 1`] = `

 export default {
  expose: [],
-  setup() {
+  setup(__props) {

      const [{ a: { b: __b }}] = useFoo()
 const b = _ref(__b);
@@ -346,7 +289,7 @@ exports[`SFC compile <script setup> ref: syntax sugar object destructure 1`] = `

 export default {
  expose: [],
-  setup() {
+  setup(__props) {

      const n = _ref(1), { a: __a, b: __c, d: __d = 1, e: __f = 2, ...__g } = useFoo()
 const a = _ref(__a);
@@ -365,7 +308,7 @@ return { n, a, c, d, f, g }
 exports[`SFC compile <script setup> ref: syntax sugar should not convert non ref labels 1`] = `
 "export default {
  expose: [],
-  setup() {
+  setup(__props) {

      foo: a = 1, b = 2, c = {
        count: 0
@@ -382,7 +325,7 @@ exports[`SFC compile <script setup> ref: syntax sugar using ref binding in prope

 export default {
  expose: [],
-  setup() {
+  setup(__props) {

      const a = _ref(1)
      const b = { a: a.value }
@@ -401,7 +344,7 @@ exports[`SFC compile <script setup> should expose top level declarations 1`] = `
      
 export default {
  expose: [],
-  setup() {
+  setup(__props) {

      let a = 1
      const b = 2
@@ -509,7 +452,7 @@ export default _defineComponent({
    literalUnionMixed: { type: [String, Number, Boolean], required: true },
    intersection: { type: Object, required: true }
  } as unknown as undefined,
-  setup() {
+  setup(__props) {

      
      
@@ -526,7 +469,7 @@ export interface Foo {}
      
 export default _defineComponent({
  expose: [],
-  setup() {
+  setup(__props) {

        
 return {  }
--- a/packages/compiler-sfc/tests/snapshots/cssVars.spec.ts.snap
+++ b/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 }
+}
+
+}"
+`;