feat: build constructed stylesheet along side css file

packages/css/package.json

@@ -3,28 +3,39 @@
   "version": "1.1.0",
   "description": "Fabric CSS core components and utilities",
   "files": [
-    "dist"
+    "dist/npm"
   ],
-  "style": "dist/fabric.min.css",
+  "main": "./dist/npm/fabric.min.js",
+  "exports": {
+    ".": "./dist/npm/fabric.min.js",
+    "./fabric.min.js": "./dist/npm/fabric.min.js",
+    "./fabric.min.css": "./dist/npm/fabric.min.css"
+  },
+  "style": "dist/npm/fabric.min.css",
   "scripts": {
     "preversion": "eik login",
     "prepublish": "yarn build",
     "postpublish": "eik publish && eik package-alias @fabric-ds/css",
-    "build": "NODE_ENV=production postcss src/fabric.css --o dist/fabric.min.css",
-    "postbuild": "./scripts/replaceTailwindVariables.mjs"
+    "build": "yarn build:css && yarn build:replace && yarn build:js && yarn build:eik",
+    "build:css": "NODE_ENV=production postcss src/fabric.css --o dist/npm/fabric.min.css",
+    "build:replace": "./scripts/replaceTailwindVariables.mjs",
+    "build:js": "./scripts/constructedStylesheet.mjs",
+    "build:eik": "node ./scripts/esbuild.mjs && cp ./dist/npm/fabric.min.css ./dist/eik/fabric.min.css"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "license": "MIT",
   "devDependencies": {
+    "@eik/esbuild-plugin": "^1.1.6",
     "@fabric-ds/icons": "^0.3.8",
-    "@fabric-ds/tailwind-config": "^0.5.31"
+    "@fabric-ds/tailwind-config": "^0.5.31",
+    "lit": "^2.2.0"
   },
   "eik": {
     "server": "https://assets.finn.no",
-    "files": "dist"
+    "files": "dist/eik"
   },
   "gitHead": "7b7391f45aa2c2256f0ca89ff2d5133ec34bda9c"
 }

packages/css/scripts/constructedStylesheet.mjs

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+
+import fs from 'fs';
+
+const input = new URL('../dist/npm/fabric.min.css', import.meta.url);
+const output = new URL('../dist/npm/fabric.min.js', import.meta.url);
+
+const styles = fs.readFileSync(input.pathname, 'utf8');
+fs.writeFileSync(output.pathname, `import { css } from 'lit';export default css\`${styles}\``);

packages/css/scripts/esbuild.mjs

@@ -0,0 +1,14 @@
+import * as eik from '@eik/esbuild-plugin';
+import esbuild from 'esbuild';
+
+await eik.load();
+
+await esbuild.build({
+    entryPoints: ['./dist/npm/fabric.min.js'],
+    bundle: true,
+    minify: true,
+    format: 'esm',
+    outfile: './dist/eik/fabric.min.js',
+    target: ['es2017'],
+    plugins: [eik.plugin()],
+})

scripts/reportSizes.mjs

@@ -11,7 +11,7 @@ import glob from 'glob';
 import prettyBytes from 'pretty-bytes';
 import path from 'path';
 
-glob('packages/*/dist/*.css', { absolute: true }, async (er, files) => {
+glob('packages/*/dist/**/*.{css,js}', { absolute: true }, async (er, files) => {
     console.log('\n');
     await Promise.all(files.map(report));
 });