refactor(radio): flatten css vars

src/radio/src/styles/radio-group/themed-base.cssr.js

@@ -1,21 +1,18 @@
-import { c, cTB, cB, cE, cM } from '../../../../_utils/cssr'
+import { c, cTB, cB, cE, cM, createKey } from '../../../../_utils/cssr'
 
 export default c([
   ({ props }) => {
     const {
       buttonBorderColor,
       buttonBorderColorActive,
-      opacityDisabled,
-      height
+      opacityDisabled
     } = props.$local
     const {
       cubicBezierEaseInOut
     } = props.$base
     return [
       cTB('radio-group', {
-        raw: `
-          display: inline-block;
-        `
+        display: 'inline-block'
       }, [
         cE('splitor', {
           raw: `
@@ -36,22 +33,21 @@ export default c([
           })
         ]),
         ['small', 'medium', 'large'].map(size => {
+          const height = props.$local[createKey('buttonHeight', size)]
           return cM('button-group', {
-            raw: `
-              white-space: nowrap;
-            `
+            whiteSpace: 'nowrap'
           }, [
             cM(`${size}-size`, {
-              height: height[size],
-              lineHeight: height[size]
+              height,
+              lineHeight: height
             },
             [
               cB('radio-button', {
-                height: height[size],
-                lineHeight: height[size]
+                height,
+                lineHeight: height
               }),
               cE('splitor', {
-                height: height[size]
+                height
               })
             ])
           ])

src/radio/src/styles/radio/index.js

@@ -1,14 +1,6 @@
-import sizeStyle from './themed-size.cssr.js'
 import baseStyle from './themed-base.cssr.js'
 
 export default [
-  {
-    key: 'mergedSize',
-    watch: [
-      'mergedSize'
-    ],
-    CNode: sizeStyle
-  },
   {
     key: 'mergedTheme',
     watch: [

src/radio/src/styles/radio/themed-base.cssr.js

@@ -1,4 +1,4 @@
-import { c, cTB, cE, cM, cNotM, cB } from '../../../../_utils/cssr'
+import { c, cTB, cE, cM, cNotM, cB, createKey } from '../../../../_utils/cssr'
 
 export default c([
   ({ props }) => {
@@ -33,6 +33,18 @@ export default c([
           `
         },
         [
+          ['small', 'medium', 'large'].map(size => {
+            const fontSize = props.$local[createKey('fontSize', size)]
+            const radioSize = props.$local[createKey('radioSize', size)]
+            return cM(`${size}-size`, {
+              fontSize
+            }, [
+              cE('dot', {
+                height: radioSize,
+                width: radioSize
+              })
+            ])
+          }),
           cE('radio-input', {
             raw: `
               border: 0;

src/radio/src/styles/radio/themed-size.cssr.js

@@ -1,22 +0,0 @@
-import { c, cB, cE, cM } from '../../../../_utils/cssr'
-
-export default c([
-  ({ props }) => {
-    const size = props.$instance.mergedSize
-    const fontSize = props.$local.fontSize[size]
-    const radioSize = props.$local.radioSize[size]
-    return cB(
-      'radio',
-      [
-        cM(`${size}-size`, {
-          fontSize
-        }, [
-          cE('dot', {
-            height: radioSize,
-            width: radioSize
-          })
-        ])
-      ]
-    )
-  }
-])

src/radio/styles/_common.js

@@ -1,17 +1,11 @@
 export default {
-  height: {
-    small: '28px',
-    medium: '34px',
-    large: '40px'
-  },
-  fontSize: {
-    small: '14px',
-    medium: '14px',
-    large: '15px'
-  },
-  radioSize: {
-    small: '14px',
-    medium: '14px',
-    large: '16px'
-  }
+  buttonHeightSmall: '28px',
+  buttonHeightMedium: '34px',
+  buttonHeightLarge: '40px',
+  fontSizeSmall: '14px',
+  fontSizeMedium: '14px',
+  fontSizeLarge: '15px',
+  radioSizeSmall: '14px',
+  radioSizeMedium: '14px',
+  radioSizeLarge: '16px'
 }