parse-svelte.ts

import { readFile } from 'fs/promises';

import { parse, preprocess, walk } from 'svelte/compiler';

import autoprefixer from 'autoprefixer';
import type { AcceptedPlugin } from 'postcss';
import sveltePreprocess from 'svelte-preprocess';
import tailwind from 'tailwindcss';
import nesting from 'tailwindcss/nesting';

import { getProjectRoot } from '../get-project-root';

const opts = sveltePreprocess({
  postcss: {
    configFilePath: getProjectRoot() + '/postcss.config.js',
    plugins: [tailwind, nesting as AcceptedPlugin, autoprefixer],
  },
  typescript: {
    reportDiagnostics: false,
    tsconfigFile: false,
    compilerOptions: { module: 'es2015' },
  },
  globalStyle: true,
});

export async function parseSvelteComponent(filename: string) {
  const content = await readFile(filename, 'utf-8');

  const processed = await preprocess(content, opts, { filename });
  const ast = parse(processed.code, { filename });

  walk(ast.html, {
    enter(node) {
      if (node.type === 'Element') {
        console.log(node);
      }
    },
  });
}