fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-21 04:28:12 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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
55 changed files with 99 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/Editor.svelte
+1 -1
View File
@@ -75,7 +75,7 @@
<MainWindow />
<style lang="scss" global>
<style lang="scss">
// Disable the spinning loading indicator
body::before,
body::after {
frontend/src/components/floating-menus/ColorPicker.svelte
+1 -1
View File
@@ -732,7 +732,7 @@
</LayoutRow>
</FloatingMenu>
<style lang="scss" global>
<style lang="scss">
.color-picker {
--widget-height: 24px;
--picker-size: 256px;
frontend/src/components/floating-menus/Dialog.svelte
+1 -1
View File
@@ -73,7 +73,7 @@
</LayoutRow>
</FloatingMenu>
<style lang="scss" global>
<style lang="scss">
.dialog {
position: absolute;
pointer-events: none;
frontend/src/components/floating-menus/EyedropperPreview.svelte
+1 -1
View File
@@ -63,7 +63,7 @@
</div>
</FloatingMenu>
<style lang="scss" global>
<style lang="scss">
.eyedropper-preview {
pointer-events: none;
frontend/src/components/floating-menus/MenuList.svelte
+1 -1
View File
@@ -560,7 +560,7 @@
</LayoutCol>
</FloatingMenu>
<style lang="scss" global>
<style lang="scss">
.menu-list {
.search {
margin: 4px;
frontend/src/components/floating-menus/NodeCatalog.svelte
+1 -1
View File
@@ -136,7 +136,7 @@
</div>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.node-catalog {
max-height: 30vh;
min-width: 250px;
frontend/src/components/floating-menus/Tooltip.svelte
+1 -1
View File
@@ -76,7 +76,7 @@
</div>
{/if}
<style lang="scss" global>
<style lang="scss">
.tooltip {
position: absolute;
pointer-events: none;
frontend/src/components/layout/ConditionalWrapper.svelte
+1 -1
View File
@@ -11,4 +11,4 @@
<slot />
{/if}
<style lang="scss" global></style>
<style lang="scss"></style>
frontend/src/components/layout/FloatingMenu.svelte
+1 -1
View File
@@ -500,7 +500,7 @@
{/if}
</div>
<style lang="scss" global>
<style lang="scss">
.floating-menu {
position: absolute;
width: 0;
frontend/src/components/layout/LayoutCol.svelte
+1 -1
View File
@@ -90,7 +90,7 @@ on:touchcancel
on:touchend
-->
<style lang="scss" global>
<style lang="scss">
.layout-col {
display: flex;
flex-direction: column;
frontend/src/components/layout/LayoutRow.svelte
+1 -1
View File
@@ -90,7 +90,7 @@ on:touchcancel
on:touchend
-->
<style lang="scss" global>
<style lang="scss">
.layout-row {
display: flex;
flex-direction: row;
frontend/src/components/panels/Data.svelte
+1 -1
View File
@@ -28,7 +28,7 @@
</LayoutCol>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.data-panel {
flex-grow: 1;
padding: 4px;
frontend/src/components/panels/Document.svelte
+1 -1
View File
@@ -703,7 +703,7 @@
</LayoutRow>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.document {
height: 100%;
frontend/src/components/panels/Layers.svelte
+1 -1
View File
@@ -689,7 +689,7 @@
</LayoutRow>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.layers {
// Control bar
.control-bar {
frontend/src/components/panels/Properties.svelte
+1 -1
View File
@@ -28,7 +28,7 @@
</LayoutCol>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.properties {
height: 100%;
flex: 1 1 100%;
frontend/src/components/panels/Welcome.svelte
+1 -1
View File
@@ -56,7 +56,7 @@
</LayoutCol>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.welcome-panel {
background: var(--color-2-mildblack);
margin: 4px;
frontend/src/components/views/Graph.svelte
+3 -3
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;
}
}
frontend/src/components/widgets/WidgetLayout.svelte
+1 -1
View File
@@ -23,4 +23,4 @@
{/if}
{/each}
<style lang="scss" global></style>
<style lang="scss"></style>
frontend/src/components/widgets/WidgetSection.svelte
+1 -1
View File
@@ -68,7 +68,7 @@
{/if}
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.widget-section {
flex: 0 0 auto;
margin: 0 4px;
frontend/src/components/widgets/WidgetSpan.svelte
+1 -1
View File
@@ -283,7 +283,7 @@
{/each}
</div>
<style lang="scss" global>
<style lang="scss">
.widget-span.column {
flex: 0 0 auto;
display: flex;
frontend/src/components/widgets/WidgetTable.svelte
+1 -1
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;
frontend/src/components/widgets/buttons/BreadcrumbTrailButtons.svelte
+1 -1
View File
@@ -20,7 +20,7 @@
{/each}
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.breadcrumb-trail-buttons {
.text-button {
position: relative;
frontend/src/components/widgets/buttons/IconButton.svelte
+1 -1
View File
@@ -45,7 +45,7 @@
{/if}
</button>
<style lang="scss" global>
<style lang="scss">
.icon-button {
display: flex;
justify-content: center;
frontend/src/components/widgets/buttons/ImageButton.svelte
+1 -1
View File
@@ -34,7 +34,7 @@
on:click={action}
/>
<style lang="scss" global>
<style lang="scss">
.image-button {
width: auto;
height: auto;
frontend/src/components/widgets/buttons/ParameterExposeButton.svelte
+1 -1
View File
@@ -44,7 +44,7 @@
</button>
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.parameter-expose-button {
display: flex;
align-items: center;
frontend/src/components/widgets/buttons/PopoverButton.svelte
+1 -1
View File
@@ -54,7 +54,7 @@
</FloatingMenu>
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.popover-button {
position: relative;
width: 16px;
frontend/src/components/widgets/buttons/TextButton.svelte
+10 -10
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>
frontend/src/components/widgets/inputs/CheckboxInput.svelte
+1 -1
View File
@@ -63,7 +63,7 @@
</label>
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.checkbox-input {
flex: 0 0 auto;
align-items: center;
frontend/src/components/widgets/inputs/ColorInput.svelte
+1 -1
View File
@@ -56,7 +56,7 @@
/>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.color-button {
position: relative;
min-width: 80px;
frontend/src/components/widgets/inputs/CurveInput.svelte
+1 -1
View File
@@ -209,7 +209,7 @@
<slot />
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.curve-input {
background: var(--color-1-nearblack);
display: flex;
frontend/src/components/widgets/inputs/DropdownInput.svelte
+1 -1
View File
@@ -161,7 +161,7 @@
/>
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.dropdown-input {
position: relative;
--widget-height: 24px;
frontend/src/components/widgets/inputs/FieldInput.svelte
+1 -1
View File
@@ -120,7 +120,7 @@
<slot />
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.field-input {
min-width: 80px;
height: auto;
frontend/src/components/widgets/inputs/NumberInput.svelte
+1 -1
View File
@@ -794,7 +794,7 @@
{/if}
</FieldInput>
<style lang="scss" global>
<style lang="scss">
.number-input {
&.narrow {
--widget-height: 20px;
frontend/src/components/widgets/inputs/RadioInput.svelte
+1 -1
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;
frontend/src/components/widgets/inputs/ReferencePointInput.svelte
+1 -1
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;
frontend/src/components/widgets/inputs/RulerInput.svelte
+1 -1
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);
frontend/src/components/widgets/inputs/ScrollbarInput.svelte
+1 -1
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%;
frontend/src/components/widgets/inputs/SpectrumInput.svelte
+1 -1
View File
@@ -414,7 +414,7 @@
</LayoutRow>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.spectrum-input {
position: relative;
--marker-half-width: 6px;
frontend/src/components/widgets/inputs/TextAreaInput.svelte
+1 -1
View File
@@ -63,5 +63,5 @@
bind:this={self}
/>
<style lang="scss" global>
<style lang="scss">
</style>
frontend/src/components/widgets/inputs/TextInput.svelte
+1 -1
View File
@@ -87,7 +87,7 @@
bind:this={self}
/>
<style lang="scss" global>
<style lang="scss">
.text-input {
flex-shrink: 0;
frontend/src/components/widgets/inputs/WorkingColorsInput.svelte
+1 -1
View File
@@ -63,7 +63,7 @@
</LayoutRow>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.working-colors-button {
flex: 0 0 auto;
frontend/src/components/widgets/labels/IconLabel.svelte
+1 -1
View File
@@ -37,7 +37,7 @@
{@html ICON_SVG_STRINGS[icon] || "�"}
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.icon-label {
flex: 0 0 auto;
fill: var(--color-e-nearwhite);
frontend/src/components/widgets/labels/ImageLabel.svelte
+1 -1
View File
@@ -30,7 +30,7 @@
alt=""
/>
<style lang="scss" global>
<style lang="scss">
.image-label {
width: auto;
height: auto;
frontend/src/components/widgets/labels/Separator.svelte
+1 -1
View File
@@ -12,7 +12,7 @@
{/if}
</div>
<style lang="scss" global>
<style lang="scss">
.separator {
&.vertical {
flex: 0 0 auto;
frontend/src/components/widgets/labels/ShortcutLabel.svelte
+22 -22
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);
}
}
}
frontend/src/components/widgets/labels/TextLabel.svelte
+1 -1
View File
@@ -88,7 +88,7 @@
<slot />
</label>
<style lang="scss" global>
<style lang="scss">
.text-label {
line-height: 18px;
white-space: nowrap;
frontend/src/components/window/MainWindow.svelte
+1 -1
View File
@@ -41,7 +41,7 @@
{/if}
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.main-window {
height: 100%;
overflow: auto;
frontend/src/components/window/Panel.svelte
+1 -1
View File
@@ -250,7 +250,7 @@
</LayoutCol>
</LayoutCol>
<style lang="scss" global>
<style lang="scss">
.panel {
background: var(--color-1-nearblack);
border-radius: 6px;
frontend/src/components/window/StatusBar.svelte
+1 -1
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%;
frontend/src/components/window/TitleBar.svelte
+1 -1
View File
@@ -79,7 +79,7 @@
</LayoutRow>
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.title-bar {
flex: 0 0 auto;
height: var(--height);
frontend/src/components/window/Workspace.svelte
+1 -1
View File
@@ -203,7 +203,7 @@
</LayoutRow>
</LayoutRow>
<style lang="scss" global>
<style lang="scss">
.workspace {
position: relative;
flex: 1 1 100%;