Deno•2y ago

Import SCSS in TS files

Hey, I am currently building a template for web development and I want to use ESBuild as a bundler. I use lit in combination with SASS. For SASS files I use the esbuild-sass-plugin from npm in Deno. This works fine and ESBuild successfully resolves and bundles the .scss files imported into the .ts files. However deno-ts marks the default import as red because it is not valid js/ts how can I specify this in the config for Deno so that the files get recognized as SCSS files/plain text?

import style from „style.scss“
//     ^ Works but is red because style.scss does not have a default export.

import style from „style.scss“
//     ^ Works but is red because style.scss does not have a default export.

Deno AI Helper•3/11/24, 11:23 AM

I wasn't able to find the answer to your question in the official Deno documentation. However, based on the code snippet you've provided, I noticed that the quotation marks around

style.scss

style.scss

are not the standard quotation marks used in JavaScript/TypeScript. You should use either single quotes

, double quotes

, or backticks

ts
import style from "style.scss";
.scssdeno.jsonimport_map.d.ts`) to declare the module and its default export. However, these are general suggestions and should be verified for their compatibility with Deno.

Helpful Links:
Importing & Exporting - Deno by Example
You Don't Need a Build Step
Deno 1.4 Release Notes
Web Frameworks | Deno Docs

DDeno AI Helper I wasn't able to find the answer to your question in the official Deno documenta...

MqxOP•3/11/24, 11:25 AM

The quotes are because I wrote it from mobile. In the real script are the correct quotes.

Deno AI Helper•3/11/24, 11:26 AM

Oops! Can you pinpoint where I went wrong to help me improve?

Deno AI Helper•3/11/24, 11:26 AM

Understood, thank you for clarifying that the quotes are correct in your actual script.

Since you're using ESBuild and the esbuild-sass-plugin to handle the SCSS imports, and Deno's TypeScript is raising an error due to the non-standard import, you might consider creating a TypeScript declaration file (

.d.ts

.d.ts

) to tell Deno's type system what to expect when importing files. This won't affect your runtime but will silence the TypeScript errors in your editor.

Here's an example of what the declaration file could look like:

You would place this file somewhere in your project where it can be included in your TypeScript compilation context. This tells TypeScript that when it sees an import for a file, it should treat it as a module that has a default export of type

string

string

.

Please note that this is a general TypeScript suggestion and not specific to Deno. Since Deno does not have built-in support for SCSS, this workaround is commonly used in the TypeScript ecosystem to handle non-code assets. Remember to double-check this approach for compatibility with your Deno project.

DDeno AI Helper Understood, thank you for clarifying that the quotes are correct in your actual ...

MqxOP•3/11/24, 11:28 AM

How do I import it/use the declaration.d.ts file? Do I need to import this into my tsconfig order deno.jsonc?

Deno AI Helper•3/11/24, 11:29 AM

I'm glad I was able to help!

Deno AI Helper•3/11/24, 11:29 AM

In Deno, you don't typically use a

tsconfig.json

tsconfig.json

file as you would in a Node.js environment. Instead, Deno uses a

deno.json

deno.json

deno.jsonc

deno.jsonc

configuration file to specify various settings.

For TypeScript declaration files, you don't need to import them directly into your TypeScript files or reference them in your

deno.jsonc

deno.jsonc

. Instead, you should ensure that the declaration file is in your project's root or included in your project structure where Deno's TypeScript compiler can automatically pick it up.

Here's what you can do:

Place your file in the root of your project or in a directory that's included in your project.
Deno will automatically include all
```
.d.ts
```
```
.d.ts
```
files in the project when type-checking, as long as they are in the import graph or in the same directory as the files being checked.

If you have a more complex project structure and you want to be explicit about including your type declaration files, you can use an import statement in a TypeScript file that's part of your project's main dependency graph:

This triple-slash directive tells TypeScript to include the referenced declaration file in the compilation context. However, this is generally not necessary unless you're encountering issues with the compiler not detecting your declaration files.

Remember, the file is only for type declarations to help the TypeScript compiler understand the types of your imports. It won't affect the runtime behavior of your code, and you don't need to import it like a regular module in your

.ts

.ts

files. The compiler will use it to resolve types for imports automatically.

Helpful Links:
Importing JSON - Deno by Example
Types and Type Declarations | Deno Docs
First Steps | Deno Docs
Importing & Exporting - Deno by Example

DDeno AI Helper In Deno, you don't typically use a `tsconfig.json` file as you would in a Node.j...

MqxOP•3/11/24, 11:31 AM

Thanks I will try that

Deno AI Helper•3/11/24, 11:31 AM

I'm glad I was able to help!

Deno AI Helper•3/11/24, 11:32 AM

You're welcome! If you have any more questions or run into any issues, feel free to ask. Good luck with your project, and happy coding with Deno!

Helpful Links:
Deno, the next-generation JavaScript runtime
Deno Community
Deno Docs
Backups | Deno Docs

Deno AI Helper•3/11/24, 11:32 AM

I'm glad I was able to help!

DDeno AI Helper Understood, thank you for clarifying that the quotes are correct in your actual ...

MqxOP•3/11/24, 11:37 AM

Okay I have created a file in my root directory called "declarations.d.ts" but this does not work. It is still red.

Deno AI Helper•3/11/24, 11:38 AM

I wasn't able to find the answer to your question in the official Deno documentation. However, based on your message, if you've created a file and it's not resolving the issue with the TypeScript error, there are a couple of things you might want to check:

Ensure that the file is correctly named and placed in the root directory of your project where Deno can easily find it.
Verify that the content of your file matches the expected syntax for declaring a module, like so:

Make sure there are no typos in the file name or the module declaration syntax.

If after checking these points the issue persists, it's possible that there might be other factors at play that are not covered by the advice provided here. This advice is not based on the Deno documentation, and I would advise you to double-check the accuracy of this advice. If the problem continues, you may need to look for more specific guidance related to Deno's handling of TypeScript declaration files or seek assistance from the Deno community.

Helpful Links:
error: No config file found in VS Code - Deno
Types and Type Declarations | Deno Docs
Deno Docs
Changing the source directory | Fresh docs

DDeno AI Helper I wasn't able to find the answer to your question in the official Deno documenta...

MqxOP•3/11/24, 11:39 AM

I have checken everything and it still does not work…

Deno AI Helper•3/11/24, 11:40 AM

I'm sorry to hear that the issue persists. Since I wasn't able to find the answer to your question in the official Deno documentation, and the advice provided has not resolved the issue, it may be beneficial to seek assistance from the Deno community. The Deno community can be a great resource, with many experienced developers who may have encountered similar issues.

You can reach out to the community through various channels such as the Deno Discord server, Deno's official forum, or GitHub discussions. When reaching out, be sure to provide as much context as possible, including:

The exact error message you're seeing.
The contents of your file.
The structure of your project.
The version of Deno you're using.
Any other relevant configuration details.

This information will help others understand your problem better and provide more targeted assistance. Remember, the advice given here is not based on the Deno documentation, so double-checking with the community may lead you to a solution that is specific to Deno's environment.

Helpful Links:
Deno 1.39: The Return of WebGPU
Page Not Found | Deno Docs
Page Not Found | Deno Docs
Page Not Found | Deno Docs

DDeno AI Helper I'm sorry to hear that the issue persists. Since I wasn't able to find the answe...

MqxOP•3/11/24, 11:49 AM

I have created a "modules.d.ts" file in the root of my project. Inside of the file is the following content:

I also included the

.d.ts

.d.ts

file under the types in the tsconfig. But it still does not work

Deno AI Helper•3/11/24, 11:50 AM

I apologize for the confusion earlier. Since Deno does not use

tsconfig.json

tsconfig.json

for its configuration and instead uses

deno.json

deno.json

deno.jsonc

deno.jsonc

, specifying the

.d.ts

.d.ts

file under the

types

types

tsconfig

tsconfig

won't have any effect in a Deno project.

The file you've created should be automatically recognized by Deno's TypeScript compiler if it's in the root of your project. However, if you're still seeing the error, it's possible that the editor you're using might not be correctly integrated with Deno or might be using its own TypeScript server.

Here are a few things you can check:

Make sure your editor is configured to use Deno's language server. If you're using Visual Studio Code, for example, you should have the official Deno extension installed and enabled for your workspace.
Ensure that your file is saved and that there are no typos in the file name or its content.
Restart your editor to make sure it picks up the new file.

If after checking these points the issue still occurs, it might be a good idea to reach out to the Deno community for further assistance. Since the advice provided here is not based on the Deno documentation, it's important to double-check the accuracy of this advice with the community or other Deno-specific resources. They might be able to provide more insight into why the TypeScript error is still showing up in your project.

Helpful Links:
Deno Docs
Deno Docs
Deno 1.4 Release Notes
Deno Docs

DDeno AI Helper I apologize for the confusion earlier. Since Deno does not use `tsconfig.json` f...

MqxOP•3/11/24, 11:54 AM

I have checked all of that. But it still does not work.
This is how I’m import the scss file:

Style is red marked with: "file has no default export" the path tho the file is not red and gets resolved.

Deno AI Helper•3/11/24, 11:55 AM

I wasn't able to find the answer to your question in the official Deno documentation. However, based on your message, it seems that the TypeScript language server is not recognizing the custom module declaration for files that you've defined in your file.

Given that the path to the file is resolved correctly, but the import is marked with "file has no default export," it suggests that the issue is with the TypeScript understanding of the module declaration.

Here are a few things you might want to double-check:

Ensure that the file is in the root of your project or at least in a directory that is included in your project's import graph.
If you have a
```
deno.json
```
```
deno.json
```
or
```
deno.jsonc
```
```
deno.jsonc
```
configuration file, make sure there are no conflicting settings that might affect module resolution.
Confirm that there are no other TypeScript errors in your project that might be causing the language server to not properly recognize the
```
.d.ts
```
```
.d.ts
```
file.
If you're using an editor like Visual Studio Code, ensure that the Deno extension is active and that you're working in a Deno-enabled workspace.

Since the advice provided here is not based on the Deno documentation, please double-check the accuracy of this advice. If the problem continues, it may be beneficial to seek assistance from the Deno community, as they might have more specific experience with this type of issue and could offer more targeted help.

Helpful Links:
Using CSP | Fresh docs
Deno 1.4 Release Notes
You Don't Need a Build Step
Deno Docs

DDeno AI Helper I wasn't able to find the answer to your question in the official Deno documenta...

MqxOP•3/11/24, 11:57 AM

I checked all of that and it still does not work

Deno AI Helper•3/11/24, 11:58 AM

I'm sorry to hear that the issue is still unresolved. Since the advice provided here is not based on the Deno documentation and the issue persists despite checking the mentioned points, it would be best to seek further assistance from the Deno community.

The Deno community is active and knowledgeable, and they may have encountered similar issues or have specific insights that could help resolve this problem. You can reach out to them through the official Deno Discord server, Deno's forum, or other community channels.

When reaching out, provide them with all the relevant details, including the steps you've already taken, the contents of your file, and the exact behavior you're experiencing. This will help others in the community understand your issue better and provide you with more targeted assistance.

Helpful Links:
Deno deploy see error - Deno
Troubleshooting deno.land downloads - Deno
Page Not Found | Deno Docs
Page Not Found | Deno Docs

MqxOP•3/11/24, 1:14 PM

Okay

MqxOP•3/12/24, 1:21 PM

I really don’t have an Idea how to fix this…

MqxOP•3/12/24, 1:42 PM

Is someone here that I am allowed to ping who does know how to fix this?

Thomas•3/12/24, 9:21 PM

I'm not that familiar with lit and esbuild. But you are trying to compile a frontend with esbuild using Deno. And this seems to be successful (great :deno_thumbs_up:).

The Deno linter is not designed for frontend. Bug maybe you can exclude the frontend code for the deno-linter (deno.json) ....

...and configure eslint for your frontend instead?

MqxOP•3/13/24, 10:10 AM

That would disable linting for the whole file… I know that I can exclude files. I just want to disable the type checking/linting when I import a .scss file.

MqxOP•3/13/24, 10:12 AM

Because deno-ts is trying to resolve the import and of course the .scss file is not valid ts/js and also does not have a default export.

MqxOP•3/13/24, 10:15 AM

All that ESBuild does is it looks for .scss file imports inside a .ts file, than it resolves the import (transpiles the scss to css and puts that into the default export) and this default export can that be loaded as a normal string variable for deno and lit.

MqxOP•3/13/24, 10:15 AM

This all works fine, but the linter does not like the default import of the scss

Thomas•3/13/24, 12:39 PM

If it works, you can simply set an ts-ignore.

MqxOP•3/14/24, 3:24 PM

Hmm okay I try that

MqxOP•3/14/24, 3:25 PM

Thanks for the suggestion

TThomas If it works, you can simply set an ts-ignore. ```ts // @ts-ignore import style ...

