Closed filoxo closed 1 year ago
Process so far:
unist-util-visit
is an ES module, which requires Node 12+ and adding "type": "module"
in package.json
require
call to resolve external imports, which errors in current NodeSo Tailwind requires import directives
/* This is what I had */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* This is what I saw in this starter https://github.com/pikax/vite-tailwind-starter/blob/master/main.css */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
which causes Vite to process these through PostCSS, but uses a require
call to resolve the dep chunk:
if (needInlineImport) {
postcssPlugins.unshift((await Promise.resolve().then(function () { return require('./dep-e39b05d6.js'); }).then(function (n) { return n.index; })).default({
async resolve(id, basedir) {
const resolved = await atImportResolvers.css(id, path__default.join(basedir, '*'));
if (resolved) {
return path__default.resolve(resolved);
}
return id;
}
}));
}
and that causes the following error:
[vite:css] require() of ES Module minideck/postcss.config.js from minideck/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js not supported.
Instead change the require of postcss.config.js in minideck/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js to a dynamic import() which is available in all CommonJS modules.
file: minideck/index.css
error during build:
Error [ERR_REQUIRE_ESM]: require() of ES Module minideck/postcss.config.js from minideck/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js not supported.
Instead change the require of postcss.config.js in minideck/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js to a dynamic import() which is available in all CommonJS modules.
at Object.search (minideck/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:12587:37)
at async resolvePostcssConfig (minideck/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:20366:22)
at async compileCSS (minideck/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:20189:27)
at async Object.transform (minideck/node_modules/vite/dist/node/chunks/dep-e0fe87f8.js:19876:50)
at async ModuleLoader.addModuleSource (minideck/node_modules/rollup/dist/shared/rollup.js:22152:30)
error Command failed with exit code 1.
But the solution was to convert everything to esm, and load them in vite.config.js rather than autoloading; found on Stackoverflow here: https://stackoverflow.com/questions/66402879/in-vite2-how-to-import-an-esmodule-in-tailwind-config-js
NOTE: I wrote 95% of this up before stumbling upon the solution on SO, so I'm going to still add this comment for future me/posterity.
See feat/replace-prism for this implemented. My only hesitation is that tree-sitter-highlight only supports a few languages and doesn't yet allow for loading additional syntaxes. For this reason I won't be merging this PR (so as to support more languages).
If only supporting JS(X), TS(X), and CSS is acceptable, you can always degit using that branch.
npx degit filoxo/minideck#feat/replace-prism your-presentation-name
I came across tree-sitter-highlight on twitter. I'd like to investigate using it while also still preserving the theme I created.