chore: Revamp buildstep to support porting to typescript

package.json

@@ -20,22 +20,29 @@
     "@babel/core": "^7.13.15",
     "@babel/register": "^7.13.14",
     "@rollup/plugin-commonjs": "^18.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^11.2.1",
+    "@rollup/plugin-typescript": "^8.2.1",
     "@semantic-release/github": "^7.2.1",
     "@semantic-release/npm": "^7.1.1",
     "@size-limit/file": "^4.10.2",
     "@size-limit/time": "^4.10.2",
     "ava": "^3.15.0",
     "husky": "^4.3.0",
+    "postcss": "^8.2.10",
+    "postcss-preset-env": "^6.7.0",
     "prettier": "^2.2.1",
     "pretty-quick": "^3.1.0",
     "rollup": "^2.45.2",
-    "rollup-plugin-filesize": "^9.1.1",
-    "rollup-plugin-json": "^4.0.0",
+    "rollup-plugin-inject-process-env": "^1.3.1",
     "rollup-plugin-minify-html-literals": "^1.2.6",
-    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-postcss": "^4.0.0",
+    "rollup-plugin-postcss-lit": "^1.0.1",
     "rollup-plugin-terser": "^7.0.2",
     "semantic-release": "^17.4.2",
-    "size-limit": "^4.10.2"
+    "size-limit": "^4.10.2",
+    "tslib": "^2.2.0",
+    "typescript": "^4.2.4"
   },
   "husky": {
     "hooks": {

rollup.config.js

@@ -1,9 +1,42 @@
-import resolve from "rollup-plugin-node-resolve";
+import resolve from "@rollup/plugin-node-resolve";
+import typescript from "@rollup/plugin-typescript";
+import json from "@rollup/plugin-json";
 import { terser } from "rollup-plugin-terser";
-import filesize from "rollup-plugin-filesize";
 import commonjs from "@rollup/plugin-commonjs";
 import minifyHTML from "rollup-plugin-minify-html-literals";
-import json from "rollup-plugin-json";
+import postCSS from "rollup-plugin-postcss";
+import postCSSLit from "rollup-plugin-postcss-lit";
+import postCSSPresetEnv from "postcss-preset-env";
+import inject from "rollup-plugin-inject-process-env";
+
+const shared = (DEBUG) => [
+  resolve({
+    browser: true,
+  }),
+  commonjs(),
+  json(),
+  inject(
+    {
+      DEBUG,
+    },
+    { exclude: "**/*.css" }
+  ),
+  typescript(),
+  postCSS({
+    plugins: [
+      postCSSPresetEnv({
+        stage: 1,
+        features: {
+          "nesting-rules": true,
+          "custom-media-query": true,
+        },
+      }),
+    ],
+    inject: true,
+    extract: false,
+  }),
+  postCSSLit(),
+];
 
 export default {
   input: "src/index.js",
@@ -12,5 +45,18 @@ export default {
     format: "umd",
     name: "BannerCard",
   },
-  plugins: [resolve(), json(), commonjs(), minifyHTML(), terser(), filesize()],
+  plugins: [
+    ...shared(false),
+    minifyHTML({
+      options: {
+        shouldMinifyCSS: () => false,
+        minifyCSS: false,
+      },
+    }),
+    terser({
+      output: {
+        comments: false,
+      },
+    }),
+  ],
 };

src/index.js

@@ -4,18 +4,7 @@ import { parseEntity, getAttributeOrState, readableColor } from "./utils";
 import filterEntity from "./filterEntity";
 import { name, version } from "../package.json";
 
-function printVersion(version) {
-  console.info(`%c${name}: ${version}`, "font-weight: bold");
-}
-
-printVersion(version);
-
-//
-// type: custom:banner
-// heading: 🛋 Living room
-// background: #999
-// entities:
-//   - entity: light.fibaro_system_fgd212_dimmer_2_level
+console.info(`%c${name}: ${version}`, "font-weight: bold");
 
 const ICON_REGEXP = /^(mdi|hass):/;
 function isIcon(value) {

src/typings/css.d.ts

@@ -0,0 +1 @@
+declare module "*.css";

src/typings/json.d.ts

@@ -0,0 +1 @@
+declare module "*.json";

tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "allowJs": true,
+    "target": "es2017",
+    "declaration": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": false,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "types": ["node"],
+    "typeRoots": ["./node_modules/@types", "./typings"]
+  },
+  "include": ["./src"]
+}