feat: update svelte and sass

ADOFAI-gg · Nov 2, 2024 · 55b666a · 55b666a
1 parent 4772a97
commit 55b666a
Show file tree

Hide file tree

Showing 24 changed files with 1,877 additions and 4,434 deletions.
diff --git a/package.json b/package.json
@@ -16,42 +16,42 @@
 		"prepack": "pnpm build"
 	},
 	"devDependencies": {
-		"@chromatic-com/storybook": "^1.6.1",
+		"@chromatic-com/storybook": "^3.2.2",
 		"@fluent/bundle": "^0.18.0",
-		"@laynezh/vite-plugin-lib-assets": "^0.5.23",
+		"@laynezh/vite-plugin-lib-assets": "^0.5.24",
 		"@melt-ui/pp": "^0.3.2",
-		"@melt-ui/svelte": "^0.83.0",
-		"@storybook/addon-essentials": "^8.2.9",
-		"@storybook/addon-interactions": "^8.2.9",
-		"@storybook/addon-links": "^8.2.9",
+		"@melt-ui/svelte": "^0.85.0",
+		"@storybook/addon-essentials": "^8.4.1",
+		"@storybook/addon-interactions": "^8.4.1",
+		"@storybook/addon-links": "^8.4.1",
 		"@storybook/addon-svelte-csf": "5.0.0-next.3",
-		"@storybook/blocks": "^8.2.9",
-		"@storybook/svelte": "^8.2.9",
-		"@storybook/svelte-vite": "^8.2.9",
-		"@storybook/test": "^8.2.9",
-		"@sveltejs/package": "^2.3.4",
-		"@sveltejs/vite-plugin-svelte": "^3.1.1",
+		"@storybook/blocks": "^8.4.1",
+		"@storybook/svelte": "^8.4.1",
+		"@storybook/svelte-vite": "^8.4.1",
+		"@storybook/test": "^8.4.1",
+		"@sveltejs/package": "^2.3.7",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0",
 		"@tsconfig/svelte": "^5.0.4",
 		"@types/js-cookie": "^3.0.6",
 		"glob": "^11.0.0",
-		"prettier-plugin-svelte": "^3.2.6",
-		"sass-embedded": "^1.77.8",
-		"semantic-release": "^24.0.0",
-		"storybook": "^8.2.9",
-		"svelte": "5.0.0-next.257",
-		"svelte-check": "^4.0.2",
-		"tslib": "^2.6.3",
-		"typescript": "^5.5.3",
-		"vite": "^5.4.0",
-		"vite-plugin-dts": "^4.0.2",
+		"prettier-plugin-svelte": "^3.2.7",
+		"sass-embedded": "^1.80.6",
+		"semantic-release": "^24.2.0",
+		"storybook": "^8.4.1",
+		"svelte": "5.1.9",
+		"svelte-check": "^4.0.5",
+		"tslib": "^2.8.1",
+		"typescript": "^5.6.3",
+		"vite": "^5.4.10",
+		"vite-plugin-dts": "^4.3.0",
 		"vite-tsconfig-paths": "^5.0.1"
 	},
 	"peerDependencies": {
 		"@melt-ui/svelte": "*",
 		"svelte": "5"
 	},
 	"dependencies": {
-		"@fontsource/ibm-plex-sans-kr": "^5.0.13",
+		"@fontsource/ibm-plex-sans-kr": "^5.1.0",
 		"clsx": "^2.1.1",
 		"js-cookie": "^3.0.5",
 		"svelte-component-actions": "^1.1.0"

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/lib/components/Container.svelte b/src/lib/components/Container.svelte
@@ -40,18 +40,16 @@
 {/if}
 
 <style lang="scss">
-	@import '../stylesheets/system/breakpoints';
+	@use '../stylesheets/system/breakpoints' as *;
+	@use 'sass:map';
 
 	.container {
 		width: 100%;
 		margin: 0 auto;
 
 		@each $name, $data in $breakpoints {
-			// @media screen and (min-width: #{inspect(map-get($data, 'min-width'))}) {
-			// 	max-width: calc(map-get($data, 'min-width'));
-			// }
 			@include breakpoint($name) {
-				max-width: map-get($data, 'min-width');
+				max-width: map.get($data, 'min-width');
 			}
 		}
 	}

diff --git a/src/lib/components/Pagination.svelte b/src/lib/components/Pagination.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { createPagination, melt } from '@melt-ui/svelte'
-	import type { CreatePaginationProps } from '@melt-ui/svelte/internal/types'
 	import { writable, type Writable } from 'svelte/store'
 	import Icon from './Icon.svelte'
 

diff --git a/src/lib/components/PopoverContentPanel.svelte b/src/lib/components/PopoverContentPanel.svelte
@@ -13,7 +13,7 @@
 </div>
 
 <style lang="scss">
-	@import '../stylesheets/system/colors';
+	@use '../stylesheets/system/colors' as *;
 
 	.popover-content-panel {
 		padding: 18px;

diff --git a/src/lib/components/footer/Footer.svelte b/src/lib/components/footer/Footer.svelte
@@ -44,7 +44,7 @@
 </footer>
 
 <style lang="scss">
-	@import '../../stylesheets/system/breakpoints';
+	@use '../../stylesheets/system/breakpoints' as *;
 
 	.footer {
 		background-color: rgba(0, 0, 0, 0.2);

diff --git a/src/lib/components/footer/FooterSection.svelte b/src/lib/components/footer/FooterSection.svelte
@@ -15,7 +15,7 @@
 </section>
 
 <style lang="scss">
-	@import '../../stylesheets/system/breakpoints';
+	@use '../../stylesheets/system/breakpoints' as *;
 
 	.footer-section {
 		display: flex;

diff --git a/src/lib/components/form/FormField.svelte b/src/lib/components/form/FormField.svelte
@@ -60,7 +60,7 @@
 </div>
 
 <style lang="scss">
-	@import '../../stylesheets/system/colors';
+	@use '../../stylesheets/system/colors' as *;
 
 	.label {
 		font-size: 16px;

diff --git a/src/lib/components/form/FormHint.svelte b/src/lib/components/form/FormHint.svelte
@@ -8,7 +8,7 @@
 </div>
 
 <style lang="scss">
-	@import '../../stylesheets/system/colors';
+	@use '../../stylesheets/system/colors' as *;
 
 	.dot {
 		width: 8px;

diff --git a/src/lib/components/form/FormHintArea.svelte b/src/lib/components/form/FormHintArea.svelte
@@ -3,7 +3,7 @@
 </div>
 
 <style lang="scss">
-	@import '../../stylesheets/system/colors';
+	@use '../../stylesheets/system/colors' as *;
 
 	.form-hint-area {
 		display: grid;

diff --git a/src/lib/components/form/ImageSelectorEditIcon.svelte b/src/lib/components/form/ImageSelectorEditIcon.svelte
@@ -10,7 +10,7 @@
 </button>
 
 <style lang="scss">
-	@import '../../stylesheets/system/colors';
+	@use '../../stylesheets/system/colors' as *;
 
 	.image-selector-edit-icon {
 		position: absolute;

diff --git a/src/lib/components/form/LabeledCheckbox.svelte b/src/lib/components/form/LabeledCheckbox.svelte
@@ -20,7 +20,7 @@
 </label>
 
 <style lang="scss">
-	@import '../../stylesheets/system/colors';
+	@use '../../stylesheets/system/colors' as *;
 
 	.labeled-checkbox-sm {
 		--label-size: 14px;

diff --git a/src/lib/components/menu/Menu.svelte b/src/lib/components/menu/Menu.svelte
@@ -42,7 +42,7 @@
 	</div> -->
 
 <style lang="scss">
-	@import '../../stylesheets/system/colors';
+	@use '../../stylesheets/system/colors' as *;
 
 	.menu-popup {
 		padding: 8px 0;

diff --git a/src/lib/components/menu/MenuItem.svelte b/src/lib/components/menu/MenuItem.svelte
@@ -24,7 +24,7 @@
 </div>
 
 <style lang="scss">
-	@import '../../stylesheets/system/colors';
+	@use '../../stylesheets/system/colors' as *;
 
 	.menu-default {
 		--menu-item-color: 255, 255, 255;

diff --git a/src/lib/components/nav/Nav.svelte b/src/lib/components/nav/Nav.svelte
@@ -68,8 +68,8 @@
 </nav>
 
 <style lang="scss">
-	@import '../../stylesheets/system/breakpoints';
-	@import '../../stylesheets/system/colors';
+	@use '../../stylesheets/system/breakpoints' as *;
+	@use '../../stylesheets/system/colors' as *;
 
 	.nav-container {
 		background-color: rgba($darkblue, 0.2);

diff --git a/src/lib/components/search/FilterEditPanel.svelte b/src/lib/components/search/FilterEditPanel.svelte
@@ -49,7 +49,7 @@
 </form>
 
 <style lang="scss">
-	@import '../../stylesheets/system/colors';
+	@use '../../stylesheets/system/colors' as *;
 
 	.filter-edit-panel {
 		max-width: 240px;

diff --git a/src/lib/components/search/PopoverSelect.svelte b/src/lib/components/search/PopoverSelect.svelte
@@ -127,7 +127,7 @@
 </div>
 
 <style lang="scss">
-	@import '../../stylesheets/system/colors';
+	@use '../../stylesheets/system/colors' as *;
 
 	.search-input {
 		&:focus {

diff --git a/src/lib/components/user/UserTree.svelte b/src/lib/components/user/UserTree.svelte
@@ -72,7 +72,7 @@
 {/each}
 
 <style lang="scss">
-	@import '../../stylesheets/system/colors';
+	@use '../../stylesheets/system/colors' as *;
 
 	.user-list-item {
 		display: flex;

diff --git a/src/lib/stylesheets/components/_button.scss b/src/lib/stylesheets/components/_button.scss
@@ -1,4 +1,4 @@
-@import '../system/colors';
+@use '../system/colors' as *;
 
 .button {
 	display: flex;

diff --git a/src/lib/stylesheets/components/_panel.scss b/src/lib/stylesheets/components/_panel.scss
@@ -1,3 +1,5 @@
+@use '../system/colors' as *;
+
 .panel {
 	border-radius: 12px;
 	background-color: rgba($darkblue, 0.2);

diff --git a/src/lib/stylesheets/components/_tag.scss b/src/lib/stylesheets/components/_tag.scss
@@ -1,4 +1,4 @@
-@import '../system/colors';
+@use '../system/colors' as *;
 
 .tag {
 	font-size: 20px;

diff --git a/src/lib/stylesheets/globals.scss b/src/lib/stylesheets/globals.scss
@@ -1,13 +1,13 @@
-@import 'base.scss';
-@import 'fonts.scss';
+@use 'base.scss';
+@use 'fonts.scss';
 
-@import 'components/button';
-@import 'components/icon-button';
-@import 'components/tag';
-@import 'components/panel';
+@use 'components/button';
+@use 'components/icon-button';
+@use 'components/tag';
+@use 'components/panel';
 
-@import 'utils/grid';
-@import 'utils/table';
+@use 'utils/grid';
+@use 'utils/table';
 
 $normal_font: 'IBM Plex Sans KR', sans-serif;
 

diff --git a/src/lib/stylesheets/system/_breakpoints.scss b/src/lib/stylesheets/system/_breakpoints.scss
@@ -1,3 +1,6 @@
+@use 'sass:meta';
+@use 'sass:map';
+
 $breakpoints: (
 	// 'xs': (
 	// 	'min-width': 360px,
@@ -28,9 +31,9 @@ $breakpoints: (
 );
 
 @mixin breakpoint($name) {
-	$breakpoint: map-get($breakpoints, $name);
+	$breakpoint: map.get($breakpoints, $name);
 
-	@media screen and (min-width: #{inspect(map-get($breakpoint, 'min-width'))}) {
+	@media screen and (min-width: #{meta.inspect(map.get($breakpoint, 'min-width'))}) {
 		@content;
 	}
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -30,5 +30,12 @@ export default defineConfig({
 				...pkg.peerDependencies
 			})
 		}
+	},
+	css: {
+		preprocessorOptions: {
+			scss: {
+				api: 'modern-compiler'
+			}
+		}
 	}
 })