svelte-preprocess-css-mods

Successor of svelte-preprocess-cssmodules

Installation

npx nypm add -D svelte-preprocess-css-mods

Usage

Config

// svelte.config.js

import { cssModules } from 'svelte-preprocess-css-mods';

export default {
    preprocess: cssModules({/* options */}),
};

See options for more information.

Svelte

<!-- App.svelte -->
<script>
    import styles from './App.module.css';
</script>

<div class={styles.container}>
    <h1 class={styles.title}>Hello World!</h1>
</div>

/* App.module.css */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

.title {
    color: red;
}

get converted into:

<script>
    const styles = {
        container: 'App_module_container',
        title: 'App_module_title',
    };
</script>

<div class={styles.container}>
    <h1 class={styles.title}>Hello World!</h1>
</div>

<style>
  .App_module_container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .App_module_title {
    color: red;
  }
</style>

Related Works

• svelte-true-css-modules
• svelte-preprocess-cssmodules
  • I forked this project, but I gave it up

License

MIT