support style export (#15)

uxcore · Sep 17, 2018 · 0bc4f4b · 0bc4f4b
1 parent 69c3412
commit 0bc4f4b
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 39 deletions.
diff --git a/HISTORY.md b/HISTORY.md
@@ -1,3 +1,7 @@
+# 0.5.2
+
+* `CHANGED` support js style export
+
 # 0.5.1
 
 * `FIXED` fix issue #50 remove extra 3px padding.

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "uxcore-multi-select",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "uxcore-multi-select component for uxcore.",
   "repository": "https://github.com/uxcore/uxcore-multi-select.git",
   "author": "peijie.dpj",

diff --git a/src/MultiSelect.less b/src/MultiSelect.less
@@ -5,21 +5,18 @@
  * Copyright 2014-2015, Uxcore Team, Alinw.
  * All rights reserved.
  */
-@__multi-select-prefix-cls: kuma-multi-select;
-@__multi-select-trigger-height-large: @trigger-height-large;
-@__multi-select-trigger-height-middle: @trigger-height-middle;
-@__multi-select-trigger-height-small: @trigger-height-small;
+@__multiSelectPrefixCls: kuma-multi-select;
 
-.@{__multi-select-prefix-cls} {
+.@{__multiSelectPrefixCls} {
   display: inline-block;
   box-sizing: border-box;
   margin: 0;
   position: relative;
   width: 200px;
   color: @dark-alpha-2;
   font-size: 12px;
-  line-height: @__multi-select-trigger-height-large;
-  height: @__multi-select-trigger-height-large;
+  line-height: @trigger-height-large;
+  height: @trigger-height-large;
 
   &-arrow {
     position: absolute;
@@ -47,13 +44,13 @@
     border: 1px solid @border-color;
     &:hover {
       border-color: @border-hover-color;
-      .@{__multi-select-prefix-cls}-arrow {
+      .@{__multiSelectPrefixCls}-arrow {
         color: @normal-alpha-3;
       }
     }
   }
 
-  .@{__multi-select-prefix-cls}-selection__rendered {
+  .@{__multiSelectPrefixCls}-selection__rendered {
     margin: 0;
     list-style: none;
   }
@@ -67,7 +64,7 @@
   }
 
   &-selection--multiple {
-    height: @__multi-select-trigger-height-large;
+    height: @trigger-height-large;
     cursor: pointer;
     display: inline-block;
     width: 200px;
@@ -76,7 +73,7 @@
     white-space: nowrap;
     padding-left: 12px;
     padding-right: 20px;
-    line-height: @__multi-select-trigger-height-large - 2;
+    line-height: @trigger-height-large - 2;
     &--content{
       display: inline-block;
       overflow: hidden;
@@ -85,14 +82,14 @@
       vertical-align: inherit;
     }
 
-    .@{__multi-select-prefix-cls}-selection__rendered {
+    .@{__multiSelectPrefixCls}-selection__rendered {
       overflow: hidden;
       text-overflow: ellipsis;
       padding-left: 6px;
       padding-bottom: 4px;
     }
 
-    .@{__multi-select-prefix-cls}-selection__choice {
+    .@{__multiSelectPrefixCls}-selection__choice {
       background-color: #f3f3f3;
       cursor: default;
       float: left;
@@ -102,19 +99,19 @@
       position: relative;
     }
 
-    .@{__multi-select-prefix-cls}-selection__choice__content {
+    .@{__multiSelectPrefixCls}-selection__choice__content {
       //display: inline-block;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       max-width: 100%;
 
-      &:last-child .@{__multi-select-prefix-cls}-selection__choice__break {
+      &:last-child .@{__multiSelectPrefixCls}-selection__choice__break {
         display: none;
       }
     }
 
-    .@{__multi-select-prefix-cls}-selection__placeholder {
+    .@{__multiSelectPrefixCls}-selection__placeholder {
       color: @normal-alpha-4;
     }
   }
@@ -137,18 +134,18 @@
   }
 
   &-open {
-    .@{__multi-select-prefix-cls}-arrow {
+    .@{__multiSelectPrefixCls}-arrow {
       &:before {
         content: '\e613';
       }
     }
-    .@{__multi-select-prefix-cls}-selection {
+    .@{__multiSelectPrefixCls}-selection {
       border-color: @border-hover-color;
     }
   }
 
 }
-.@{__multi-select-prefix-cls}-mask {
+.@{__multiSelectPrefixCls}-mask {
   position: fixed;
   width: 100%;
   height: 100%;
@@ -164,7 +161,7 @@
     display: block;
   }
 }
-.@{__multi-select-prefix-cls}-dropdown {
+.@{__multiSelectPrefixCls}-dropdown {
 
   background: white;
   box-shadow: @box-shadow-1;
@@ -200,14 +197,14 @@
 
 
 }
-.@{__multi-select-prefix-cls}-content {
+.@{__multiSelectPrefixCls}-content {
   overflow-y: auto;
   width: 330px;
   max-height: 160px;
   padding: 12px;
   background-color: #fff;
 }
-.@{__multi-select-prefix-cls}-footer {
+.@{__multiSelectPrefixCls}-footer {
 
   padding: 16px 12px 0;
   border-top: 1px solid @split-line-color;
@@ -216,23 +213,23 @@
   &-hidden {
     display: none;
   }
-  .@{__multi-select-prefix-cls}-button-group {
+  .@{__multiSelectPrefixCls}-button-group {
     position: absolute;
     right: 12px;
     top: 11px;
   }
-  .@{__multi-select-prefix-cls}-button {
+  .@{__multiSelectPrefixCls}-button {
     &-hidden {
       display: none;
     }
     &-clear {
       margin-right: 8px;
     }
   }
-  .@{__multi-select-prefix-cls}-select-all {
+  .@{__multiSelectPrefixCls}-select-all {
     cursor: pointer;
   }
-  .@{__multi-select-prefix-cls}-select-all-checkbox {
+  .@{__multiSelectPrefixCls}-select-all-checkbox {
     .kuma-checkbox + s,
     .half-checked{
       margin-right: 8px;
@@ -248,22 +245,22 @@
   } 
 }
 
-.@{__multi-select-prefix-cls}-middle {
-  line-height: @__multi-select-trigger-height-middle;
-  height: @__multi-select-trigger-height-middle;
+.@{__multiSelectPrefixCls}-middle {
+  line-height: @trigger-height-middle;
+  height: @trigger-height-middle;
 
-  .@{__multi-select-prefix-cls}-selection--multiple {
-    height: @__multi-select-trigger-height-middle;
-    line-height: @__multi-select-trigger-height-middle - 2;
+  .@{__multiSelectPrefixCls}-selection--multiple {
+    height: @trigger-height-middle;
+    line-height: @trigger-height-middle - 2;
   }
 }
 
-.@{__multi-select-prefix-cls}-small {
-  line-height: @__multi-select-trigger-height-small;
-  height: @__multi-select-trigger-height-small;
+.@{__multiSelectPrefixCls}-small {
+  line-height: @trigger-height-small;
+  height: @trigger-height-small;
 
-  .@{__multi-select-prefix-cls}-selection--multiple {
-    height: @__multi-select-trigger-height-small;
-    line-height: @__multi-select-trigger-height-small - 2;
+  .@{__multiSelectPrefixCls}-selection--multiple {
+    height: @trigger-height-small;
+    line-height: @trigger-height-small - 2;
   }
 }
diff --git a/style/index.js b/style/index.js
@@ -0,0 +1,4 @@
+import '../src/MultiSelect.less';
+import 'uxcore-button/style';
+import 'uxcore-checkbox-group/style';
+import 'uxcore-dropdown/style';
diff --git a/webpack.custom.js b/webpack.custom.js
@@ -0,0 +1,19 @@
+const modifyVars = require('kuma-base/jsvars/orange');
+
+/* eslint-disable no-param-reassign */
+module.exports = (config) => {
+  config.module.rules.forEach((rule) => {
+    if (rule.test.toString() === /\.less$/.toString()) {
+      rule.use = [
+        'style-loader',
+        'css-loader',
+        {
+          loader: 'less-loader',
+          options: {
+            modifyVars,
+          },
+        },
+      ];
+    }
+  });
+};