chore: update preact-css snake example

packages/preact-css/examples/snake/package.json

@@ -42,11 +42,7 @@
     "less-loader": "^5.0.0",
     "mini-css-extract-plugin": "^0.5.0",
     "object-assign": "4.1.1",
-    "omi": "latest",
-    "omi-router": "latest",
-    "omio": "latest",
-    "omis": "^2.0.3",
-    "omiu": "latest",
+    "omis": "^2.0.4",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "postcss-flexbugs-fixes": "3.2.0",
     "postcss-loader": "2.0.8",
@@ -55,7 +51,6 @@
     "promise": "8.0.1",
     "raf": "3.4.0",
     "react-dev-utils": "^7.0.1",
-    "reomi": "latest",
     "resolve": "1.6.0",
     "style-loader": "0.19.0",
     "sw-precache-webpack-plugin": "^0.11.5",

packages/preact-css/examples/snake/public/index.html

@@ -26,8 +26,9 @@
       You need to enable JavaScript to run this app.
     </noscript>
     <div id="root"></div>
-    <div id="root2"></div>
-    <div id="root3"></div>
+    <a href="https://github.com/Tencent/omi/tree/master/packages/preact-css/examples/snake" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;">
+      <img src="//alloyteam.github.io/github.png" alt="">
+    </a>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.

packages/preact-css/examples/snake/src/components/game/index.js

@@ -1,7 +1,6 @@
 import * as Preact from 'preact'
 import { $ } from 'omis'
-
-require('../../utils/css').add(require('./_index.css'))
+import { rpx } from '../../utils/css'
 
 export default $({
   render() {
@@ -19,6 +18,7 @@ export default $({
       })}
     </div>
   },
+  css: rpx(require('./_index.css')),
   use: ['map']
 })
 

packages/preact-css/examples/snake/src/components/index/_index.css

