Added css function

Author: xdev1

package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-element",
-  "version": "0.0.213",
+  "version": "0.0.215",
   "description": "",
   "license": "LGPL-3.0",
   "main": "./index.js",

src/main/js-element.ts

@@ -1,7 +1,7 @@
 // === exports =======================================================
 
 // functions and singletons
-export { component, createCtx, elem, intercept, prop, setMethods, Attrs }
+export { component, createCtx, css, elem, intercept, prop, setMethods, Attrs }
 
 // types
 export { Ctx, Ctrl, MethodsOf }
@@ -435,6 +435,30 @@ function addPropHandling(obj: any) {
   })
 }
 
+// === css ===========================================================
+
+function css(strings: TemplateStringsArray, data?: any[]): string {
+  const tokens: string[] = []
+
+  if (!data) {
+    return strings[0]
+  }
+
+  for (let i = 0; i < strings.length; ++i) {
+    tokens.push(stringify(strings[i]))
+
+    if (i < data.length - 1) {
+      tokens.push(stringify(data[i]))
+    }
+  }
+  console.log(tokens.join(''))
+  return tokens.join('')
+}
+
+function stringify(val: any): string {
+  return val == null ? '' : String(val)
+}
+
 // === Attrs =========================================================
 
 const Attrs = {

src/stories/demos/counter-demo.ts

@@ -1,4 +1,4 @@
-import { component, elem, prop, setMethods, Attrs } from 'js-element'
+import { component, css, elem, prop, setMethods, Attrs } from 'js-element'
 import { useState } from 'js-element/hooks'
 import { createRef, html, lit, ref } from 'js-element/lit'
 
@@ -64,7 +64,7 @@ function counterDemo() {
   `
 }
 
-const styles = `
+const styles = css`
   * {
     font-family: Helvetica, Arial, sans-serif;
   }