Merge branch 'svelte5'

Author: micantoine

CHANGELOG.md

@@ -1,6 +1,17 @@
 # Svelte preprocess CSS Modules, changelog
 
-## 2.2.5 (Sept 19, 2022)
+## 3.0.0 (Jan 17 2025)
+
+### Update
+
+- Support for svelte 5 [#124](https://github.com/micantoine/svelte-preprocess-cssmodules/issues/124)
+- Use modern AST
+
+### Breaking Changes
+- Remove `linearPreprocess` util since it is not being needed anymore
+- Set peer dependencies to svelte 5 only
+
+## 2.2.5 (Sept 19, 2024)
 
 ### Updates
 

README.md

@@ -6,6 +6,8 @@ Generate CSS Modules classnames on Svelte components
 npm install --save-dev svelte-preprocess-cssmodules
 ```
 
+for `svelte 4` and below, use version 2 of the preprocessor.
+
 ## Table of Content
 
 - [Usage](#usage)
@@ -30,8 +32,8 @@ npm install --save-dev svelte-preprocess-cssmodules
   - [Webpack](#webpack)
   - [SvelteKit](#sveltekit)
   - [Svelte Preprocess](#svelte-preprocess)
+  - [Vite](#vite)
   - [Options](#options)
-- [Migrating from v1](#migrating-from-v1)
 - [Code example](#code-example)
 
 ## Usage
@@ -113,8 +115,8 @@ Toggle a class on an element.
 
 ```html
 <script>
-  let route = 'home';
-  $: isActive = route === 'home';
+  let route = $state('home');
+  let isActive = $derived(route === 'home');
 </script>
 
 <style module>
@@ -140,8 +142,8 @@ _generating_
 
 ```html
 <script>
-  let route = 'home';
-  $: active = route === 'home';
+  let route = $state('home');
+  let active = $derived(route === 'home');
 </script>
 
 <style module>
@@ -264,7 +266,7 @@ Link the value of a CSS property to a dynamic variable by using `bind()`.
 
 ```html
 <script>
-  let color = 'red';
+  let color = $state('red');
 </script>
 
 <p class="text">My lorem ipsum text</p>
@@ -302,9 +304,9 @@ An object property can also be targetted and must be wrapped with quotes.
 
 ```html
 <script>
-  const style = {
+  const style = $state({
     opacity: 0;
-  };
+  });
 </script>
 
 <div class="content">
@@ -327,9 +329,9 @@ _generating_
 
 ```html
 <script>
-  const style = {
+  const style = $state({
     opacity: 0;
-  };
+  });
 </script>
 
 <div class="content-dhye8T" style="--opacity-r1gf51:{style.opacity}">
@@ -355,8 +357,7 @@ CSS Modules allows you to pass a scoped classname to a child component giving th
 ```html
 <!-- Child Component Button.svelte -->
 <script>
-  let className;
-  export { className as class };
+  let { class: className } = $props();
 </script>
 
 <button class="btn {className}">
@@ -579,8 +580,8 @@ Use the Svelte's builtin `class:` directive or javascript template to display a
 <script>
   import { success, error } from './style.module.css';
 
-  let isSuccess = true;
-  $: notice = isSuccess ? success : error;
+  let isSuccess = $state(true);
+  let notice = $derived(isSuccess ? success : error);
 </script>
 
 <button on:click={() => isSuccess = !isSuccess}>Toggle</button>
@@ -813,40 +814,39 @@ export default config;
 
 ### Svelte Preprocess
 
-Svelte is running the preprocessors by phases, going through all *markup* first, followed by *script* and then *style*.
-
-The CSS Modules preprocessor is doing all its work on the markup phase via `svelte.parse()` which requires the compoment to be a valid standard svelte component (using vanilla js and vanilla css). if any other code (such as typescript or sass) is encountered, an error will be thrown. 
+The CSS Modules preprocessor requires the compoment to be a standard svelte component (using vanilla js and vanilla css). if any other code, such as Typescript or Sass, is encountered, an error will be thrown. Therefore CSS Modules needs to be run at the very end.
 
 ```js
 import { typescript, scss } from 'svelte-preprocess';
 import { cssModules } from 'svelte-preprocess-cssmodules';
 
 ...
-// svelte config:  NOT working!
+// svelte config:
   preprocess: [
-    typescript(), // 2 run second on script phase
-    scss(), // 3 run last on style phase
-    cssModules(), // 1 run first on markup phase
+    typescript(),
+    scss(),
+    cssModules(), // run last
   ],
 ...
 ```
 
-As it is extremely common for developers to use `svelte-preprocess` in their application, CSS Modules provides a small utility to easily be incorporated with. `linearPreprocess` will ensure a linear process with the list of preprocessors.
+### Vite
+
+Set the `svelte.config.js` accordingly.
 
 ```js
-import { typescript, scss } from 'svelte-preprocess';
-import { cssModules, linearPreprocess } from 'svelte-preprocess-cssmodules';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+import { cssModules } from 'svelte-preprocess-cssmodules';
 
-...
-// svelte config: OK, processing one after another!
-  preprocess: linearPreprocess([
-    typescript(), // 1 run first
-    scss(), // 2 run second
-    cssModules(), // 3 run last
-  ]),
-...
+export default {
+  preprocess: [
+    vitePreprocess(),
+    cssModules()
+  ]
+};
 ```
 
+
 ### Options
 Pass an object of the following properties
 
@@ -1062,28 +1062,6 @@ preprocess: [
 ...
 ```
 
-## Migrating from v1
-If you want to migrate an existing project to `v2` keeping the approach of the 1st version, follow the steps below:
-
-- Set the `mixed` mode from the global settings.
-   ```js
-   // Preprocess config
-   ...
-   preprocess: [
-    cssModules({
-      mode: 'mixed',
-    }),
-   ],
-   ...
-   ```
-- Remove all `$style.` prefix from the html markup
-- Add the attribute `module` to `<style>` within your components.
-   ```html
-   <style module>
-   ...
-   </style>
-   ```
-
 ## Code Example
 
 *Rollup Config*

example/webpack/App.svelte

@@ -1,21 +1,31 @@
 <script>
   import 'swiper/swiper.min.css';
   import Time from './components/Time.svelte';
+  import Body from './components/Body.svelte';
+
   import css from './app.module.css';
   import { success, successSmall } from './app2.module.css';
   import './app3.module.css';
 
   let theme = { color: 'blue'};
 </script>
-<div class="overlay" />
+<div class="overlay"></div>
 <div class="modal" style="display:block">
   <section>
-    <header class="active" on:click={() => theme.color = 'red'}>My Modal title</header>
-    <div class="body">
-      <Time />
+    <header
+      class="active"
+      role="button"
+      tabindex="-1"
+      on:click={() => theme.color = 'red'}
+      on:keyup={() => theme.color = 'green'}
+    >
+      My Modal title
+    </header>
+    <Body>
+      <Time class="time" />
       <p class="{css.error} {css.errorMessage} large"><strong>Lorem ipsum dolor sit</strong>, amet consectetur adipisicing elit. Placeat, deserunt.</p>
       <p class="{success} {successSmall}">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat, deserunt. Lorem ipsum dolor sit amet. </p>
-    </div>
+    </Body>
     <footer>
       <button class="active">Ok</button>
       <button class="cancel">Cancel</button>
@@ -61,15 +71,6 @@
   color: bind("theme.color");
 }
 
