feat: 抽离样式文件，与组件解耦

package.json

@@ -75,23 +75,23 @@
     "@commitlint/cli": "^7.0.0",
     "@commitlint/config-conventional": "^7.0.1",
     "@mapbox/jsxtreme-markdown-loader": "^0.8.3",
-    "@tarojs/cli": "1.2.0-beta.7",
-    "@tarojs/components": "1.2.0-beta.7",
-    "@tarojs/plugin-babel": "1.2.0-beta.7",
-    "@tarojs/plugin-csso": "1.2.0-beta.7",
-    "@tarojs/plugin-sass": "1.2.0-beta.7",
-    "@tarojs/plugin-uglifyjs": "1.2.0-beta.7",
-    "@tarojs/router": "1.2.0-beta.7",
-    "@tarojs/taro": "1.2.0-beta.7",
-    "@tarojs/taro-alipay": "1.2.0-beta.7",
-    "@tarojs/taro-h5": "1.2.0-beta.7",
-    "@tarojs/taro-swan": "1.2.0-beta.7",
-    "@tarojs/taro-weapp": "1.2.0-beta.7",
-    "@tarojs/webpack-runner": "1.2.0-beta.7",
+    "@tarojs/cli": "1.2.0-beta.9",
+    "@tarojs/components": "1.2.0-beta.9",
+    "@tarojs/plugin-babel": "1.2.0-beta.9",
+    "@tarojs/plugin-csso": "1.2.0-beta.9",
+    "@tarojs/plugin-sass": "1.2.0-beta.9",
+    "@tarojs/plugin-uglifyjs": "1.2.0-beta.9",
+    "@tarojs/router": "1.2.0-beta.9",
+    "@tarojs/taro": "1.2.0-beta.9",
+    "@tarojs/taro-alipay": "1.2.0-beta.9",
+    "@tarojs/taro-h5": "1.2.0-beta.9",
+    "@tarojs/taro-swan": "1.2.0-beta.9",
+    "@tarojs/taro-weapp": "1.2.0-beta.9",
+    "@tarojs/webpack-runner": "1.2.0-beta.9",
     "@types/react": "16.3.14",
     "@types/webpack-env": "^1.13.6",
     "at-ui-style": "^1.5.1",
-    "eslint-config-taro": "1.2.0-beta.7",
+    "eslint-config-taro": "1.2.0-beta.9",
     "autoprefixer": "^9.0.2",
     "babel-core": "^7.0.0-0",
     "babel-eslint": "^8.2.3",

src/app.js

@@ -1,6 +1,7 @@
 import Taro, { Component } from '@tarojs/taro'
 import Index from './pages/index/index'
 