MqxOP•3/15/24, 8:23 AM

This works but it is not a good solution to the problem

Leokuma•3/15/24, 2:28 PM

@kt3k Sorry for pinging you. Do you happen to know another solution for this?

Leokuma•3/15/24, 2:29 PM

Although for me that's enough TBH

kt3k•3/15/24, 8:47 PM

I don't think we have other solution than . Looks like something need to be fixed (supported) in and

Thomas•3/15/24, 9:28 PM

I'm not sure, but Deno itself can't do anything with CSS or SCSS. Support for these files therefore seems rather inconsistent.

And, on the other hand, do we still need SCSS today (in the age of CSS3)?

And yes, ts-ignore is not a good solution, of course.

Maybe you can go a different way instead. Here is an example of how you could use CSS programmatically (probably for jsx?):
https://docs.deno.com/runtime/manual/advanced/jsx_dom/css
Not sure if this is helpful

Parsing and Stringifying CSS | Deno Docs

If you want to parse CSS to a abstract syntax tree (AST) then there are two

Leokuma•3/15/24, 10:01 PM

Agreed. That's why I think is good enough. CSS already supports variables, nested rules and layers, and there are ways to manipulate CSS via JS without having to extend or configure a runtime in any specific way

TThomas I'm not sure, but Deno itself can't do anything with CSS or SCSS. Support for th...

