search

tw-in-js / vscode-twind-intellisense

Intelligent Twind tooling for VS Code
MIT License
60 stars 10 forks source link

Twind completions in Fresh (Deno) workspace not autocompleting custom theme #18

Closed imjamesb closed 1 year ago

imjamesb commented 1 year ago

twind config

// /twind.config.ts
export default {
  selfURL: import.meta.url,
  darkMode: "class",
  mode: "silent",
  theme: {
    "colors": {
      "transparent": "transparent",
      "inherit": "inherit",
      "black": "black",
      "white": "white",
      // ...
      "yellow-A700": "#FFD600",
    },
    "fontFamily": {
      "sans":
        '"Inter var", "ui-sans-serif", "system-ui", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Nueue", "Arial", "Nato Sans", "sans-serif", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Nato Color Emoji"',
      "serif":
        '"ui-serif", "Georgia", "Cambria", "Times New Roman", "Times", "serif"',
      "mono":
        '"ui-monospace", "SDMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New"',
    },
  },
};

Logs:

[2:31:50 AM] Extension Name: sastan.twind-intellisense.
[2:31:50 AM] Extension Version: 0.2.1.
[2:31:50 AM] Using builtin twind
[2:31:50 AM] Extension is enabled. To disable, change the `twind.enable` setting to `false`.
[2:31:50 AM] Configuring @twind/typescript-plugin using: {
  "tags": [
    "tw",
    "apply"
  ],
  "attributes": [
    "tw",
    "class",
    "className"
  ],
  "styles": [
    "style",
    "styled"
  ],
  "debug": true,
  "enable": true
}

image

mooxl commented 1 year ago

it looks like it's a duplicate of: https://github.com/tw-in-js/vscode-twind-intellisense/issues/10

rickyraz commented 1 year ago

i have read all of doc of twind for adding font from 'import' and 'font-face' it still doesn't work :(

imjamesb commented 1 year ago

it looks like it's a duplicate of: #10

Probably, there was not much info in #10 though.

imjamesb commented 1 year ago

It works when removing the selfURL property.

imjamesb commented 1 year ago

I think it has something to do with import. being used.

imjamesb commented 1 year ago

Removing the selfURL property from the config file seems to solve the issue:

image image
mooxl commented 1 year ago

@imjamesb

unfortunately still can't get it to work with the fix you mentioned above:

main.tsScreenshot 2022-09-30 at 23 30 51
twind.config.ts Screenshot 2022-09-30 at 23 36 55

Have also restarted both Twind Intellisense and Deno lsp.

imjamesb commented 1 year ago

You cannot import $fresh

imjamesb commented 1 year ago

Try changing it to

/** @type {import("$fresh").Options} */

Right above the export, so it avoids the import entirely.

mooxl commented 1 year ago

Ok, weird.
I tried your suggestion, but unfortunately it still didn't work. However, since I no longer use the apply function of Twind, Intellisense and also the linting works project-wide.

Screenshot 2022-10-01 at 00 01 22
imjamesb commented 1 year ago

You are still importing $fresh

image

You cannot do that

imjamesb commented 1 year ago

Change it to:

/** @type {Omit<import("$fresh/plugins/twind.ts").Options, "selfURL">} */
export default {
  // ...
mooxl commented 1 year ago

As I said, I have already tried your suggestion:

With a type: Screenshot 2022-10-01 at 00 10 37
Without typing: Screenshot 2022-10-01 at 00 10 48

Now that I define the preflight directly in the object, everything works:) Thank you!

Screenshot 2022-10-01 at 00 49 15
JuerGenie commented 1 year ago

May you could just trying remove fresh's import like import {} from "$fresh" cause is that extension cannot load config (cause module $fresh not found), so extension will use default config. And if you import other things like twind/colors, run npm install twind first, when you reload intellisense, it will be work. When extension load config, that will import config's dependencies from workspace's node_modules (or other source file that in workspace), see loading module from node_modules.

Hope this comment can help you 😄.

gmunumel commented 1 year ago

Thanks @mooxl for showing your solution. Could you also shown your twind.config.ts file?

I'm using twind with deno and fresh version 1.1. 

deno 1.25.0 (release, x86_64-pc-windows-msvc)
v8 10.6.194.5
typescript 4.7.4

This is my main.ts:

/// <reference no-default-lib="true" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
/// <reference lib="dom.asynciterable" />
/// <reference lib="deno.ns" />

import { start } from "$fresh/server.ts";
import manifest from "@/fresh.gen.ts";

import twindPlugin from "$fresh/plugins/twind.ts";
import twindConfig from "@/twind.config.ts";

await start(manifest, {
  plugins: [
    twindPlugin({
      selfURL: new URL("./twind.config.ts", import.meta.url).href,
      preflight: {},
      ...twindConfig,
    }),
  ],
});

twind.config.ts:

import { Options } from "$fresh/plugins/twind.ts";
import * as colors from "twind/colors";

export default {
  // selfURL: import.meta.url,
  darkMode: "class",
  mode: "silent",
  theme: {
    extend: {
      colors,
    },
  },
} as unknown as Options;