-.body {
-  padding: 1rem;
-  flex: 1 0 0;
-  min-height: 0;
-  max-height: 100%;
-  overflow: scroll;
-  -webkit-overflow-scrolling: touch;
-}
-
 :local(footer) {
   padding: 1rem;
   text-align: right;
@@ -90,4 +91,10 @@ button {
 .active {
   font-weight: 700;
 }
+
+@media screen {
+  .time {
+    color: red;
+  }
+}
 </style>

example/webpack/components/Body.svelte

@@ -0,0 +1,18 @@
+<script>
+  let { children } = $props();
+</script>
+
+<div class="body">
+  {@render children?.()}  
+</div>
+
+<style module="mixed">
+  .body {
+    padding: 1rem;
+    flex: 1 0 0;
+    min-height: 0;
+    max-height: 100%;
+    overflow: scroll;
+    -webkit-overflow-scrolling: touch;
+  }
+</style>

example/webpack/components/Time.svelte

@@ -1,20 +1,30 @@
 <script>
-  import { onDestroy } from 'svelte';
+  let { class: className, ...props} = $props();
 
-  let className;
-  export { className as class };
+  let date = $state(new Date());
+  let time = $derived(`${date.getHours()}:${twoDigits(date.getMinutes())}:${twoDigits(date.getSeconds())}`);
 
-  let date = new Date();
-  const active = true;
-  $: time = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
+  function twoDigits(str) {
+    return str.toLocaleString('en', { minimumIntegerDigits: 2 });
+  }
   
-  const interval = setInterval(() => date = new Date(), 1000);
+  $effect(() => {
+    const interval = setInterval(() => {
+			date = new Date();
+		}, 1000);
 
-  onDestroy(() => {
-    clearInterval(interval);
-  })
+		return () => {
+			clearInterval(interval);
+		};
+  });
 </script>
 
+<div
+  class="time bolder light { true ? 'lighter red' : ''} {className}"
+  class:bold={true}
+  {...props}
+>{time}</div>
+
 <style module="mixed">
   :local(div) {
     text-align: right;
@@ -51,17 +61,11 @@
 
   :local(div) *.bold { font-size: 12px;}
 
-  .btn {
+  .time {
     float:right;
 		animation: opacity 4s infinite alternate;
 	}
 
-  @media screen {
-    .btn {
-      color: red;
-    }
-  }
-
 	@keyframes opacity {
 		0% {
 			opacity: 0;
@@ -70,8 +74,12 @@
 			opacity: 1;
 		}
 	}
-</style>
-<div
-  class="btn bolder light { true ? 'lighter red' : ''}"
-  class:bold={true}
->{time}</div>
+	@keyframes opacity2 {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+</style>

example/webpack/main.js

@@ -1,5 +1,4 @@
+import { mount } from 'svelte';
 import App from './App.svelte'
 
-new App({
-  target: document.getElementById('app')
-})
+const app = mount(App, { target: document.getElementById("app") });