diff --git a/compiler/test/ut/decorator/styles.ts b/compiler/test/ut/decorator/styles.ts
new file mode 100644
index 0000000000000000000000000000000000000000..35168bea85bd0f7ab451eedf8a603cec291911a5
--- /dev/null
+++ b/compiler/test/ut/decorator/styles.ts
@@ -0,0 +1,142 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+exports.source = `
+@Styles function globalStyle() {
+  .width(100)
+  .height(100)
+  .backgroundColor("red")
+}
+
+@Entry
+@Component
+struct HomeComponent {
+  private value1: string = "hello world 1"
+  private value2: string = "hello world 2"
+  private value3: string = "hello world 3"
+  @Styles innerStyle() {
+    .width(50)
+    .height(50)
+    .backgroundColor("blue")
+  }
+
+  build() {
+    Column() {
+      Row() {
+        Text(this.value1)
+        .globalStyle()
+        Text(this.value2)
+        .innerStyle()
+        Text(this.value3)
+      }
+      Row() {
+        Button() {
+          Text(this.value1)
+            .fontSize(20)
+        }
+        .stateStyles({
+          normal: {
+            .width(80)
+            .height(80)
+            .backgroundColor("green")
+          },
+          clicked: globalStyle,
+          disabled: this.innerStyle
+        })
+        .width(100)
+        .height(20)
+        Text(this.value2)
+          .fontSize(100)
+        Text(this.value3)
+      }
+      .width(20)
+    }
+    .height(500)
+  }
+}`
+
+exports.expectResult =
+`class HomeComponent extends View {
+    constructor(compilerAssignedUniqueChildId, parent, params) {
+        super(compilerAssignedUniqueChildId, parent);
+        this.value1 = "hello world 1";
+        this.value2 = "hello world 2";
+        this.value3 = "hello world 3";
+        this.updateWithValueParams(params);
+    }
+    updateWithValueParams(params) {
+        if (params.value1 !== undefined) {
+            this.value1 = params.value1;
+        }
+        if (params.value2 !== undefined) {
+            this.value2 = params.value2;
+        }
+        if (params.value3 !== undefined) {
+            this.value3 = params.value3;
+        }
+    }
+    aboutToBeDeleted() {
+        SubscriberManager.Get().delete(this.id());
+    }
+    render() {
+        Column.create();
+        Column.height(500);
+        Row.create();
+        Text.create(this.value1);
+        Text.width(100);
+        Text.height(100);
+        Text.backgroundColor("red");
+        Text.pop();
+        Text.create(this.value2);
+        Text.width(50);
+        Text.height(50);
+        Text.backgroundColor("blue");
+        Text.pop();
+        Text.create(this.value3);
+        Text.pop();
+        Row.pop();
+        Row.create();
+        Row.width(20);
+        Button.createWithChild();
+        ViewStackProcessor.visualState("normal");
+        Button.width(80);
+        Button.height(80);
+        Button.backgroundColor("green");
+        ViewStackProcessor.visualState("clicked");
+        Button.width(100);
+        Button.height(100);
+        Button.backgroundColor("red");
+        ViewStackProcessor.visualState("disabled");
+        Button.width(50);
+        Button.height(50);
+        Button.backgroundColor("blue");
+        ViewStackProcessor.visualState();
+        Button.width(100);
+        Button.height(20);
+        Text.create(this.value1);
+        Text.fontSize(20);
+        Text.pop();
+        Button.pop();
+        Text.create(this.value2);
+        Text.fontSize(100);
+        Text.pop();
+        Text.create(this.value3);
+        Text.pop();
+        Row.pop();
+        Column.pop();
+    }
+}
+loadDocument(new HomeComponent("1", undefined, {}));
+`
diff --git a/compiler/test/ut/syntacticSugar/$$.ts b/compiler/test/ut/syntacticSugar/$$.ts
new file mode 100644
index 0000000000000000000000000000000000000000..22a231acbaedb8a7be2ffa8a48332bd26f379cdf
--- /dev/null
+++ b/compiler/test/ut/syntacticSugar/$$.ts
@@ -0,0 +1,117 @@
+/*
+ * Copyright (c) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+exports.source = `
+const value5: boolean[] = [true, false]
+let value6: {item1: boolean} = {item1: true}
+
+@Entry
+@Component
+struct HomeComponent {
+  private value1: string = "hello world 1"
+  private value2: string = "hello world 2"
+  private value3: string = "hello world 3"
+  private value4: boolean = false
+
+  build() {
+    Column() {
+      Row() {
+        Text(this.value1)
+        Text(this.value2)
+        Text(this.value3)
+      }
+      Row() {
+        Button() {
+          Text(this.value1)
+            .fontSize(20)
+            .bindPopup($$value5[0], {message: "This is $$ for Array"})
+        }
+        .bindPopup($$value4, {message: "This is $$ for regular"})
+        .width(100)
+        .height(20)
+        Text(this.value2)
+          .fontSize(100)
+          .bindPopup($$value6.item1, {message: "This is $$ for Obj"})
+        Text(this.value3)
+      }
+      .width(20)
+    }
+    .height(500)
+  }
+}`
+
+exports.expectResult =
+`const value5 = [true, false];
+let value6 = { item1: true };
+class HomeComponent extends View {
+    constructor(compilerAssignedUniqueChildId, parent, params) {
+        super(compilerAssignedUniqueChildId, parent);
+        this.value1 = "hello world 1";
+        this.value2 = "hello world 2";
+        this.value3 = "hello world 3";
+        this.value4 = false;
+        this.updateWithValueParams(params);
+    }
+    updateWithValueParams(params) {
+        if (params.value1 !== undefined) {
+            this.value1 = params.value1;
+        }
+        if (params.value2 !== undefined) {
+            this.value2 = params.value2;
+        }
+        if (params.value3 !== undefined) {
+            this.value3 = params.value3;
+        }
+        if (params.value4 !== undefined) {
+            this.value4 = params.value4;
+        }
+    }
+    aboutToBeDeleted() {
+        SubscriberManager.Get().delete(this.id());
+    }
+    render() {
+        Column.create();
+        Column.height(500);
+        Row.create();
+        Text.create(this.value1);
+        Text.pop();
+        Text.create(this.value2);
+        Text.pop();
+        Text.create(this.value3);
+        Text.pop();
+        Row.pop();
+        Row.create();
+        Row.width(20);
+        Button.createWithChild();
+        Button.bindPopup({ value: value4, changeEvent: newValue => { value4 = newValue; } }, { message: "This is $$ for regular" });
+        Button.width(100);
+        Button.height(20);
+        Text.create(this.value1);
+        Text.fontSize(20);
+        Text.bindPopup({ value: value5[0], changeEvent: newValue => { value5[0] = newValue; } }, { message: "This is $$ for Array" });
+        Text.pop();
+        Button.pop();
+        Text.create(this.value2);
+        Text.fontSize(100);
+        Text.bindPopup({ value: value6.item1, changeEvent: newValue => { value6.item1 = newValue; } }, { message: "This is $$ for Obj" });
+        Text.pop();
+        Text.create(this.value3);
+        Text.pop();
+        Row.pop();
+        Column.pop();
+    }
+}
+loadDocument(new HomeComponent("1", undefined, {}));
+`