I got this error in my main.ts:

Screenshot 1

Screenshot 2

The bg-sky-800 rule should be define in colors: import * as colors from "twind/colors"; in twind.config.ts.

JuerGenie commented 1 year ago

Thanks @mooxl for showing your solution. Could you also shown your twind.config.ts file?

I'm using twind with deno and fresh version 1.1.

deno 1.25.0 (release, x86_64-pc-windows-msvc)
v8 10.6.194.5
typescript 4.7.4

This is my main.ts:

/// <reference no-default-lib="true" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
/// <reference lib="dom.asynciterable" />
/// <reference lib="deno.ns" />

import { start } from "$fresh/server.ts";
import manifest from "@/fresh.gen.ts";

import twindPlugin from "$fresh/plugins/twind.ts";
import twindConfig from "@/twind.config.ts";

await start(manifest, {
  plugins: [
    twindPlugin({
      selfURL: new URL("./twind.config.ts", import.meta.url).href,
      preflight: {},
      ...twindConfig,
    }),
  ],
});

twind.config.ts:

import { Options } from "$fresh/plugins/twind.ts";
import * as colors from "twind/colors";

export default {
  // selfURL: import.meta.url,
  darkMode: "class",
  mode: "silent",
  theme: {
    extend: {
      colors,
    },
  },
} as unknown as Options;

I got this error in my main.ts:

Screenshot 1

Screenshot 2

The bg-sky-800 rule should be define in colors: import * as colors from "twind/colors"; in twind.config.ts.

Hey, @gmunumel, the error means your selfURL will be overwritten by ...twindConfig because typeof twindConfig is Options, Options has property selfURL.

Move selfURL to under of ...twindConfig like:

twindPlugin({
  preflight: {},
  ...twindConfig,
  selfURL: new URL("./twind.config.ts", import.meta.url).href,
});

Or you can change the twindConfig's type assert to Omit<Options, "selfURL">, it will be work too.

To fix the second error (unknown utility "bg-sky-800"), you could trying my solution. you cannot import $fresh and twind/colors in twind.config.ts when your node_modules haven't this two.

mooxl commented 1 year ago

As @JuerGenie mentioned, you get an error because the typing is not right. Here are my two files:

main.ts

/// <reference no-default-lib="true" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
/// <reference lib="dom.asynciterable" />
/// <reference lib="deno.ns" />

import { start } from "$fresh/server.ts";
import manifest from "./fresh.gen.ts";
import { apply } from "twind";

import twindPlugin from "$fresh/plugins/twind.ts";
import twindConfig from "./twind.config.ts";

await start(manifest, {
  plugins: [
    twindPlugin({
      selfURL: new URL("./twind.config.ts", import.meta.url).href,
      preflight: {
        "@font-face": [
          {
            fontFamily: "Plex",
            src: 'url(/fonts/Plex-Regular.woff2) format("woff2")',
          },
          {
            fontFamily: "Plex",
            fontWeight: "bold",
            src: 'url(/fonts/Plex-Bold.woff2) format("woff2")',
          },
        ],
        html: apply`text-html bg-gray`,
        body: apply`text-sm text-white font-plex leading-none tracking-wide`,
      },
      ...twindConfig,
    }),
  ],
});

twind.config.ts

import { Options } from "$fresh/plugins/twind.ts";
export default {
  theme: {
    fontSize: {
      html: "62.5%",
      sm: "1.6rem",
      md: "2.1rem",
      lg: "3rem",
      xl: "5rem",
    },
    fontWeight: {
      bold: "700",
    },
    screens: {
      lg: { max: "1040px" },
      md: { max: "768px" },
      sm: { max: "640px" },
    },
    fontFamily: {
      plex: ["Plex", "sans-serif"],
    },
    maxWidth: {
      xl: "1000px",
      experience: "550px",
    },
    extend: {
      colors: {
        gray: {
          DEFAULT: "#111111",
          light: "#888888",
          dark: "#222222",
        },
      },
      gridTemplateColumns: {
        desktop: "min-content auto",
      },
    },
  },
} as Pick<Options, "theme">;

With this structure i get no linting and typing errors and the intellisense from Twind works:) @gmunumel

gmunumel commented 1 year ago

Thanks @JuerGenie and @mooxl, for your suggestions. Indeed the lint errors are gone. I only have the error with the custom css: unknown utility "bg-sky-800".

