@live-codes/browser-compilers 0.6.3 → 0.6.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-codes/browser-compilers",
-  "version": "0.6.3",
+  "version": "0.6.4",
   "description": "Compilers that run in the browser, for use in livecodes.io",
   "author": "Hatem Hosny",
   "license": "MIT",
@@ -64,6 +64,8 @@
     "postcss": "8.4.6",
     "postcss-modules": "6.0.0",
     "postcss-preset-env": "7.3.1",
+    "posthtml": "0.16.6",
+    "posthtml-css-modules": "0.1.3",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native-web": "0.19.1",

package/vendor_modules/imports/postcss-modules.js

@@ -1,3 +1,44 @@
 import postcssModules from 'postcss-modules';
+import posthtml from 'posthtml';
+import posthtmlCSSModules from 'posthtml-css-modules';
 
-export { postcssModules };
+// based on https://github.com/posthtml/posthtml-class-to-css-module
+const cloneClasses = (options = {}) => (tree) =>
+  tree.match({ attrs: { class: /.+/ } }, (node) => {
+    const className =
+      typeof options.cssModules === 'object'
+        ? node.attrs.class
+            .split(' ')
+            .filter(
+              (name) =>
+                Object.keys(options.cssModules).includes(name) && options.cssModules[name] !== name,
+            )
+            .join(' ')
+        : node.attrs.class;
+
+    if (className.trim()) {
+      node.attrs = Object.assign(node.attrs, { 'css-module': className });
+    }
+
+    if (options.removeOriginalClasses) {
+      delete node.attrs.class;
+    }
+
+    return node;
+  });
+
+/**
+ *
+ * @param {string} html
+ * @param {Record<String, any>} cssModules
+ * @param {boolean} removeOriginalClasses
+ * @returns {string}
+ */
+const addClassesToHtml = (html, cssModules, removeOriginalClasses = false) =>
+  posthtml()
+    // @ts-ignore
+    .use(cloneClasses({ cssModules, removeOriginalClasses }), posthtmlCSSModules(cssModules))
+    // @ts-ignore
+    .process(html, { sync: true }).html;
+
+export { postcssModules, addClassesToHtml };