DioxusLabs / DioxusLabs/dioxus

Hot reload for @use files when using scss

Open
#5,000 0 comments 2 reactions 0 assignees View on GitHub
enhancement
Dominant language
Rust
Stars
39.1k
Forks
1.9k
Avg merge
4d 10h
Merged PRs (30d)
4

Description

## Feature Request

Currently when using at-rule 'use' on an scss asset the file is properly picked by the scss compiler. One way to validate that is to add an invalid @use rule:

```
10:56:29 [dev] Failed to hash asset /code/cadence/crates/app/assets/main.scss: Failed to compile scss file: /code/cadence/crates/app/assets/main.scss
10:56:36 [dev] Failed to copy asset "/code/cadence/crates/app/assets/main.scss": Failed to compile scss file: /code/cadence/crates/app/assets/main.scss
10:56:36 [dev] Build failed: Failed to write assets
1: Failed to compile scss file: /code/cadence/crates/app/assets/main.scss
2: Error: Can't find stylesheet to import.

1 │ @use './nowhere'


.//code/cadence/crates/app/assets/main.scss:1:1
```

On the other hand, adding a valid import will work as expected but this breaks hot reload.
To reproduce:

```scss
// assets/style.scss
@use './other-style.scss'
```

```scss
// assets/other-style.scss
.some-class {
color: red
}
```

```rs
// in your dioxus component
const MAIN_CSS: Asset = asset!("/assets/style.scss");

// ...etc
```

Now running `dx serve` we can observe the following:
- making changes to `style.scss` does hotreload (event the content of `other-style.scss`) ✔️
- making changes to `other-style.scss` does not hotreload 🔴

## Implement Suggestion

I don't think grass provide a way to access the scss AST but `@use` rules in have the following rule:

> A stylesheet’s @use rules must come before any rules other than @forward, including [style rules](https://sass-lang.com/documentation/style-rules). However, you can declare variables before @use rules to use when [configuring modules](https://sass-lang.com/documentation/at-rules/use/#configuration).

As far as I understand the `@uses` paths are already watched by `dx serve`, but they are ignored because not declared as dioxus `Asset`.

Adding a tiny parser to scan SCSS assets for @use paths and keep a list of scss indirection in the build context would be enough to rebuild the parent file instead of the ignored `@use` file.

## Rationale
This improves the development experience by ensuring changes to any included SCSS partial are immediately reflected without requiring a manual restart or a full rebuild

I am not familiar with dioxus internals yet but I'd be happy to try implementing this if this is something you would like implement.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.