MqxOP•3/16/24, 11:55 AM

Currently we use SCSS for things like function and mixins. These features are still missing

MqxOP•3/16/24, 11:58 AM

But I agree on the point to think about if we even need SCSS in the first place. But even then if I use plain CSS I would still have the problem that the linter would throw an error when importing the css in ts

MqxOP•3/16/24, 12:08 PM

You also have the problem with other non js/ts files. Like SVGs or PNGs. These files also don’t have default export and so the linter also doesn’t like that.

MqxOP•3/16/24, 12:09 PM

Fixing the problem that declare module would work would solve all the problems

Kkt3k I don't think we have other solution than `@ts-ignore`. Looks like something nee...

MqxOP•3/16/24, 6:07 PM

So you think it is a bug, that deno lsp does not check for the declare module?

kt3k•3/16/24, 10:29 PM

I don't think it's immediately a bug, but support of such situation can be added/suggested in Deno.

kt3k•3/16/24, 10:31 PM

Do you suppose the use of syntax will resolve the above error? A feature request with a supposed example would be helpful

Kkt3k Do you suppose the use of `declare module` syntax will resolve the above error? ...

MqxOP•3/18/24, 5:32 AM

Yes I think so. This would be the common solution in other projects

MqxOP•3/18/24, 5:33 AM

Should I open an issue for a feature request for this?

MqxOP•3/18/24, 5:39 AM

Looks like there is already an issue open similar to this: https://github.com/denoland/deno/issues/9541

GitHub

lsp picks up on ambient d.ts files · Issue #9541 · denoland/deno

.vscode/settings.json { "deno.enable": true, "deno.lint": false, "deno.unstable": false } foo.d.ts declare function hello(name: string): void; main.ts hello(123); foo....

MqxOP•3/18/24, 5:40 AM

But I think the problem with declare module is slightly different

MqxOP•3/18/24, 5:59 AM

I have opened an issue: https://github.com/denoland/deno/issues/23007

GitHub

`declare module` inside `.d.ts` does not get picked up by Deno · Is...

Hey, I currently have a problem when importing non js/ts files inside a js/ts file. deno-ts shows an error with non-resolvable imports for non-js/ts files. For example i have this index.ts files, s...