refactor(base-loading): use cssr

src/_base/loading/src/Loading.vue

@@ -25,8 +25,14 @@
 </template>
 
 <script>
+import usecssr from '../../../_mixins/usecssr'
+import styles from './styles/'
+
 export default {
-  name: 'NBaseLoading',
+  name: 'BaseLoading',
+  mixins: [
+    usecssr(styles)
+  ],
   props: {
     radius: {
       type: Number,

src/_base/loading/src/styles/index.js

@@ -0,0 +1,9 @@
+import baseStyle from './themed-base.cssr'
+
+export default [
+  {
+    key: 'theme',
+    watch: ['theme'],
+    CNode: baseStyle
+  }
+]

src/_base/loading/src/styles/themed-base.cssr.js

@@ -0,0 +1,67 @@
+import { cTB, c, cB } from '../../../../_utils/cssr'
+
+const dashOffset = 500
+
+export default c([
+  ({ props }) => {
+    const {
+      easeInOutCubicBezier
+    } = props.$base
+    const {
+      color
+    } = props.$local
+    return [
+      cTB('base-loading', {
+        raw: `
+          line-height: 1;
+          stroke: ${color};
+          transition: stroke .3s ${easeInOutCubicBezier};
+        `
+      }, [
+        cB('base-loading-circular', {
+          raw: `
+            height: 100%;
+            width: 100%;
+            animation: n-base-loading-rotate 1.5s linear infinite;
+            transform-origin: center;
+          `
+        }, [
+          cB('base-loading-circular-path', {
+            raw: `
+              transform-origin: center;
+              animation: n-base-loading-dash 1.5s ease-in-out infinite;
+              stroke-dasharray: ${dashOffset};
+              stroke-dashoffset: 0;
+              stroke-linecap: round;
+            `
+          })
+        ])
+      ]),
+      c('@keyframes n-base-loading-rotate', {
+        raw: `
+          0% {
+            transform: rotate(0deg);
+          }
+          100% {
+            transform: rotate(270deg);
+          }
+        `
+      }),
+      c('@keyframes n-base-loading-dash', {
+        raw: `
+          0% {
+            stroke-dashoffset: ${dashOffset};
+          }
+          50% {
+            stroke-dashoffset: ${dashOffset / 4};
+            transform: rotate(135deg);
+          }
+          100% {
+            stroke-dashoffset: ${dashOffset};
+            transform: rotate(450deg);
+          }
+        `
+      })
+    ]
+  }
+])

src/_base/loading/styles/dark.js

@@ -0,0 +1,11 @@
+import create from '../../../styles/_utils/create-component-base'
+
+export default create({
+  name: 'BaseLoading',
+  theme: 'dark',
+  getDerivedVariables ({ base, derived }) {
+    return {
+      color: derived.primaryColor
+    }
+  }
+})

src/_base/loading/styles/light.js

@@ -0,0 +1,11 @@
+import create from '../../../styles/_utils/create-component-base'
+
+export default create({
+  name: 'BaseLoading',
+  theme: 'light',
+  getDerivedVariables ({ base, derived }) {
+    return {
+      color: derived.primaryColor
+    }
+  }
+})

src/_styles/BaseLoading.scss

@@ -1,51 +1,51 @@
-@import './mixins/mixins.scss';
+// @import './mixins/mixins.scss';
 
-@keyframes n-base-loading-rotate {
+// @keyframes n-base-loading-rotate {
-  0% {
+//   0% {
-    transform: rotate(0deg);
+//     transform: rotate(0deg);
-  }
+//   }
-  100% {
+//   100% {
-    transform: rotate(270deg);
+//     transform: rotate(270deg);
-  }
+//   }
-}
+// }
 
-@keyframes n-base-loading-dash {
+// @keyframes n-base-loading-dash {
-  0% {
+//   0% {
-    stroke-dashoffset: $--n-base-loading-stroke-dashoffset;
+//     stroke-dashoffset: $--n-base-loading-stroke-dashoffset;
-  }
+//   }
-  50% {
+//   50% {
-    stroke-dashoffset: $--n-base-loading-stroke-dashoffset / 4;
+//     stroke-dashoffset: $--n-base-loading-stroke-dashoffset / 4;
-    transform: rotate(135deg);
+//     transform: rotate(135deg);
-  }
+//   }
-  100% {
+//   100% {
-    stroke-dashoffset: $--n-base-loading-stroke-dashoffset;
+//     stroke-dashoffset: $--n-base-loading-stroke-dashoffset;
-    transform: rotate(450deg);
+//     transform: rotate(450deg);
-  }
+//   }
-}
+// }
 
-@include themes-mixin {
+// @include themes-mixin {
-  @include b(base-loading) {
+//   @include b(base-loading) {
-    @include once {
+//     @include once {
-      line-height: 1;
+//       line-height: 1;
-    }
+//     }
-    stroke: $--base-loading-stroke;
+//     stroke: $--base-loading-stroke;
-    transition: stroke .3s $--n-ease-in-out-cubic-bezier;
+//     transition: stroke .3s $--n-ease-in-out-cubic-bezier;
-    @include b(base-loading-circular) {
+//     @include b(base-loading-circular) {
-      @include once {
+//       @include once {
-        height: 100%;
+//         height: 100%;
-        width: 100%;
+//         width: 100%;
-        animation: n-base-loading-rotate 1.5s linear infinite;
+//         animation: n-base-loading-rotate 1.5s linear infinite;
-        transform-origin: center;
+//         transform-origin: center;
-      }
+//       }
-      @include b(base-loading-circular-path) {
+//       @include b(base-loading-circular-path) {
-        @include once {
+//         @include once {
-          transform-origin: center;
+//           transform-origin: center;
-          animation: n-base-loading-dash 1.5s ease-in-out infinite;
+//           animation: n-base-loading-dash 1.5s ease-in-out infinite;
-          stroke-dasharray: $--n-base-loading-stroke-dashoffset;
+//           stroke-dasharray: $--n-base-loading-stroke-dashoffset;
-          stroke-dashoffset: 0;
+//           stroke-dashoffset: 0;
-          stroke-linecap: round;
+//           stroke-linecap: round;
-        }
+//         }
-      }
+//       }
-    }
+//     }
-  }
+//   }
-}
+// }

src/_styles/index.scss

@@ -3,7 +3,7 @@
 // don't use ~vue-virtual-scroller, if so rollup won't work
 @import '../../node_modules/vue-virtual-scroller/dist/vue-virtual-scroller';
 
-@import './BaseLoading.scss';
+// @import './BaseLoading.scss';
 @import './BaseMenuMask.scss';
 // @import './BaseTrackingRect.scss';
 @import './Descriptions.scss';

src/log/styles/dark.js

@@ -1,8 +1,14 @@
 import create from '../../styles/_utils/create-component-base'
+import baseLoadingStyle from '../../_base/loading/styles/dark'
+import scrollbarStyle from '../../scrollbar/styles/dark'
 
 export default create({
   name: 'Log',
   theme: 'dark',
+  peer: [
+    baseLoadingStyle,
+    scrollbarStyle
+  ],
   getDerivedVariables ({ base, derived }) {
     const {
       secondaryTextOverlayColor,

src/log/styles/light.js

@@ -1,8 +1,14 @@
 import create from '../../styles/_utils/create-component-base'
+import baseLoadingStyle from '../../_base/loading/styles/light'
+import scrollbarStyle from '../../scrollbar/styles/light'
 
 export default create({
   name: 'Log',
   theme: 'light',
+  peer: [
+    baseLoadingStyle,
+    scrollbarStyle
+  ],
   getDerivedVariables ({ base, derived }) {
     const {
       secondaryTextColor,

src/spin/styles/dark.js

@@ -1,9 +1,13 @@
 import create from '../../styles/_utils/create-component-base'
 import sizeVariables from './_common'
+import baseLoadingStyle from '../../_base/loading/styles/dark'
 
 export default create({
   name: 'Spin',
   theme: 'dark',
+  peer: [
+    baseLoadingStyle
+  ],
   getDerivedVariables ({ base, derived }) {
     const {
       disabledOpacity

src/spin/styles/light.js

@@ -1,9 +1,13 @@
 import create from '../../styles/_utils/create-component-base'
 import sizeVariables from './_common'
+import baseLoadingStyle from '../../_base/loading/styles/light'
 
 export default create({
   name: 'Spin',
   theme: 'light',
+  peer: [
+    baseLoadingStyle
+  ],
   getDerivedVariables ({ base, derived }) {
     const {
       disabledOpacity