update readme

README.CN.md

@@ -229,6 +229,12 @@ import { render, WeElement, define } from 'omi'
 define('my-counter', class extends WeElement {
     static observe = true
     
+    css () {
+      return `span{
+        color: red;
+      }`
+    }
+
     data = {
       count: 1
     }
@@ -263,6 +269,11 @@ import { render, WeElement, define } from 'omi'
 define('my-counter', class extends WeElement {
   count = 1
 
+  //也可以直接传递字符串
+  css = `span{
+        color: red;
+      }`
+
   sub = () => {
     this.count--
     this.update()
@@ -432,12 +443,11 @@ define('hello-element', class extends WeElement {
     evt.stopPropagation()
   }
 
-  css() {
-    return `
-        div {
-          color: red;
-          cursor: pointer;
-        }`
+  css = `
+      div {
+        color: red;
+        cursor: pointer;
+      }`
   }
 
   render(props) {
@@ -468,11 +478,10 @@ define('my-app', class extends WeElement {
     this.update()
   }
 
-  css() {
-    return `
-         div{
-             color: green;
-         }`
+  css = `
+      div{
+          color: green;
+      }`
   }
 
   render(props, data) {
@@ -544,15 +553,10 @@ npm install --save-dev @babel/preset-react
 
 ``` js
 import { tag, WeElement render } from 'omi'
-//typeof cssStr is string
-import cssStr from './_index.css'
 
-@tag('my-app')
-class MyApp extends WeElement {
+define('my-app', class extends WeElement {
 
-  css() {
-    return cssStr
-  }
+  css = require('./_index.css')
   ...
   ...
   ...

README.md

@@ -211,6 +211,12 @@ define('my-counter', class extends WeElement {
       count: 1
     }
 
+    css () {
+      return `span{
+        color: red;
+      }`
+    }
+
     sub = () => {
       this.data.count--
     }
@@ -241,6 +247,11 @@ import { render, WeElement, define } from 'omi'
 define('my-counter', class extends WeElement {
   count = 1
 
+  //You can also pass strings directly
+  css = `span{
+        color: red;
+      }`
+
   sub = () => {
     this.count--
     this.update()
@@ -410,12 +421,11 @@ define('hello-element', class extends WeElement {
     evt.stopPropagation()
   }
 
-  css() {
-    return `
-        div {
-          color: red;
-          cursor: pointer;
-        }`
+ css = `
+      div {
+        color: red;
+        cursor: pointer;
+      }`
   }
 
   render(props) {
@@ -446,11 +456,10 @@ define('my-app', class extends WeElement {
     this.update()
   }
 
-  css() {
-    return `
-         div{
-             color: green;
-         }`
+  css = `
+      div{
+          color: green;
+      }`
   }
 
   render(props, data) {
@@ -521,18 +530,12 @@ For example, the following configuration:
 
 If your CSS file starts with "`_`", CSS will use `to-string-loader`., such as:
 
-```js
+``` js
 import { tag, WeElement render } from 'omi'
 
-// typeof cssStr is string
-import cssStr from './_index.css'
+define('my-app', class extends WeElement {
 
-@tag('my-app')
-class MyApp extends WeElement {
-
-  css() {
-    return cssStr
-  }
+  css = require('./_index.css')
   ...
   ...
   ...

packages/omi/examples/counter/main.js

@@ -5,6 +5,10 @@ class extends WeElement {
   data = {
     count: 1
   }
+  
+  css = `span{
+    color: red;
+  }`
 
   sub = () => {
     this.data.count--