This repository was archived by the owner on Sep 25, 2024. It is now read-only.
File tree Expand file tree Collapse file tree 1 file changed +82
-0
lines changed Expand file tree Collapse file tree 1 file changed +82
-0
lines changed Original file line number Diff line number Diff line change 1+ # svelte-preprocess-css-modules
2+
3+ Successor of [ svelte-preprocess-cssmodules] ( https://github.com/micantoine/svelte-preprocess-cssmodules )
4+
5+ ## Installation
6+
7+ ``` bash
8+ npx nypm add -D svelte-preprocess-css-modules
9+ ```
10+
11+ ## Usage
12+
13+ ### Config
14+
15+ ``` javascript
16+ // svelte.config.js
17+
18+ import cssModules from ' svelte-preprocess-css-modules' ;
19+
20+ export default {
21+ preprocess: cssModules ({/* options */ }),
22+ };
23+ ```
24+
25+ See [ options] ( ./src/options.ts ) for more information.
26+
27+ ### Svelte
28+
29+ ``` svelte
30+ <!-- App.svelte -->
31+ <script>
32+ import styles from './App.module.css';
33+ </script>
34+
35+ <div class={styles.container}>
36+ <h1 class={styles.title}>Hello World!</h1>
37+ </div>
38+ ```
39+
40+ ``` css
41+ /* App.module.css */
42+ .container {
43+ display : flex ;
44+ justify-content : center ;
45+ align-items : center ;
46+ }
47+
48+ .title {
49+ color : red ;
50+ }
51+ ```
52+
53+ get converted into:
54+
55+ ``` svelte
56+ <script>
57+ const styles = {
58+ container: 'App_module_container',
59+ title: 'App_module_title',
60+ };
61+ </script>
62+
63+ <div class={styles.container}>
64+ <h1 class={styles.title}>Hello World!</h1>
65+ </div>
66+
67+ <style>
68+ .App_module_container {
69+ display: flex;
70+ justify-content: center;
71+ align-items: center;
72+ }
73+
74+ .App_module_title {
75+ color: red;
76+ }
77+ </style>
78+ ```
79+
80+ ## License
81+
82+ [ MIT] ( ./LICENSE )
You can’t perform that action at this time.
0 commit comments