Can you consider using it with Play CDN? #11
Description
My local development environment uses Play CDN to enhance the development experience, and I use the cjstoesm module to convert the tailwind.config.js configuration file into a native ESM to keep it the same as the production environment.
However, because the plugin uses the fs module, it will not work in the browser. If there is a way to be compatible that would be great!
/*
* [Package Error] [Package Error] "fs" does not exist. (Imported by "@egoist/tailwindcss-icons").
*
* The package "@egoist/tailwindcss-icons" depends on this Node.js built-in module.
* Node.js built-in modules (like "fs", "http", etc.) are Node.js-specific, and do
* not exist in non-Node environments like Deno or the web browser. Skypack CDN polyfills
* most of these modules for you automatically, but this one could not be polyfilled.
*
* How to fix:
* - Let the package author know that you'd like to run their package in the browser.
* - Use https://skypack.dev/ to find a web-friendly alternative to find another package.
*/Play CDN
<script src="https://cdn.tailwindcss.com"></script>
<script type="module">
import tailwindConfig from '/js/esm/tailwind.config.js';
tailwind.config = tailwindConfig;
</script>cjs-to-esm.js
const { transform } = require('cjstoesm')
const { writeFileSync } = require('fs')
const chalk = require('chalk').default
// https://esm.sh
// https://esm.run
// https://jspm.org
// https://cdn.skypack.dev
const esm = 'https://cdn.skypack.dev'
const importRegex = /import (.+) from "((?!\.).+)"/g
const run = async () => {
const result = await transform({
input: 'tailwind.config.js',
outDir: 'public/js/esm',
write: false,
})
for (const { fileName, text } of result.files) {
// https://regex101.com/r/Mv3nhR/1
const code = text.replaceAll(importRegex, `import $1 from "${esm}/$2"`)
writeFileSync(fileName, code)
console.log(`${chalk.green('✔')} ${fileName}`)
}
}
run()