import preprocess from "svelte-preprocess"

/**
 * This will add autocompletion if you're working with SvelteKit
 * https://github.com/sveltejs/svelte-preprocess/blob/main/docs/usage.md
 * @type {import('@sveltejs/kit').Config}
 */
const config = {
  preprocess: preprocess({
    // ...svelte-preprocess options
  }),
  compilerOptions: {
    css: "injected" // this is the default mode
  }
  // ...other svelte options
}

export default config

import preprocess from "svelte-preprocess"

/**
 * This will add autocompletion if you're working with SvelteKit
 * https://github.com/sveltejs/svelte-preprocess/blob/main/docs/usage.md
 * @type {import('@sveltejs/kit').Config}
 */
const config = {
  preprocess: preprocess({
    // ...svelte-preprocess options
  }),
  compilerOptions: {
    css: "injected" // this is the default mode
  }
  // ...other svelte options
}

export default config

<script context="module" lang="ts">
  import type {
    PlasmoCSConfig,
    PlasmoGetInlineAnchor,
    PlasmoMountShadowHost
  } from "plasmo"

  export const config: PlasmoCSConfig = {
    matches: ["https://*.google.com/*"]
  }

  export const getInlineAnchor: PlasmoGetInlineAnchor = () => document.querySelector("body")

  export const mountShadowHost: PlasmoMountShadowHost = ({ 
    anchor, shadowHost 
  }) => {
    console.log(anchor, shadowHost)
    anchor!.element!.insertBefore(shadowHost!, anchor!.element!.firstChild)
  }
</script>

<script>
  let count = 0
  let increment = () => count++
</script>

<div style="text-align: center; font-size: x-large;">
  <span style="color: red;">{count}</span>
  <button on:click={increment}>A lie is a very poor way to say hello</button>
</div>

<script context="module" lang="ts">
  import type {
    PlasmoCSConfig,
    PlasmoGetInlineAnchor,
    PlasmoMountShadowHost
  } from "plasmo"

  export const config: PlasmoCSConfig = {
    matches: ["https://*.google.com/*"]
  }

  export const getInlineAnchor: PlasmoGetInlineAnchor = () => document.querySelector("body")

  export const mountShadowHost: PlasmoMountShadowHost = ({ 
    anchor, shadowHost 
  }) => {
    console.log(anchor, shadowHost)
    anchor!.element!.insertBefore(shadowHost!, anchor!.element!.firstChild)
  }
</script>

<script>
  let count = 0
  let increment = () => count++
</script>

<div style="text-align: center; font-size: x-large;">
  <span style="color: red;">{count}</span>
  <button on:click={increment}>A lie is a very poor way to say hello</button>
</div>