@live-codes/browser-compilers 0.6.3 → 0.6.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@live-codes/browser-compilers",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "description": "Compilers that run in the browser, for use in livecodes.io",
   "author": "Hatem Hosny",
   "license": "MIT",
@@ -64,11 +64,14 @@
     "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",
     "remark-gfm": "3.0.1",
     "sass": "1.49.7",
+    "sucrase": "3.32.0",
     "svelte": "3.44.1",
     "windicss": "3.2.1"
   },

package/scripts/vendors.js

@@ -381,3 +381,11 @@ esbuild.build({
   globalName: 'flowRemoveTypes',
   plugins: nodePolyfills,
 });
+
+// sucrase
+esbuild.build({
+  ...baseOptions,
+  entryPoints: ['vendor_modules/imports/sucrase.js'],
+  outfile: 'dist/sucrase/sucrase.js',
+  globalName: 'sucrase',
+});

package/vendor-licenses.md

@@ -44,6 +44,14 @@ PostCSS: [MIT License](https://github.com/postcss/postcss/blob/af8311a9c4c940c3e
 
 PostCSS Preset Env: [CC0-1.0 License](https://github.com/csstools/postcss-preset-env/blob/d7652b1e6196e8f55bf3f0aac4ac090fec7ed54e/LICENSE.md)
 
+postcss-modules: [MIT License](https://github.com/madyankin/postcss-modules/blob/325f0b33f1b746eae7aa827504a5efd0949022ef/LICENSE)
+
+PostHTML: [MIT License](https://github.com/posthtml/posthtml/blob/9feb13c4c05c40519ba56279920aacd3523100cb/license)
+
+posthtml-class-to-css-module: [MIT License](https://github.com/posthtml/posthtml-class-to-css-module/blob/d53bd08c9aa375cde63d9fe86021ee887bc07b9b/license)
+
+posthtml-css-modules: [MIT License](https://github.com/posthtml/posthtml-css-modules/blob/47d2ffa908a9085265fe2a60ef608feed33ebdbd/LICENSE.txt)
+
 prelude<span>.ls</span>: [MIT License](https://github.com/gkz/prelude-ls/blob/41d048799bdd063e0592c1413d238ad95ceda1d9/LICENSE)
 
 Prettier Pug Plugin: [MIT License](https://github.com/prettier/plugin-pug/blob/27ab92b27a062bb187fc33f82b2fad436ec31c25/LICENSE)

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 };

package/vendor_modules/imports/sucrase.js

@@ -0,0 +1 @@
+export { transform } from 'sucrase';