fix(address): 构建单一样式文件 (#3220)

Author: oasis-cloud

scripts/build-taro.mjs

@@ -428,6 +428,12 @@ async function buildCSS(themeName = '') {
       join(`${dist}/cjs`, cssPath, `${themeDir}/css.js`),
       cssContent.join('\n'),
     )
+    // copy harmonycss
+    if (file.indexOf('countup') === -1) {
+      const harmonyCss = join(__dirname, '../', file.replace('scss', 'harmony.css'))
+      await copy(harmonyCss, join(`${dist}/cjs`, cssPath, 'style/style.harmony.css'))
+      await copy(harmonyCss, join(`${dist}/es`, cssPath, 'style/style.harmony.css'))
+    }
   }
 }
 

scripts/replace-css-var.js

@@ -42,17 +42,36 @@ components.forEach((component) => {
     `../src/packages/${componentName}/${componentName}.harmony.css`,
   )
   const matched = content.match(/@import.*?[;][\n\r]?/gi)
+  const componentSplitScss = []
   if (matched) {
     matched.forEach((m) => {
       if (m.indexOf('styles') > -1) {
         content = content.replace(m, mixin)
       } else {
-        content = content.replace(m, '')
+        // 相对路径是 ../ 是组件，所以剔除
+        if (m.indexOf("'./") === - 1) {
+          content = content.replace(m, '')
+        } else {
+          // 组件内的样式拆分
+          content = content.replace(m, '')
+          const splitScssName = m.match(/\'\.\/([a-z]+)\.scss/)
+          if (splitScssName && splitScssName.length == 2) {
+            componentSplitScss.push(fs
+              .readFileSync(
+                path.join(
+                  __dirname,
+                  `../src/packages/${componentName}/${splitScssName[1]}.scss`,
+                ),
+              )
+              .toString())
+          }
+
+        }
       }
     })
   }
 
-  const res = sass.compileString(theme + variables + content)
+  const res = sass.compileString(theme + variables + componentSplitScss.join('\n') + content)
   postcss([
     cssvariables(/*options*/),
   ])

src/packages/address/address.scss

@@ -1,4 +1,4 @@
-@import './elevator.scss';
+@import '../elevator/elevator.scss';
 @import '../cascader/cascader.scss';
 
 .nut-address {
@@ -47,6 +47,120 @@
   }
 }
 
+.nut-address {
+  &-title {
+    font-size: 14px;
+    font-weight: 500;
+    padding: 16px 16px 12px 16px;
+  }
+  &-hotlist {
+    padding: 0 16px;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: flex-start;
+    &-item {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 63px;
+      height: 28px;
+      font-size: 12px;
+      border-radius: 4px;
+      margin-bottom: 7px;
+      /* #ifdef harmony*/
+      margin-right: 6px;
+      /* #endif */
+      /* #ifndef harmony*/
+      margin-right: 7px;
+      /* #endif */
+      background-color: $color-background-sunken;
+      color: $color-title;
+      &:nth-child(5n) {
+        margin-right: 0;
+      }
+    }
+
+    &.hotlist-more {
+      .nut-address-hotlist-item {
+        width: auto;
+        padding: 0 16px;
+        margin-right: 7px;
+      }
+    }
+  }
+
+  &-selected {
+    width: 100%;
+    height: 60px;
+    padding: 0 16px;
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid $color-border;
+    &-item {
+      font-size: 12px;
+      display: inline-block;
+      height: 28px;
+      line-height: 28px;
+      padding: 0 12px;
+      border-radius: 4px;
+      background-color: $color-background-sunken;
+
+      &.active {
+        border: 1px solid $color-primary;
+        background-color: $color-primary-light-pressed;
+        color: $color-primary;
+      }
+    }
+    &-border {
+      margin: 0 2px;
+      color: $color-text-disabled;
+    }
+  }
+
+  &-elevator {
+    margin-top: 0;
+    .nut-elevator-list {
+      &-item {
+        position: relative;
+        padding-left: 20px;
+      }
+      &-item-code {
+        display: inline;
+        position: absolute;
+        left: 0;
+        top: 0;
+        height: 30px;
+        line-height: 30px;
+        border-bottom: 0;
+        color: $color-text-help;
+        font-weight: 500;
+      }
+    }
+    .nut-elevator-bars {
+      top: 40%;
+      padding: 0;
+      background: none;
+
+      &-inner-item {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 16px;
+        height: 16px;
+        font-size: 10px;
+        border-radius: 16px;
+        margin-bottom: 2px;
+        color: $color-text-help;
+        &-active {
+          background-color: $color-primary;
+          color: $color-background-overlay;
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+
 [dir='rtl'] .nut-address,
 .nut-rtl .nut-address {
   &-exist {