@@ -22,7 +22,7 @@
 
 h1{
   text-align: center;
-  font-size: 25px;
+  font-size: 15px;
 }
 
 .ctrl {

packages/preact-css/examples/snake/src/components/index/index.js

@@ -3,7 +3,7 @@ import Game from '../game'
 
 import store from '../../stores/index'
 import { $ } from 'omis'
-require('../../utils/css').add(require('./_index.css'))
+import { rpx } from '../../utils/css'
 
 
 export default $({
@@ -11,7 +11,7 @@ export default $({
     const { store } = $
     const { paused } = store.data
     return <div className="container">
-      <h1>[P]REACT + OMIS SNAKE</h1>
+      <h1>Preact + Omis + Preact-CSS Snake Demo</h1>
 
       <Game></Game>
 
@@ -26,6 +26,7 @@ export default $({
       </div>
     </div>
   },
+  css: rpx(require('./_index.css')),
   useSelf: ['paused'],
   store
 })

packages/preact-css/examples/snake/src/index.js

@@ -1,4 +1,5 @@
 import * as Preact from 'preact'
+import './utils/preact-css'
 import Index from './components/index'
 import './assets/index.css'
 

packages/preact-css/examples/snake/src/utils/css.js

@@ -1,10 +1,4 @@
-export function add(css) {
-  const style = document.createElement('style')
-  style.textContent = rpx(css)
-  document.querySelector('head').appendChild(style)
-}
-
-function rpx(str) {
+export function rpx(str) {
   return str.replace(/([1-9]\d*|0)(\.\d*)*rpx/g, (a, b) => {
     return (window.innerWidth * Number(b)) / 750 + 'px'
   })

packages/preact-css/examples/snake/src/utils/preact-css/index.js

@@ -0,0 +1,32 @@
+import { options } from 'preact'
+import { getStyleId, appendStyle } from './style'
+
+let componentNode
+
+// store a reference to the "current component" vnode
+let oldDiff = options._diff || options.__b
+options._diff = options.__b = vnode => {
+  componentNode = vnode
+  if (oldDiff) oldDiff(vnode)
+}
+
+// reset component reference at end of diffing:
+let oldDiffed = options.diffed
+options.diffed = vnode => {
+  if (componentNode === vnode) componentNode = null
+  if (oldDiffed) oldDiffed(vnode)
+}
+
+// our vnode hook looks up the associated component
+let old = options.vnode
+options.vnode = vnode => {
+  const component = componentNode && (componentNode._component || componentNode.__c)
+  if (component) {
+    if(component.constructor.css){
+      const styleId = getStyleId(component.constructor)
+      appendStyle(component.constructor.css, styleId);
+      (vnode.props || (vnode.props = {}))[styleId] = ''
+    }
+  }
+  if (old) old(vnode)
+}

packages/preact-css/examples/snake/src/utils/preact-css/style.js

@@ -0,0 +1,86 @@
+
+let styleId = 0
+const styleList = []
+const cache = {}
+
+export function getStyleId(ctor) {
+  for (let i = 0, len = styleList.length; i < len; i++) {
+    let item = styleList[i]
+
+    if (item.ctor === ctor) {
+      return item.attrName
+    }
+  }
+
+  let attrName = '_ss' + styleId
+  styleList.push({ ctor, attrName })
+  styleId++
+
+  return attrName
+}
+
+// many thanks to https://github.com/thomaspark/scoper/
+export function scoper(css, prefix) {
+  prefix = '[' + prefix.toLowerCase() + ']'
+  // https://www.w3.org/TR/css-syntax-3/#lexical
+  css = css.replace(/\/\*[^*]*\*+([^/][^*]*\*+)*\//g, '')
+  // eslint-disable-next-line
+  let re = new RegExp('([^\r\n,{}:]+)(:[^\r\n,{}]+)?(,(?=[^{}]*{)|\s*{)', 'g')
+  /**
+   * Example:
+   *
+   * .classname::pesudo { color:red }
+   *
+   * g1 is normal selector `.classname`
+   * g2 is pesudo class or pesudo element
+   * g3 is the suffix
+   */
+  css = css.replace(re, (g0, g1, g2, g3) => {
+    if (typeof g2 === 'undefined') {
+      g2 = ''
+    }
+
+    /* eslint-ignore-next-line */
+    if (
+      g1.match(
+        /^\s*(@media|\d+%?|@-webkit-keyframes|@keyframes|to|from|@font-face)/
+      )
+    ) {
+      return g1 + g2 + g3
+    }
+
+    let appendClass = g1.replace(/(\s*)$/, '') + prefix + g2
+ 
+    return appendClass + g3
+  })
+
+  return css
+}
+
+export function addStyle(cssText, id) {
+  id = id.toLowerCase()
+  let ele = document.getElementById(id)
+  let head = document.getElementsByTagName('head')[0]
+  if (ele && ele.parentNode === head) {
+    head.removeChild(ele)
+  }
+
+  let someThingStyles = document.createElement('style')
+  head.appendChild(someThingStyles)
+  someThingStyles.setAttribute('type', 'text/css')
+  someThingStyles.setAttribute('id', id)
+  if (window.ActiveXObject) {
+    someThingStyles.styleSheet.cssText = cssText
+  } else {
+    someThingStyles.textContent = cssText
+  }
+}
+
+
+
+export function appendStyle(style, attr) {
+  if (!cache[attr]) {
+    addStyle(scoper(style, attr), attr)
+    cache[attr] = true
+  }
+}

packages/preact-css/package.json

@@ -2,7 +2,7 @@
   "name": "preact-css",
   "version": "0.1.0",
   "description": "Scoped css with pure css string for preact.",
-  "main": "index.js",
+  "main": "src/index.js",
   "directories": {
     "example": "examples"
   },
@@ -18,6 +18,9 @@
     "omi",
     "preact-css"
   ],
+  "files": [
+    "src"
+  ],
   "author": "dntzhang",
   "license": "MIT"
 }

packages/preact-css/src/index.js

@@ -23,9 +23,11 @@ options.vnode = vnode => {
   const component = componentNode && (componentNode._component || componentNode.__c)
   if (component) {
 
-    const styleId = getStyleId(component.constructor)
-    appendStyle(component.constructor.css, styleId);
-    (vnode.props || (vnode.props = {}))[styleId] = ''
+    if(component.constructor.css){
+      const styleId = getStyleId(component.constructor)
+      appendStyle(component.constructor.css, styleId);
+      (vnode.props || (vnode.props = {}))[styleId] = ''
+    }
   }
   if (old) old(vnode)
 }

packages/preact-css/src/style.js

@@ -21,7 +21,6 @@ export function getStyleId(ctor) {
 
 // many thanks to https://github.com/thomaspark/scoper/
 export function scoper(css, prefix) {
-  console.log(css, prefix)
   prefix = '[' + prefix.toLowerCase() + ']'
   // https://www.w3.org/TR/css-syntax-3/#lexical
   css = css.replace(/\/\*[^*]*\*+([^/][^*]*\*+)*\//g, '')