jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove the svelte-preprocess dev dependency, keeping global styles with a custom Vite plugin (#4003) 

* Remove the svelte-preprocess dev dependency, keeping global styles with a custom Vite plugin

* More robust style tag detection

* Fix CSS regressions
This commit is contained in:
Keavon Chambers 2026-04-03 23:53:46 -07:00 committed by GitHub
parent 55463fe0aa
commit e0212ca4b9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
55 changed files with 99 additions and 144 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
frontend/package-lock.json generated
View File

@ -27,7 +27,6 @@
"sass": "^1.98.0",
"svelte": "^5.54.1",
"svelte-check": "^4.4.5",
"svelte-preprocess": "^6.0.3",
"tar": "^7.5.12",
"typescript": "^5.9.3",
"typescript-eslint": "^8.57.1",
@ -6039,62 +6038,6 @@
"node": ">=10"
}
},
"node_modules/svelte-preprocess": {
"version": "6.0.3",
"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-6.0.3.tgz",
"integrity": "sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA==",
"dev": true,
"hasInstallScript": true,
"license": "MIT",
"engines": {
"node": ">= 18.0.0"
},
"peerDependencies": {
"@babel/core": "^7.10.2",
"coffeescript": "^2.5.1",
"less": "^3.11.3 || ^4.0.0",
"postcss": "^7 || ^8",
"postcss-load-config": ">=3",
"pug": "^3.0.0",
"sass": "^1.26.8",
"stylus": ">=0.55",
"sugarss": "^2.0.0 || ^3.0.0 || ^4.0.0",
"svelte": "^4.0.0 || ^5.0.0-next.100 || ^5.0.0",
"typescript": "^5.0.0"
},
"peerDependenciesMeta": {
"@babel/core": {
"optional": true
},
"coffeescript": {
"optional": true
},
"less": {
"optional": true
},
"postcss": {
"optional": true
},
"postcss-load-config": {
"optional": true
},
"pug": {
"optional": true
},
"sass": {
"optional": true
},
"stylus": {
"optional": true
},
"sugarss": {
"optional": true
},
"typescript": {
"optional": true
}
}
},
"node_modules/synckit": {
"version": "0.11.12",
"resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.12.tgz",

1
frontend/package.json
View File

@ -48,7 +48,6 @@
"sass": "^1.98.0",
"svelte": "^5.54.1",
"svelte-check": "^4.4.5",
"svelte-preprocess": "^6.0.3",
"tar": "^7.5.12",
"typescript": "^5.9.3",
"typescript-eslint": "^8.57.1",

2
frontend/src/components/Editor.svelte
View File

@ -75,7 +75,7 @@
<MainWindow />
<style lang="scss" global>
<style lang="scss">
// Disable the spinning loading indicator
body::before,
body::after {

2
frontend/src/components/floating-menus/ColorPicker.svelte
View File

@ -732,7 +732,7 @@
</LayoutRow>
</FloatingMenu>
<style lang="scss" global>
<style lang="scss">
.color-picker {
--widget-height: 24px;
--picker-size: 256px;

2
frontend/src/components/floating-menus/Dialog.svelte
View File

@ -73,7 +73,7 @@
</LayoutRow>
</FloatingMenu>
<style lang="scss" global>
<style lang="scss">
.dialog {
position: absolute;
pointer-events: none;

2
frontend/src/components/floating-menus/EyedropperPreview.svelte
View File

@ -63,7 +63,7 @@
</div>
</FloatingMenu>
<style lang="scss" global>
<style lang="scss">
.eyedropper-preview {
pointer-events: none;

2
frontend/src/components/floating-menus/MenuList.svelte
View File

@ -560,7 +560,7 @@
</LayoutCol>
</FloatingMenu>
<style lang="scss" global>
<style lang="scss">
.menu-list {
.search {
margin: 4px;

2
frontend/src/components/floating-menus/NodeCatalog.svelte
View File

@ -136,7 +136,7 @@
</div>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.node-catalog {
max-height: 30vh;
min-width: 250px;

2
frontend/src/components/floating-menus/Tooltip.svelte
View File

@ -76,7 +76,7 @@
</div>
{/if}
<style lang="scss" global>
<style lang="scss">
.tooltip {
position: absolute;
pointer-events: none;

2
frontend/src/components/layout/ConditionalWrapper.svelte
View File

@ -11,4 +11,4 @@
<slot />
{/if}
<style lang="scss" global></style>
<style lang="scss"></style>

2
frontend/src/components/layout/FloatingMenu.svelte
View File

@ -500,7 +500,7 @@
{/if}
</div>
<style lang="scss" global>
<style lang="scss">
.floating-menu {
position: absolute;
width: 0;

2
frontend/src/components/layout/LayoutCol.svelte
View File

@ -90,7 +90,7 @@ on:touchcancel
on:touchend
-->
<style lang="scss" global>
<style lang="scss">
.layout-col {
display: flex;
flex-direction: column;

2
frontend/src/components/layout/LayoutRow.svelte
View File

@ -90,7 +90,7 @@ on:touchcancel
on:touchend
-->
<style lang="scss" global>
<style lang="scss">
.layout-row {
display: flex;
flex-direction: row;

2
frontend/src/components/panels/Data.svelte
View File

@ -28,7 +28,7 @@
</LayoutCol>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.data-panel {
flex-grow: 1;
padding: 4px;

2
frontend/src/components/panels/Document.svelte
View File

@ -703,7 +703,7 @@
</LayoutRow>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.document {
height: 100%;

2
frontend/src/components/panels/Layers.svelte
View File

@ -689,7 +689,7 @@
</LayoutRow>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.layers {
// Control bar
.control-bar {

2
frontend/src/components/panels/Properties.svelte
View File

@ -28,7 +28,7 @@
</LayoutCol>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.properties {
height: 100%;
flex: 1 1 100%;

2
frontend/src/components/panels/Welcome.svelte
View File

@ -56,7 +56,7 @@
</LayoutCol>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.welcome-panel {
background: var(--color-2-mildblack);
margin: 4px;

6
frontend/src/components/views/Graph.svelte
View File

@ -813,7 +813,7 @@
></div>
{/if}
<style lang="scss" global>
<style lang="scss">
.graph {
position: relative;
overflow: hidden;
@ -996,7 +996,7 @@
z-index: 1;
// Zero specificity with `:where()` to allow other rules to override `pointer-events`
:where(.graph-view.open & > *) {
:where(.graph-view.open .graph .imports-and-exports > *) {
pointer-events: auto;
}
@ -1098,7 +1098,7 @@
height: 100%;
// Zero specificity with `:where()` to allow other rules to override `pointer-events`
:where(.graph-view.open & > *) {
:where(.graph-view.open .graph .layers-and-nodes > *) {
pointer-events: auto;
}
}

2
frontend/src/components/widgets/WidgetLayout.svelte
View File

@ -23,4 +23,4 @@
{/if}
{/each}
<style lang="scss" global></style>
<style lang="scss"></style>

2
frontend/src/components/widgets/WidgetSection.svelte
View File

@ -68,7 +68,7 @@
{/if}
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.widget-section {
flex: 0 0 auto;
margin: 0 4px;

2
frontend/src/components/widgets/WidgetSpan.svelte
View File

@ -283,7 +283,7 @@
{/each}
</div>
<style lang="scss" global>
<style lang="scss">
.widget-span.column {
flex: 0 0 auto;
display: flex;

2
frontend/src/components/widgets/WidgetTable.svelte
View File

@ -22,7 +22,7 @@
</tbody>
</table>
<style lang="scss" global>
<style lang="scss">
table:not(.unstyled) {
background: var(--color-3-darkgray);
border: none;

2
frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
View File

@ -20,7 +20,7 @@
{/each}
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.breadcrumb-trail-buttons {
.text-button {
position: relative;

2
frontend/src/components/widgets/buttons/IconButton.svelte
View File

@ -45,7 +45,7 @@
{/if}
</button>
<style lang="scss" global>
<style lang="scss">
.icon-button {
display: flex;
justify-content: center;

2
frontend/src/components/widgets/buttons/ImageButton.svelte
View File

@ -34,7 +34,7 @@
on:click={action}
/>
<style lang="scss" global>
<style lang="scss">
.image-button {
width: auto;
height: auto;

2
frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
View File

@ -44,7 +44,7 @@
</button>
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.parameter-expose-button {
display: flex;
align-items: center;

2
frontend/src/components/widgets/buttons/PopoverButton.svelte
View File

@ -54,7 +54,7 @@
</FloatingMenu>
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.popover-button {
position: relative;
width: 16px;

20
frontend/src/components/widgets/buttons/TextButton.svelte
View File

@ -105,7 +105,7 @@
{/if}
</ConditionalWrapper>
<style lang="scss" global>
<style lang="scss">
.text-button-container {
display: flex;
position: relative;
@ -194,15 +194,15 @@
.text-label {
overflow: hidden;
}
}
// Custom styling for when multiple TextButton widgets are used next to one another in a row or column
.widget-span.row > & + .text-button,
.layout-row > & + .text-button {
margin-left: 8px;
}
.widget-span.column > & + .text-button,
.layout-column > & + .text-button {
margin-top: 8px;
}
// Custom styling for when multiple TextButton widgets are used next to one another in a row or column
.widget-span.row > .text-button + .text-button,
.layout-row > .text-button + .text-button {
margin-left: 8px;
}
.widget-span.column > .text-button + .text-button,
.layout-column > .text-button + .text-button {
margin-top: 8px;
}
</style>

2
frontend/src/components/widgets/inputs/CheckboxInput.svelte
View File

@ -63,7 +63,7 @@
</label>
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.checkbox-input {
flex: 0 0 auto;
align-items: center;

2
frontend/src/components/widgets/inputs/ColorInput.svelte
View File

@ -56,7 +56,7 @@
/>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.color-button {
position: relative;
min-width: 80px;

2
frontend/src/components/widgets/inputs/CurveInput.svelte
View File

@ -209,7 +209,7 @@
<slot />
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.curve-input {
background: var(--color-1-nearblack);
display: flex;

2
frontend/src/components/widgets/inputs/DropdownInput.svelte
View File

@ -161,7 +161,7 @@
/>
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.dropdown-input {
position: relative;
--widget-height: 24px;

2
frontend/src/components/widgets/inputs/FieldInput.svelte
View File

@ -120,7 +120,7 @@
<slot />
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.field-input {
min-width: 80px;
height: auto;

2
frontend/src/components/widgets/inputs/NumberInput.svelte
View File

@ -794,7 +794,7 @@
{/if}
</FieldInput>
<style lang="scss" global>
<style lang="scss">
.number-input {
&.narrow {
--widget-height: 20px;

2
frontend/src/components/widgets/inputs/RadioInput.svelte
View File

@ -46,7 +46,7 @@
{/each}
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.radio-input {
background: var(--color-4-dimgray);
border-radius: 2px;

2
frontend/src/components/widgets/inputs/ReferencePointInput.svelte
View File

@ -35,7 +35,7 @@
<button on:click={() => setValue("BottomRight")} class="row-3 col-3" class:active={value === "BottomRight"} tabindex="-1" {disabled}><div></div></button>
</div>
<style lang="scss" global>
<style lang="scss">
.reference-point-input {
position: relative;
flex: 0 0 auto;

2
frontend/src/components/widgets/inputs/RulerInput.svelte
View File

@ -111,7 +111,7 @@
</svg>
</div>
<style lang="scss" global>
<style lang="scss">
.ruler-input {
flex: 1 1 100%;
background: var(--color-2-mildblack);

2
frontend/src/components/widgets/inputs/ScrollbarInput.svelte
View File

@ -214,7 +214,7 @@
<button class="arrow increase" on:pointerdown={() => pressArrow(1)} tabindex="-1" data-scrollbar-arrow></button>
</div>
<style lang="scss" global>
<style lang="scss">
.scrollbar-input {
display: flex;
flex: 1 1 100%;

2
frontend/src/components/widgets/inputs/SpectrumInput.svelte
View File

@ -414,7 +414,7 @@
</LayoutRow>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.spectrum-input {
position: relative;
--marker-half-width: 6px;

2
frontend/src/components/widgets/inputs/TextAreaInput.svelte
View File

@ -63,5 +63,5 @@
bind:this={self}
/>
<style lang="scss" global>
<style lang="scss">
</style>

2
frontend/src/components/widgets/inputs/TextInput.svelte
View File

@ -87,7 +87,7 @@
bind:this={self}
/>
<style lang="scss" global>
<style lang="scss">
.text-input {
flex-shrink: 0;

2
frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
View File

@ -63,7 +63,7 @@
</LayoutRow>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.working-colors-button {
flex: 0 0 auto;

2
frontend/src/components/widgets/labels/IconLabel.svelte
View File

@ -37,7 +37,7 @@
{@html ICON_SVG_STRINGS[icon] || "<22>"}
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.icon-label {
flex: 0 0 auto;
fill: var(--color-e-nearwhite);

2
frontend/src/components/widgets/labels/ImageLabel.svelte
View File

@ -30,7 +30,7 @@
alt=""
/>
<style lang="scss" global>
<style lang="scss">
.image-label {
width: auto;
height: auto;

2
frontend/src/components/widgets/labels/Separator.svelte
View File

@ -12,7 +12,7 @@
{/if}
</div>
<style lang="scss" global>
<style lang="scss">
.separator {
&.vertical {
flex: 0 0 auto;

44
frontend/src/components/widgets/labels/ShortcutLabel.svelte
View File

@ -130,7 +130,7 @@
{/each}
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.shortcut-label {
align-items: center;
@ -156,34 +156,34 @@
fill: var(--color-8-uppergray);
}
}
}
.floating-menu-content .row > & {
.key-label,
.mouse-icon {
color: var(--color-8-uppergray);
background: none;
.floating-menu-content .row > .shortcut-label {
.key-label,
.mouse-icon {
color: var(--color-8-uppergray);
background: none;
&:first-child {
padding-left: 0;
}
&:last-child {
padding-right: 0;
}
&:first-child {
padding-left: 0;
}
.key-label svg {
fill: var(--color-8-uppergray);
&:last-child {
padding-right: 0;
}
}
.mouse-icon svg {
// 3 shades brighter than the 8-uppergray of key labels/icons
fill: var(--color-b-lightgray);
.key-label svg {
fill: var(--color-8-uppergray);
}
.dim {
// 3 shades darker than the 8-uppergray of key labels/icons
fill: var(--color-5-dullgray);
}
.mouse-icon svg {
// 3 shades brighter than the 8-uppergray of key labels/icons
fill: var(--color-b-lightgray);
.dim {
// 3 shades darker than the 8-uppergray of key labels/icons
fill: var(--color-5-dullgray);
}
}
}

2
frontend/src/components/widgets/labels/TextLabel.svelte
View File

@ -88,7 +88,7 @@
<slot />
</label>
<style lang="scss" global>
<style lang="scss">
.text-label {
line-height: 18px;
white-space: nowrap;

2
frontend/src/components/window/MainWindow.svelte
View File

@ -41,7 +41,7 @@
{/if}
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.main-window {
height: 100%;
overflow: auto;

2
frontend/src/components/window/Panel.svelte
View File

@ -250,7 +250,7 @@
</LayoutCol>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.panel {
background: var(--color-1-nearblack);
border-radius: 6px;

2
frontend/src/components/window/StatusBar.svelte
View File

@ -36,7 +36,7 @@
<WidgetLayout class="info" layout={statusBarInfoLayout} layoutTarget="StatusBarInfo" />
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.status-bar {
height: 24px;
width: 100%;

2
frontend/src/components/window/TitleBar.svelte
View File

@ -79,7 +79,7 @@
</LayoutRow>
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.title-bar {
flex: 0 0 auto;
height: var(--height);

2
frontend/src/components/window/Workspace.svelte
View File

@ -203,7 +203,7 @@
</LayoutRow>
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.workspace {
position: relative;
flex: 1 1 100%;

4
frontend/svelte.config.js
View File

@ -1,7 +1,7 @@
import { sveltePreprocess } from "svelte-preprocess";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
export default {
preprocess: sveltePreprocess(),
preprocess: [vitePreprocess()],
compilerOptions: /** @type {import("svelte/compiler").ModuleCompileOptions} */ ({
warningFilter: (warning) => !warning.code.startsWith("a11y_") && !["css_unused_selector"].includes(warning.code),
}),

15
frontend/vite.config.ts
View File

@ -11,7 +11,7 @@ const projectRootDir = path.resolve(__dirname);
// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
return {
plugins: [svelte(), staticAssets(), mode !== "native" && thirdPartyLicenses(), mode !== "native" && serviceWorker()],
plugins: [svelteGlobalStyles(), svelte(), staticAssets(), mode !== "native" && thirdPartyLicenses(), mode !== "native" && serviceWorker()],
resolve: {
alias: [{ find: /\/..\/branding\/(.*\.svg)/, replacement: path.resolve(projectRootDir, "../branding", "$1?raw") }],
},
@ -22,6 +22,19 @@ export default defineConfig(({ mode }) => {
};
});
// Wraps the content of every `<style lang="scss">...</style>` block in Svelte components with `:global { ... }` to work around Svelte's unwanted scoped styles
function svelteGlobalStyles(): PluginOption {
return {
name: "svelte-global-styles",
enforce: "pre",
transform(code, id) {
if (!id.endsWith(".svelte")) return;
return code.replace(/<style(?=\s|>)([^>]*)>(.*?)<\/style>/gs, (_, attrs, content) => `<style${attrs}>\n:global {\n${content}\n}\n</style>`);
},
};
}
function staticAssets(): PluginOption {
const STATIC_ASSET_DIRS: { source: string; urlPrefix: string }[] = [
{ source: "../demo-artwork", urlPrefix: "/demo-artwork" },