filoxo / minideck

A simple MDX-powered deck.
4 stars 1 forks source link

Replace Prism for syntax highlighting #41

Closed filoxo closed 1 year ago

filoxo commented 2 years ago

I came across tree-sitter-highlight on twitter. I'd like to investigate using it while also still preserving the theme I created.

filoxo commented 2 years ago

Process so far:

So 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.

Solution

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.

filoxo commented 2 years ago

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