From 8d3574218d5ca6d0cf92f3a31dd6a7a591c037ce Mon Sep 17 00:00:00 2001 From: Thomas Buckley-Houston Date: Wed, 11 Feb 2026 15:26:19 +0100 Subject: [PATCH] Support importing SASS vars in `.svelte` files --- website/package.json | 1 + website/pnpm-lock.yaml | 26 +++++++++++++++++++++----- website/src/index.ts | 2 +- website/src/{ => styles}/index.scss | 12 +----------- website/src/styles/variables.scss | 11 +++++++++++ 5 files changed, 35 insertions(+), 17 deletions(-) rename website/src/{ => styles}/index.scss (73%) create mode 100644 website/src/styles/variables.scss diff --git a/website/package.json b/website/package.json index 5945997..97c94d0 100644 --- a/website/package.json +++ b/website/package.json @@ -29,6 +29,7 @@ "@rsbuild/plugin-svelte": "^1.0.11", "pmtiles": "^4.3.0", "prettier": "^3.6.2", + "sass": "^1.97.3", "svelte-check": "^4.3.3", "typescript": "^5.9.3" } diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml index 19e97fa..29696fe 100644 --- a/website/pnpm-lock.yaml +++ b/website/pnpm-lock.yaml @@ -44,13 +44,16 @@ importers: version: 1.4.0(@rsbuild/core@1.6.7) '@rsbuild/plugin-svelte': specifier: ^1.0.11 - version: 1.0.11(@rsbuild/core@1.6.7)(postcss@8.5.6)(sass@1.93.3)(svelte@5.43.14)(typescript@5.9.3) + version: 1.0.11(@rsbuild/core@1.6.7)(postcss@8.5.6)(sass@1.97.3)(svelte@5.43.14)(typescript@5.9.3) pmtiles: specifier: ^4.3.0 version: 4.3.0 prettier: specifier: ^3.6.2 version: 3.6.2 + sass: + specifier: ^1.97.3 + version: 1.97.3 svelte-check: specifier: ^4.3.3 version: 4.3.4(svelte@5.43.14)(typescript@5.9.3) @@ -791,6 +794,11 @@ packages: engines: {node: '>=14.0.0'} hasBin: true + sass@1.97.3: + resolution: {integrity: sha512-fDz1zJpd5GycprAbu4Q2PV/RprsRtKC/0z82z0JLgdytmcq0+ujJbJ/09bPGDxCLkKY3Np5cRAOcWiVkLXJURg==} + engines: {node: '>=14.0.0'} + hasBin: true + source-map-js@1.2.1: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} engines: {node: '>=0.10.0'} @@ -1179,11 +1187,11 @@ snapshots: reduce-configs: 1.1.1 sass-embedded: 1.93.3 - '@rsbuild/plugin-svelte@1.0.11(@rsbuild/core@1.6.7)(postcss@8.5.6)(sass@1.93.3)(svelte@5.43.14)(typescript@5.9.3)': + '@rsbuild/plugin-svelte@1.0.11(@rsbuild/core@1.6.7)(postcss@8.5.6)(sass@1.97.3)(svelte@5.43.14)(typescript@5.9.3)': dependencies: '@rsbuild/core': 1.6.7 svelte-loader: 3.2.4(svelte@5.43.14) - svelte-preprocess: 6.0.3(postcss@8.5.6)(sass@1.93.3)(svelte@5.43.14)(typescript@5.9.3) + svelte-preprocess: 6.0.3(postcss@8.5.6)(sass@1.97.3)(svelte@5.43.14)(typescript@5.9.3) transitivePeerDependencies: - '@babel/core' - coffeescript @@ -1637,6 +1645,14 @@ snapshots: '@parcel/watcher': 2.5.1 optional: true + sass@1.97.3: + dependencies: + chokidar: 4.0.3 + immutable: 5.1.4 + source-map-js: 1.2.1 + optionalDependencies: + '@parcel/watcher': 2.5.1 + source-map-js@1.2.1: {} splaytree@0.1.4: {} @@ -1676,12 +1692,12 @@ snapshots: svelte-dev-helper: 1.1.9 svelte-hmr: 0.14.12(svelte@5.43.14) - svelte-preprocess@6.0.3(postcss@8.5.6)(sass@1.93.3)(svelte@5.43.14)(typescript@5.9.3): + svelte-preprocess@6.0.3(postcss@8.5.6)(sass@1.97.3)(svelte@5.43.14)(typescript@5.9.3): dependencies: svelte: 5.43.14 optionalDependencies: postcss: 8.5.6 - sass: 1.93.3 + sass: 1.97.3 typescript: 5.9.3 svelte5-router@3.0.2(svelte@5.43.14): diff --git a/website/src/index.ts b/website/src/index.ts index aed6a91..2b268d1 100644 --- a/website/src/index.ts +++ b/website/src/index.ts @@ -1,6 +1,6 @@ import { mount } from 'svelte'; import App from './App.svelte'; -import './index.scss'; +import './styles/index.scss'; const app = mount(App, { target: document.getElementById('root') as HTMLElement, diff --git a/website/src/index.scss b/website/src/styles/index.scss similarity index 73% rename from website/src/index.scss rename to website/src/styles/index.scss index f1b79db..b5c205a 100644 --- a/website/src/index.scss +++ b/website/src/styles/index.scss @@ -1,16 +1,6 @@ @use "sass:color"; -$primary-colour: #fd6612; -$secondary-colour: #141f41; -$secondary-light: #b8bdd6; -$longest-line: #5bc0eb; - -:root { - --primary-colour: #{$primary-colour}; - --secondary-colour: #{$secondary-colour}; - --secondary-light: #{$secondary-light}; - --longest-line: #{$longest-line}; -} +@use "./variables.scss" as *; body { margin: 0; diff --git a/website/src/styles/variables.scss b/website/src/styles/variables.scss new file mode 100644 index 0000000..7c720c4 --- /dev/null +++ b/website/src/styles/variables.scss @@ -0,0 +1,11 @@ +$primary-colour: #fd6612; +$secondary-colour: #141f41; +$secondary-light: #b8bdd6; +$longest-line: #5bc0eb; + +:root { + --primary-colour: #{$primary-colour}; + --secondary-colour: #{$secondary-colour}; + --secondary-light: #{$secondary-light}; + --longest-line: #{$longest-line}; +}