+import './style/index.scss'
 import './app.scss'
 
 class App extends Component {
@@ -25,10 +26,10 @@ class App extends Component {
       'pages/view/steps/index',
       'pages/view/curtain/index',
       'pages/action/toast/index',
-      'pages/action/modal/index',
+      // 'pages/action/modal/index',
       'pages/action/progress/index',
-      'pages/action/action-sheet/index',
-      'pages/action/swipe-action/index',
+      // 'pages/action/action-sheet/index',
+      // 'pages/action/swipe-action/index',
       'pages/action/activity-indicator/index',
       'pages/action/message/index',
       'pages/navigation/drawer/index',
@@ -38,11 +39,11 @@ class App extends Component {
       'pages/navigation/segmented-control/index',
       'pages/navigation/navbar/index',
       'pages/navigation/indexes/index',
-      'pages/layout/flex/index',
+      // 'pages/layout/flex/index',
       'pages/layout/grid/index',
       'pages/layout/float-layout/index',
       'pages/layout/card/index',
-      'pages/layout/list/index',
+      // 'pages/layout/list/index',
       'pages/layout/accordion/index',
       'pages/form/checkbox/index',
       'pages/form/input/index',
@@ -56,8 +57,8 @@ class App extends Component {
       'pages/form/slider/index',
       'pages/form/search-bar/index',
       'pages/form/image-picker/index',
-      'pages/form/range/index',
-      'pages/advanced/calendar/index'
+      'pages/form/range/index'
+      // 'pages/advanced/calendar/index'
     ],
     window: {
       backgroundTextStyle: 'light',

src/app.scss

@@ -1,4 +1,4 @@
-@import "./style/theme/default.scss";
+@import "./style/variables/default.scss";
 
 #app {
   background-color: #f8f8f8;

src/components/accordion/index.js

@@ -5,7 +5,6 @@ import { View } from '@tarojs/components'
 
 import AtComponent from '../../common/component'
 import AtIcon from '../../components/icon'
-import './index.scss'
 
 export default class AtAccordion extends AtComponent {
   static defaultProps = {

src/components/action-sheet/body/item/index.scss

@@ -1,5 +1,5 @@
 @import "../../../../style/mixins/index.scss";
-@import "../../../../style/theme/default.scss";
+@import "../../../../style/variables/default.scss";
 
 .at-action-sheet-item {
   padding: $spacing-v-lg $spacing-h-lg;

src/components/action-sheet/footer/index.scss

@@ -1,4 +1,4 @@
-@import "../../../style/theme/default.scss";
+@import "../../../style/variables/default.scss";
 @import "../../../style/mixins/index.scss";
 
 .at-action-sheet-footer {

src/components/action-sheet/header/index.scss

@@ -1,5 +1,5 @@
 @import "../../../style/mixins/index.scss";
-@import "../../../style/theme/default.scss";
+@import "../../../style/variables/default.scss";
 
 .at-action-sheet-header {
   padding: $spacing-v-lg $spacing-h-lg;

src/components/action-sheet/index.scss

@@ -1,4 +1,4 @@
-@import "../../style/theme/default.scss";
+@import "../../style/variables/default.scss";
 @import "../../style/mixins/index.scss";
 
 $action-sheet-timer: 300ms;

src/components/activity-indicator/index.js

@@ -1,14 +1,11 @@
 import Taro from '@tarojs/taro'
 import { View, Text } from '@tarojs/components'
-
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import AtLoading from '../loading/index'
 import AtComponent from '../../common/component'
 
-import './index.scss'
-
 export default class AtActivityIndicator extends AtComponent {
   render () {
     const { color, size, mode, content } = this.props

src/components/avatar/index.js

@@ -5,8 +5,6 @@ import classNames from 'classnames'
 
 import AtComponent from '../../common/component'
 
-import './index.scss'
-
 const SIZE_CLASS = {
   large: 'large',
   normal: 'normal',

src/components/badge/index.js

@@ -5,8 +5,6 @@ import isNaN from 'lodash/isNaN'
 import classNames from 'classnames'
 
 import AtComponent from '../../common/component'
-import './index.scss'
-
 
 export default class AtBadge extends AtComponent {
   constructor () {

src/components/button/index.js

@@ -6,7 +6,6 @@ import classNames from 'classnames'
 import AtLoading from '../loading/index'
 
 import AtComponent from '../../common/component'
-import './index.scss'
 
 const SIZE_CLASS = {
   normal: 'normal',

src/components/calendar/ui/date-list/index.scss

@@ -1,5 +1,5 @@
 @import "../../../../style/mixins/index.scss";
-@import "../../../../style/theme/default.scss";
+@import "../../../../style/variables/default.scss";
 
 $daySize: 72px;
 $markSize: 8px;

src/components/card/index.js

@@ -1,14 +1,11 @@
 import Taro from '@tarojs/taro'
 import { View, Text, Image } from '@tarojs/components'
-
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import _isFunction from 'lodash/isFunction'
 
 import AtComponent from '../../common/component'
 
-import './index.scss'
-
 export default class AtCard extends AtComponent {
   handleClick = (...args) => {
     if (_isFunction(this.props.onClick)) {

src/components/checkbox/index.js

@@ -5,7 +5,6 @@ import classNames from 'classnames'
 
 import AtIcon from '../../components/icon/index'
 import AtComponent from '../../common/component'
-import './index.scss'
 
 export default class AtCheckbox extends AtComponent {
   static defaultProps = {

src/components/count-down/index.js → src/components/countdown/index.js

@@ -4,11 +4,10 @@ import { View, Text } from '@tarojs/components'
 import classNames from 'classnames'
 
 import AtComponent from '../../common/component'
-import './index.scss'
 
 const toSeconds = (day, hours, minutes, seconds) => (day * 60 * 60 * 24) + (hours * 60 * 60) + (minutes * 60) + seconds
 
-export default class AtCountDown extends AtComponent {
+export default class AtCountdown extends AtComponent {
   static defaultProps = {
     customStyle: '',
     className: '',
@@ -124,46 +123,46 @@ export default class AtCountDown extends AtComponent {
       <View
         className={
           classNames({
-            'at-count-down': true,
-            'at-count-down--card': isCard
+            'at-countdown': true,
+            'at-countdown--card': isCard
           }, className)}
         style={customStyle}
       >
         {
           isShowDay
-            ? <View className='at-count-down__item'>
-              <View className='at-count-down__time-box'>
-                <Text className='at-count-down__time'>
+            ? <View className='at-countdown__item'>
+              <View className='at-countdown__time-box'>
+                <Text className='at-countdown__time'>
                   {this.formatNum(day)}
                 </Text>
               </View>
-              <Text className='at-count-down__separator'>{format.day}</Text>
+              <Text className='at-countdown__separator'>{format.day}</Text>
             </View>
             : null
         }
-        <View className='at-count-down__item'>
-          <View className='at-count-down__time-box'>
-            <Text className='at-count-down__time'>
+        <View className='at-countdown__item'>
+          <View className='at-countdown__time-box'>
+            <Text className='at-countdown__time'>
               {this.formatNum(hours)}
             </Text>
           </View>
-          <Text className='at-count-down__separator'>{format.hours}</Text>
+          <Text className='at-countdown__separator'>{format.hours}</Text>
         </View>
-        <View className='at-count-down__item'>
-          <View className='at-count-down__time-box'>
-            <Text className='at-count-down__time'>
+        <View className='at-countdown__item'>
+          <View className='at-countdown__time-box'>
+            <Text className='at-countdown__time'>
               {this.formatNum(minutes)}
             </Text>
           </View>
-          <Text className='at-count-down__separator'>{format.minutes}</Text>
+          <Text className='at-countdown__separator'>{format.minutes}</Text>
         </View>
-        <View className='at-count-down__item'>
-          <View className='at-count-down__time-box'>
-            <Text className='at-count-down__time'>
+        <View className='at-countdown__item'>
+          <View className='at-countdown__time-box'>
+            <Text className='at-countdown__time'>
               {this.formatNum(seconds)}
             </Text>
           </View>
-          <Text className='at-count-down__separator'>{format.seconds}</Text>
+          <Text className='at-countdown__separator'>{format.seconds}</Text>
         </View>
       </View>
     )

src/components/count-down/index.test.js → src/components/countdown/index.test.js

@@ -1,7 +1,7 @@
 import Nerv from 'nervjs'
 import { renderToString } from 'nerv-server'
 
-import AtCountDown from '../../../.temp/components/count-down/index'
+import AtCountDown from '../../../.temp/components/countdown/index'
 
 describe('AtCountDown Snap', () => {
   it('render initial AtCountDown', () => {

src/components/curtain/index.js

@@ -5,7 +5,6 @@ import classNames from 'classnames'
 
 import AtComponent from '../../common/component'
 import AtIcon from '../../components/icon'
-import './index.scss'
 
 export default class AtCurtain extends AtComponent {
   static defaultProps = {

src/components/divider/index.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import AtComponent from '../../common/component'
-import './index.scss'
 
 export default class AtDivider extends AtComponent {
   static defaultProps = {

src/components/drawer/index.js

@@ -6,7 +6,6 @@ import classNames from 'classnames'
 import AtList from '../list/index'
 import AtListItem from '../list/item/index'
 import AtComponent from '../../common/component'
-import './index.scss'
 
 export default class AtDrawer extends AtComponent {
   constructor (props) {

src/components/flex/index.scss

@@ -1,5 +1,5 @@
 @import "../../style/mixins/index.scss";
-@import "../../style/theme/default.scss";
+@import "../../style/variables/default.scss";
 
 .at-row {
   @include display-flex();

src/components/flex/item/index.scss

@@ -1,5 +1,5 @@
 @import "../../../style/mixins/index.scss";
-@import "../../../style/theme/default.scss";
+@import "../../../style/variables/default.scss";
 
 .at-col {
   @include flex(1);

src/components/float-layout/index.js

@@ -1,16 +1,13 @@
 /* eslint-disable taro/function-naming */
 import Taro from '@tarojs/taro'
 import { View, Text, ScrollView } from '@tarojs/components'
-
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import _isFunction from 'lodash/isFunction'
 
 import AtIcon from '../icon/index'
 import AtComponent from '../../common/component'
 
-import './index.scss'
-
 export default class AtFloatLayout extends AtComponent {
   constructor (props) {
     super(...arguments)

src/components/form/index.js

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 
 import AtComponent from '../../common/component'
-import './index.scss'
 
 const defaultFunc = () => { }
 

src/components/grid/index.js

@@ -1,6 +1,5 @@
 import Taro from '@tarojs/taro'
 import { View, Text, Image } from '@tarojs/components'
-
 import _chunk from 'lodash/chunk'
 import PropTypes from 'prop-types'
 import classNames from 'classnames'
@@ -10,8 +9,6 @@ import _isFunction from 'lodash/isFunction'
 import AtIcon from '../icon/index'
 import AtComponent from '../../common/component'
 
-import './index.scss'
-
 export default class AtGrid extends AtComponent {
   handleClick = (item, index, row, ...arg) => {
     const { onClick, columnNum } = this.props

src/components/icon/index.js

@@ -3,9 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Text } from '@tarojs/components'
 
-
 import AtComponent from '../../common/component'
-import './index.scss'
 
 export default class AtIcon extends AtComponent {
   static defaultProps = {

src/components/image-picker/index.js

@@ -6,7 +6,6 @@ import classNames from 'classnames'
 
 import AtComponent from '../../common/component'
 import AtIcon from '../../components/icon/index'
-import './index.scss'
 
 // 生成 jsx 二维矩阵
 const generateMatrix = (files, col, showAddBtn) => {

src/components/indexes/index.js

@@ -7,8 +7,6 @@ import AtComponent from '../../common/component'
 import AtList from '../../components/list/index'
 import AtListItem from '../../components/list/item/index'
 
-import './index.scss'
-
 export default class AtIndexes extends AtComponent {
   static defaultProps = {
     customStyle: '',

src/components/input-number/index.js

@@ -5,7 +5,6 @@ import classNames from 'classnames'
 
 import AtIcon from '../../components/icon/index'
 import AtComponent from '../../common/component'
-import './index.scss'
 
 export default class AtInputNumber extends AtComponent {
   static defaultProps = {