RFC: props 和 css 文件的关联

scripts/generate-nutui.js

@@ -15,12 +15,16 @@ const raws = []
 
 config.nav.map((item) => {
   item.packages.forEach((element) => {
-    let { name, show, exportEmpty, exclude } = element
+    let { name, show, exportEmpty, exclude, cssExperiment } = element
     if (exclude) return
     if (show || exportEmpty) {
       importStr += `import ${name} from '@/packages/${name.toLowerCase()}';\n`
       importStr += `export * from '@/packages/${name.toLowerCase()}';\n`
-      importScssStr += `import '@/packages/${name.toLowerCase()}/${name.toLowerCase()}.scss';\n`
+      if(cssExperiment) {
+        importScssStr += `import '@/packages/${name.toLowerCase()}/style/index.scss';\n`
+      } else {
+        importScssStr += `import '@/packages/${name.toLowerCase()}/${name.toLowerCase()}.scss';\n`
+      }
 
       packages.push(name)
     }

scripts/taro/generate-nutui-taro.js

@@ -13,14 +13,20 @@ const raws = []
 
 config.nav.map((item) => {
   item.packages.forEach((element) => {
-    let { name, show, type, taro, exportEmpty, exclude, rn } = element
+    let { name, show, type, taro, exportEmpty, exclude, rn, cssExperiment } = element
     if (exclude) return
 
     importStr += `import ${name} from '@/packages/${name.toLowerCase()}/index.taro'\n`
     importStr += `export * from '@/packages/${name.toLowerCase()}/index.taro'\n`
     importRNStr += `import ${name} from '@/packages/${name.toLowerCase()}/index.${rn?'rn':'taro'}'\n`
     importRNStr += `export * from '@/packages/${name.toLowerCase()}/index.${rn?'rn':'taro'}'\n`
-    importScssStr += `import '@/packages/${name.toLowerCase()}/${name.toLowerCase()}.scss'\n`
+
+    if(cssExperiment) {
+      importScssStr += `import '@/packages/${name.toLowerCase()}/style/index.scss';\n`
+    } else {
+      importScssStr += `import '@/packages/${name.toLowerCase()}/${name.toLowerCase()}.scss'\n`
+    }
+
     packages.push(name)
 
     glob

src/config.json

@@ -67,6 +67,7 @@
           "sort": 1,
           "show": true,
           "taro": true,
+          "cssExperiment": true,
           "author": ""
         },
         {

src/packages/button/style/block.scss

@@ -0,0 +1,4 @@
+.nut-button-block {
+  display: block;
+  width: 100%;
+}

src/packages/button/style/css.json

@@ -0,0 +1,16 @@
+{
+  "default": {
+    "type": "default",
+    "size": "normal",
+    "shape": "round",
+    "fill": "solid"
+  },
+  "properties": {
+    "type": 1,
+    "size": 1,
+    "shape": 1,
+    "loading": 1,
+    "disabled": 1,
+    "fill": 2
+  }
+}

src/packages/button/style/disabled.scss

@@ -0,0 +1,10 @@
+.nut-button-disabled {
+  opacity: 0.2;
+}
+
+.nut-button-disabled {
+  .nutui-ssxxx {
+    xxsdf {
+    }
+  }
+}

src/packages/button/style/fill-dashed.scss

@@ -0,0 +1,7 @@
+.nut-button-dashed {
+  color: currentColor;
+  border-width: 1px;
+  border-color: currentColor;
+  border-style: dashed;
+  background: transparent;
+}

src/packages/button/style/fill-none.scss

@@ -0,0 +1,7 @@
+.nut-button-none {
+  border-color: transparent;
+}
+
+taro-button-core:after {
+  border-color: transparent !important;
+}

src/packages/button/style/fill-outline.scss

@@ -0,0 +1,7 @@
+.nut-button-outline {
+  color: currentColor;
+  border-width: 1px;
+  border-color: currentColor;
+  border-style: solid;
+  background: transparent;
+}

src/packages/button/style/fill-solid.scss

@@ -0,0 +1,5 @@
+.nut-button-solid {
+  background: $button-primary-background-color;
+  color: $button-primary-color;
+  border-color: transparent;
+}

src/packages/button/style/fill.scss

@@ -0,0 +1,4 @@
+@import './fill-none.scss';
+@import './fill-dashed.scss';
+@import './fill-outline.scss';
+@import './fill-solid.scss';

src/packages/button/style/index.scss

@@ -0,0 +1,7 @@
+// index.scss 组件样式的入口文件，集合所有内容
+@import './layout.scss';
+@import './type.scss';
+@import './fill.scss';
+@import './size.scss';
+@import './block.scss';
+@import './disabled.scss';

src/packages/button/style/layout.scss

@@ -0,0 +1,69 @@
+// 组件的基础样式
+.nut-button {
+  position: relative;
+  display: inline-block;
+  width: auto;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  height: $button-default-height;
+  font-size: $button-default-font-size;
+  font-weight: $button-default-font-weight;
+  text-align: center;
+  cursor: pointer;
+  transition: $button-transition;
+  color: $button-default-color;
+  background: $button-default-background-color;
+  border-width: $button-border-width;
+
+  user-select: none;
+  touch-action: manipulation;
+  -webkit-appearance: none;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.nut-button-wrap {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+}
+
+.nut-button-text {
+  margin-left: $button-text-icon-margin;
+}
+
+.nut-button-text-right {
+  margin-right: $button-text-icon-margin;
+}
+
+.nut-button-children {
+  display: flex;
+  flex-direction: row;
+  background: transparent;
+}
+
+.nut-button::before {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 100%;
+  background-color: $color-mask;
+  border: inherit;
+  border-color: $color-mask;
+  border-radius: inherit;
+  transform: translate(-50%, -50%);
+  opacity: 0;
+  content: ' ';
+}
+
+.nut-button::after {
+  border: none;
+}
+
+.nut-button:active::before {
+  opacity: 0.1;
+}

src/packages/button/style/loading.scss

@@ -0,0 +1,4 @@
+.nut-button-loading {
+  cursor: default;
+  opacity: 0.9;
+}

src/packages/button/style/size-large.scss

@@ -0,0 +1,6 @@
+.nut-button-large {
+  height: $button-large-height;
+  padding: $button-large-padding;
+  font-size: $button-large-font-size;
+  font-weight: $button-large-font-weight;
+}

src/packages/button/style/size-mini.scss

@@ -0,0 +1,5 @@
+.nut-button-mini {
+  height: $button-mini-height;
+  padding: $button-mini-padding;
+  font-size: $button-mini-font-size;
+}

src/packages/button/style/size-normal.scss

@@ -0,0 +1,3 @@
+.nut-button-normal {
+  padding: $button-normal-padding;
+}

src/packages/button/style/size-small.scss

@@ -0,0 +1,5 @@
+.nut-button-small {
+  height: $button-small-height;
+  padding: $button-small-padding;
+  font-size: $button-small-font-size;
+}

src/packages/button/style/size-xlarge.scss

@@ -0,0 +1,6 @@
+.nut-button-xlarge {
+  height: $button-xlarge-height;
+  padding: $button-xlarge-padding;
+  font-size: $button-xlarge-font-size;
+  font-weight: $button-large-font-weight;
+}

src/packages/button/style/size.scss

@@ -0,0 +1,5 @@
+@import './size-mini.scss';
+@import './size-small.scss';
+@import './size-normal.scss';
+@import './size-large.scss';
+@import './size-xlarge.scss';

src/packages/button/style/type-danger.scss

@@ -0,0 +1,6 @@
+.nut-button-danger {
+  color: $button-danger-color;
+  border-color: transparent;
+  background-origin: border-box;
+  background: $button-danger-background-color;
+}

src/packages/button/style/type-default.scss

@@ -0,0 +1,6 @@
+// 组件属性和对应变体的文件
+
+.nut-button-default {
+  border-style: solid;
+  border-color: $button-default-border-color;
+}

src/packages/button/style/type-info.scss

@@ -0,0 +1,6 @@
+.nut-button-info {
+  color: $button-info-color;
+  background: $button-info-background-color;
+  background-origin: border-box;
+  border-color: transparent;
+}

src/packages/button/style/type-primary.scss

@@ -0,0 +1,6 @@
+.nut-button-primary {
+  color: $button-primary-color;
+  border-color: transparent;
+  background-origin: border-box;
+  background: $button-primary-background-color;
+}

src/packages/button/style/type-success.scss

@@ -0,0 +1,6 @@
+.nut-button-success {
+  color: $button-success-color;
+  border-color: transparent;
+  background-origin: border-box;
+  background: $button-success-background-color;
+}

src/packages/button/style/type-warning.scss

@@ -0,0 +1,6 @@
+.nut-button-warning {
+  color: $button-warning-color;
+  border-color: transparent;
+  background-origin: border-box;
+  background: $button-warning-background-color;
+}

src/packages/button/style/type.scss

@@ -0,0 +1,6 @@
+@import './type-default.scss';
+@import './type-primary.scss';
+@import './type-info.scss';
+@import './type-success.scss';
+@import './type-warning.scss';
+@import './type-danger.scss';