Skip to content

Syntax highlight problem in SASS format #460

Closed
@lucasvazq

Description

@lucasvazq

What version of Tailwind CSS IntelliSense are you using?

For example: v0.7.5

What version of Tailwind CSS are you using?

For example: v3.0.12

What package manager are you using?

For example: yarn

What operating system are you using?

For example: Manjaro

Reproduction URL

https://github.com/lucasvazq/tailwindcss-intellisense-error

Describe your issue

I was working on a new project, to which I added tailwindcss and decided to install this extension for VSCode, and I get an undesired error.

Screenshot_2022-01-08_23-00-55

'base
@tailwind components
@tailwind utilities

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap")
' is not a valid value. Did you mean 'base'?(invalidTailwindDirective)

The first thing I did was try to fix it with the editor Quick Fix -> Replace with 'base'. The result was the following:

Screenshot_2022-01-08_23-11-30

After that, I wanted to add a new line and started seeing the problem again:

Screenshot_2022-01-08_23-04-32

'base
' is not a valid value. Did you mean 'base'?(invalidTailwindDirective)

So, I started testing, and I realized that the problem is because the extension expects that always after the tailwind directives there be a semicolon.

Screenshot_2022-01-09_01-49-32

This is okay for most syntaxes, but I'm using SASS (not SCSS), and I don't need to add a semicolon.

Related code: https://github.com/tailwindlabs/tailwindcss-intellisense/blob/master/packages/tailwindcss-language-service/src/diagnostics/getInvalidTailwindDirectiveDiagnostics.ts#L34

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions