[+] Sass migrate

https://github.com/sass/migrator/issues/211

src/App.vue

@@ -114,8 +114,8 @@ export default class App extends Vue
 </script>
 
 <style lang="sass">
-@import "css/global"
-@import "css/animations"
+@use "css/global"
+@use "css/animations"
 
 #nav
     position: fixed

src/components/BlogIndex.vue

@@ -39,7 +39,7 @@ export default class BlogIndexLinks extends Vue
 </script>
 
 <style lang="sass" scoped>
-@import 'src/css/colors'
+@use '../css/colors'
 
 .index
     *
@@ -55,7 +55,7 @@ export default class BlogIndexLinks extends Vue
 
 .index-categories
     font-size: 0.8em
-    color: $color-text-special
+    color: colors.$color-text-special
 
     *
         text-decoration: underline

src/components/BlogPost.vue

@@ -111,7 +111,7 @@ const date = moment(p.meta.date)
 </script>
 
 <style lang="sass" scoped>
-@import 'src/css/colors'
+@use '../css/colors'
 
 #BlogPostPreview
     text-align: left
@@ -121,7 +121,7 @@ const date = moment(p.meta.date)
 
     #date
         font-size: 0.7em
-        color: $color-text-light
+        color: colors.$color-text-light
 
     > * + *, #content > * + *
         padding-top: 10px
@@ -150,7 +150,7 @@ const date = moment(p.meta.date)
 
         #subtitle
             font-size: 0.8em
-            color: $color-text-light
+            color: colors.$color-text-light
 
     img
         $margin: 10px
@@ -171,7 +171,7 @@ const date = moment(p.meta.date)
     #expand
         font-size: 0.8em
         padding-top: 10px
-        color: $color-text-light
+        color: colors.$color-text-light
 
 // Put image on top
 #BlogPostPreview.image-top

src/components/MetaTable.vue

@@ -35,12 +35,12 @@ export default class MetaTable extends Vue
 </script>
 
 <style lang="sass" scoped>
-@import "src/css/colors"
+@use "../css/colors"
 
 .meta
     td:first-child
         text-align: right
-        color: $color-text-light
+        color: colors.$color-text-light
 
     td:last-child
         display: inline-block

src/components/Tag.vue

@@ -15,11 +15,11 @@ const props = defineProps({
 </script>
 
 <style lang="sass" scoped>
-@import src/css/colors
+@use "../css/colors"
 
 $tag-height: 20px
-$tag-color: $color-bg-6
-$text-color: $color-text-light
+$tag-color: colors.$color-bg-6
+$text-color: colors.$color-text-light
 
 $padding: calc($tag-height / 2)
 $triangle-width: calc($tag-height / 2) * 0.8

src/css/responsive.sass

@@ -1,4 +1,4 @@
-@import "src/css/colors"
+@import "../css/colors"
 
 $width: 600px
 

src/sass-migrate.py

@@ -0,0 +1,78 @@
+from pathlib import Path
+import re
+import subprocess
+import tempfile
+
+def extract_and_migrate_sass(file_path):
+    """Extracts <style lang="sass"> block from a Svelte file, runs sass-migrator on it, and replaces the original style block."""
+
+    with open(file_path, 'r', encoding='utf-8') as file:
+        content = file.read()
+
+    # Regex pattern to match <style lang="sass">...</style>
+    style_pattern = re.compile(r'<style\s+lang\s*=\s*["\']sass["\']( scoped)*>(.*?)</style>', re.DOTALL)
+
+    # Extract all matching style blocks
+    matches = list(style_pattern.finditer(content))
+
+    if not matches:
+        print(f"No <style lang='sass'> block found in {file_path}")
+        return
+
+    updated_content = content
+
+    for match in matches:
+        original_style_block = match.group(0)  # The full <style>...</style> block
+        scoped = match.group(1)  # The scoped attribute if present
+        sass_content = match.group(2)  # The content inside the <style> block
+
+        # Create a temporary file in the same directory as the .svelte file
+        temp_file_path = Path(file_path).parent / f"{Path(file_path).stem}_temp.sass"
+
+        # Write the SASS content to the temporary file
+        with open(temp_file_path, 'w', encoding='utf-8') as temp_file:
+            # Calculate relative path depth
+            depth = len(Path(file_path).parent.relative_to(Path(__file__).parent).parts)
+            print(Path(file_path).parent.relative_to(Path(__file__).parent).parts)
+            temp_file.write(sass_content.replace("src/", "../" * depth))
+
+        # Run the sass-migrator on the temporary file
+        try:
+            subprocess.run(['sass-migrator', 'module', str(temp_file_path)], check=True)
+        except subprocess.CalledProcessError as e:
+            print(f"Error while running sass-migrator on {file_path}: {e}")
+            continue
+
+        # Read back the migrated content
+        with open(temp_file_path, 'r', encoding='utf-8') as temp_file:
+            migrated_sass_content = temp_file.read()
+
+        # Create the new <style> block with the migrated SASS content
+        new_style_block = f'<style lang="sass"{scoped or ''}>{migrated_sass_content}</style>'
+
+        # Replace the original style block with the new one
+        updated_content = updated_content.replace(original_style_block, new_style_block)
+
+        # Remove the temporary file
+        temp_file_path.unlink()
+
+    # Write the updated content back to the original file
+    with open(file_path, 'w', encoding='utf-8') as file:
+        file.write(updated_content)
+
+    print(f"Updated {file_path}")
+
+def process_svelte_files(directory):
+    """Recursively processes all .svelte files in the given directory."""
+    svelte_files = Path(directory).rglob("*.vue")
+
+    for svelte_file in svelte_files:
+        extract_and_migrate_sass(svelte_file)
+
+def main():
+    """Main function to process all .svelte files in the current directory."""
+    current_directory = Path(__file__).parent
+    process_svelte_files(current_directory)
+
+if __name__ == "__main__":
+    main()

src/views/About.vue

@@ -51,7 +51,7 @@ export default class About extends Vue
 </script>
 
 <style lang="sass">
-@import "../css/colors"
+@use "../css/colors"
 
 #About
     width: min(600px, 80vw)

src/views/Blog.vue

@@ -60,11 +60,11 @@ const activePost = computed(() => {
 </script>
 
 <style lang="sass" scoped>
-@import "src/css/colors"
-@import "src/css/responsive"
+@use "../css/colors"
+@use "../css/responsive"
 
 #breadcrumb
-    color: $color-text-light
+    color: colors.$color-text-light
     margin-bottom: 20px
 
     span:not(.no-after):after

src/views/Life.vue

@@ -20,8 +20,8 @@ import 'tg-blog/dist/style.css'
 </script>
 
 <style lang="sass" scoped>
-@import "src/css/colors"
-@import "src/css/responsive"
+@use "../css/colors"
+@use "../css/responsive"
 
 .title
     text-align: left

src/views/Others.vue

@@ -14,9 +14,9 @@
 </template>
 
 <style lang="sass" scoped>
-@import "src/css/global"
-@import "src/css/colors"
-@import "src/css/responsive"
+@use "../css/global"
+@use "../css/colors"
+@use "../css/responsive"
 
 .links
     display: flex
@@ -28,7 +28,7 @@ a
     @extend .card
     @extend .clickable
 
-    color: $color-text-main
+    color: colors.$color-text-main
     text-decoration: none
 
 </style>

src/views/others/Friends.vue

@@ -76,8 +76,8 @@ export default class Friends extends Vue
 </script>
 
 <style lang="sass" scoped>
-@import "src/css/colors"
-@import "src/css/responsive"
+@use "../../css/colors"
+@use "../../css/responsive"
 
 $card-min-width: 320px
 
@@ -126,7 +126,7 @@ $card-min-width: 320px
       flex: 1
 
     a
-      color: $color-text-main
+      color: colors.$color-text-main
 
     a + a
       margin-left: 10px

src/views/others/Menu.vue

@@ -176,8 +176,8 @@ export default class Menu extends Vue
 </script>
 
 <style lang="sass" scoped>
-@import "src/css/colors"
-@import "src/css/responsive"
+@use "../../css/colors"
+@use "../../css/responsive"
 
 .columns
   display: flex
@@ -200,14 +200,14 @@ export default class Menu extends Vue
   .subtitle
     font-size: 0.8em
     margin-bottom: 0.5em
-    color: $color-text-light
+    color: colors.$color-text-light
 
 .items
   .sub
     font-size: 0.7em
 
   .item.recommend
-    color: $color-text-special
+    color: colors.$color-text-special
 
   .item.original:after
     content: '原创'