chore: inject css to components

.gitignore

@@ -1,6 +1,7 @@
 .yarn
 .vscode
 node_modules
+dist
 #!.yarn/patches
 #!.yarn/plugins
 #!.yarn/releases

package.json

@@ -4,7 +4,8 @@
   "private": true,
   "scripts": {
     "new:component": "tsx tooling/code-gen/bin.ts",
-    "cdn:manifest": "tsx tooling/cdn/bin.ts"
+    "cdn:manifest": "tsx tooling/cdn/bin.ts",
+    "build": "webpack"
   },
   "devDependencies": {
     "@types/inquirer": "^9.0.7",
@@ -16,7 +17,11 @@
     "tsx": "^4.7.1",
     "turbo": "^1.12.4",
     "typescript": "latest",
-    "typescript-plugin-css-modules": "^5.1.0"
+    "webpack": "^5.91.0",
+    "ts-loader": "^9.5.1",
+    "style-loader": "^4.0.0",
+    "css-loader": "^7.1.2",
+    "webpack-cli": "^5.1.4"
   },
   "workspaces": [
     "packages/*"

packages/combined-menu-control/index.ts

@@ -1,5 +1,6 @@
 import { install } from "../../shared/install"
 import { type Player } from "@flowplayer/player"
+import "./index.css"
 import { type FlowplayerMenu, MenuDialog } from "./menuDialog"
 
 export default class CombinedMenuControl extends HTMLElement{

packages/live-ui/index.ts

@@ -1,5 +1,6 @@
 import { install } from "../../shared/install"
 import { type Player } from "@flowplayer/player"
+import "./index.css"
 import {BEFORE_PLAY, CLICK, CONFIG, DBL_CLICK, SOURCE, TOUCH_END} from "@flowplayer/player/core/events"
 
 type SingletonTimer =

packages/vertical-volume-bar/index.ts

@@ -1,5 +1,6 @@
 import { install } from "../../shared/install"
 import { type Player } from "@flowplayer/player"
+import "./index.css"
 import {CLICK, VOLUME_CHANGE} from "@flowplayer/player/core/events"
 import support from "../utils"
 import { SliderStates, makeSlider } from "./slider"

tooling/code-gen/bin.ts

@@ -12,5 +12,6 @@ import fs from "fs/promises"
   await fs.mkdir(root)
   await fs.writeFile(path.join(root, "package.json"), pkg)
   await fs.writeFile(path.join(root, "index.ts"), code)
+  await fs.writeFile(path.join(root, "index.css"), "")
   console.log(`🌱 created %s`, answers.newComponentHTMLName)
 }())

tooling/code-gen/templates/component.eta

@@ -1,5 +1,6 @@
 import { install } from "../../shared/install"
 import { type Player } from "@flowplayer/player"
+import "./index.css"
 
 export default class <%~ it.newComponentClassName %> extends HTMLElement {
   constructor (player: Player) {

tsconfig.json

@@ -23,7 +23,6 @@
     // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
     // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
-    "plugins": [{ "name": "typescript-plugin-css-modules" }],
     /* Modules */
     "module": "commonjs",                                /* Specify what module code is generated. */
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */

webpack.config.js

@@ -0,0 +1,38 @@
+const fs = require('fs');
+const path = require('path');
+
+function getEntries(dir) {
+  return Object.assign.apply({},
+    fs.readdirSync(dir, {
+      withFileTypes: true
+    })
+    .filter(dirent => dirent.isDirectory())
+    .map(dirent => ({
+      [`${dirent.name}`]: `${dir}/${dirent.name}/index.ts`
+    }))
+  )
+}
+
+module.exports = {
+  mode: "production",
+  entry: getEntries("./packages"),
+  resolve: {
+    extensions: ['.ts', '.js']
+  },
+  module: {
+    rules: [{
+        test: /\.css$/i,
+        use: ["style-loader", "css-loader"],
+      },
+      {
+        test: /\.ts?$/,
+        use: 'ts-loader',
+      },
+    ],
+  },
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    clean: true,
+    filename: '[name].js',
+  },
+};