egoist / tailwindcss-icons

Use any icon (100,000+) from Iconify, for TailwindCSS
MIT License
830 stars 17 forks source link

Can you consider using it with Play CDN? #11

Open u3u opened 1 year ago

u3u commented 1 year ago

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()