Giters

trunk-rs / trunk

Build, bundle & ship your Rust WASM application to the web.

Home Page:https://trunkrs.dev/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Trunk Doesn't Compile SCSS Properly

naftulikay opened this issue · comments

commented

I'm on Trunk 0.19.1, and I'm seeing strange behavior where trunk does not appear to fully compile SCSS to CSS.

index.html:

<!doctype html>
<html lang="en" data-theme="light">
<head>
    <meta charset="utf-8"/>
    <link rel="shortcut icon" type="image/x-icon" href="data:image/x-icon;,">
    <link data-trunk rel="scss" href="styles/index.scss"/>
    <title>Yew App</title>
</head>
<body>loading...</body>
</html>

styles/index.scss:

$black: #1a1a1a;
$white: #f2f2f2;

@property --text-color {
  syntax: "<color>";
  inherits: true;
  initial-value: $black;
}

@property --background-color {
  syntax: "<color>";
  inherits: true;
  initial-value: $white;
}

:root {
  font-family: sans-serif;
}

html[data-theme="light"] body {
  --text-color: $white;
  --background-color: $black;
}

html[data-theme="dark"] body {
  --text-color: $black;
  --background-color: $white;
}

It's a fairly simple example: define Sass variables (i.e. constants, $black and $white) for colors white and black, define CSS variables (i.e. runtime variables) and their default values, and then change the text/background colors depending on the value of html[data-theme].

Trunk compiles the above SCSS into the following CSS:

@property --text-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #1a1a1a;
}
@property --background-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #f2f2f2;
}
:root {
  font-family: sans-serif;
}

html[data-theme=light] body {
  --text-color: $white;
  --background-color: $black;
}

html[data-theme=dark] body {
  --text-color: $black;
  --background-color: $white;
}

body {
  color: var(--text-color);
  background-color: var(--background-color);
  margin: 3rem;
}

Inside of the html[data-theme] sections, note that it did not replace the values of $black or $white, rather it includes them verbatim, which is invalid CSS, so my stylesheet does not work. Note also that interpolation does work in the @property definitions. As per the docs, I am including rel="scss" in the <link> tag for the stylesheet, and some compilation is occurring but not all.

commented

Trunk itself doesn't compile SASS/SCSS, but only calls sass on the command line. Of course, there may be an issue with calling it. As there was a recent change in 0.19.1 calling sass, I would ask you to try again with 0.19.0 and see if that fixes things.

If that leads to the same result, I would expect this to be caused by the local version of sass you have installed. You can run trunk tools to see what are the detected, local versions.

commented

First, I had no idea that I needed to install sass directly, so I went about taking care of that first. I haven't ever seen trunk warn or error that it couldn't find sass, and since compilation kind of works, I assumed that there was something else going on.

I downgraded to 0.19.0 and attempted trunk serve both with sass on my PATH and without, verified via trunk tools, and in both cases, I get the same miscompilation. However, I'm closing the issue because I get a miscompilation even on Sass's hosted playground, so clearly this isn't a problem in trunk.