I tried to do the following with no luck (I'm using deno and not node, so not npm_modules folder):

main.ts:

/// <reference no-default-lib="true" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
/// <reference lib="dom.asynciterable" />
/// <reference lib="deno.ns" />

import { start } from "$fresh/server.ts";
import manifest from "@/fresh.gen.ts";

import twindPlugin from "$fresh/plugins/twind.ts";
// import twindConfig from "@/twind.config.ts";
import * as colors from "twind/colors";

await start(manifest, {
  plugins: [
    twindPlugin({
      selfURL: new URL("./twind.config.ts", import.meta.url).href,
      preflight: {},
      // ...twindConfig,
      darkMode: "class",
      // mode: "silent",
      theme: {
        extend: {
          colors,
        },
      },
    }),
  ],
});

import_map.json:

{
  "imports": {
    "@/": "./",
    "$fresh/": "https://deno.land/x/fresh@1.1.1/",
    "preact": "https://esm.sh/preact@10.11.0",
    "preact/": "https://esm.sh/preact@10.11.0/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.4",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.0.3",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.0.1",
    "twind": "https://esm.sh/twind@0.16.17",
    "twind/": "https://esm.sh/twind@0.16.17/",
    "dotenv": "https://deno.land/x/dotenv@v3.2.0/load.ts",
    "$std/": "https://deno.land/std@0.151.0/",
    "statery": "https://esm.sh/statery@0.5.4?alias=react:preact/compat&deps=preact@10.8.2",
    "jwt": "https://deno.land/x/djwt@v2.7/mod.ts"
  }
}

I don't want to hijack this topic. May I open another ticket if you want to ;)

mooxl commented 1 year ago

You have to define your theme in twind.config.ts as show above. If you don't do that, twind doesn't recognise the custom theme. Don't ask me why🙃 @gmunumel

gmunumel commented 1 year ago

Nop. Doesn't work for me. Still get the same error in my index.tsx.

main.ts:

/// <reference no-default-lib="true" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
/// <reference lib="dom.asynciterable" />
/// <reference lib="deno.ns" />

import { start } from "$fresh/server.ts";
import manifest from "@/fresh.gen.ts";

import twindPlugin from "$fresh/plugins/twind.ts";
import twindConfig from "@/twind.config.ts";

await start(manifest, {
  plugins: [
    twindPlugin({
      selfURL: new URL("./twind.config.ts", import.meta.url).href,
      preflight: {},
      ...twindConfig,
    }),
  ],
});

twind.config.ts:

// import { Options } from "$fresh/plugins/twind.ts";
import * as colors from "twind/colors";

export default {
  // selfURL: import.meta.url,
  darkMode: "class",
  mode: "silent",
  theme: {
    extend: {
      colors,
    },
  },
  // deno-lint-ignore no-explicit-any
} as Pick<any, "theme">;
JuerGenie commented 1 year ago

Thanks @JuerGenie and @mooxl, for your suggestions. Indeed the lint errors are gone. I only have the error with the custom css: unknown utility "bg-sky-800".

I tried to do the following with no luck (I'm using deno and not node, so not npm_modules folder):

main.ts:

/// <reference no-default-lib="true" />
/// <reference lib="dom" />
/// <reference lib="dom.iterable" />
/// <reference lib="dom.asynciterable" />
/// <reference lib="deno.ns" />

import { start } from "$fresh/server.ts";
import manifest from "@/fresh.gen.ts";

import twindPlugin from "$fresh/plugins/twind.ts";
// import twindConfig from "@/twind.config.ts";
import * as colors from "twind/colors";

await start(manifest, {
  plugins: [
    twindPlugin({
      selfURL: new URL("./twind.config.ts", import.meta.url).href,
      preflight: {},
      // ...twindConfig,
      darkMode: "class",
      // mode: "silent",
      theme: {
        extend: {
          colors,
        },
      },
    }),
  ],
});

import_map.json:

{
  "imports": {
    "@/": "./",
    "$fresh/": "https://deno.land/x/fresh@1.1.1/",
    "preact": "https://esm.sh/preact@10.11.0",
    "preact/": "https://esm.sh/preact@10.11.0/",
    "preact-render-to-string": "https://esm.sh/*preact-render-to-string@5.2.4",
    "@preact/signals": "https://esm.sh/*@preact/signals@1.0.3",
    "@preact/signals-core": "https://esm.sh/*@preact/signals-core@1.0.1",
    "twind": "https://esm.sh/twind@0.16.17",
    "twind/": "https://esm.sh/twind@0.16.17/",
    "dotenv": "https://deno.land/x/dotenv@v3.2.0/load.ts",
    "$std/": "https://deno.land/std@0.151.0/",
    "statery": "https://esm.sh/statery@0.5.4?alias=react:preact/compat&deps=preact@10.8.2",
    "jwt": "https://deno.land/x/djwt@v2.7/mod.ts"
  }
}

I don't want to hijack this topic. May I open another ticket if you want to ;)

It's ok, I'm using Deno too, but extension with VSCode was running on electron (based on NodeJS), so you know :D

CyanFroste commented 1 year ago

Workaround -> https://github.com/tw-in-js/vscode-twind-intellisense/issues/10#issuecomment-1272295973

This will let you use the official tailwind extension instead

pandasoli commented 1 year ago

I had the same problem and put /** @type {Omit<import("$fresh/plugins/twind.ts").Options, "selfURL">} */ in twind.config.ts helped me.

but the error keeps in the rest of the files.
how can I fix it?

twind.config.ts image

main.ts image

Some component imagee8e7a5280446.png)

pandasoli commented 1 year ago

I had the same problem and put /** @type {Omit<import("$fresh/plugins/twind.ts").Options, "selfURL">} */ in twind.config.ts helped me.

but the error keeps in the rest of the files.
how can I fix it?

twind.config.ts image

main.ts image

Some component image