Skip to content

Commit 2057e45

Browse files
author
Michael Vurchio
committed
Merge branch 'release/0.1.0'
2 parents 15cab74 + dca623b commit 2057e45

File tree

4 files changed

+468
-2
lines changed

4 files changed

+468
-2
lines changed

‎LICENSE

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2020 micantoine
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

Lines changed: 317 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,317 @@
1-
# svelte-preprocess-cssmodules
2-
Svelte preprocess to generate CSS Modules classname on Svelte components
1+
# Svelte preprocess CSS Modules
2+
3+
Generate CSS Modules classname on Svelte components
4+
5+
```bash
6+
npm install --save-dev svelte-preprocess-cssmodules
7+
```
8+
9+
## Rollup Configuration
10+
11+
To be used with the plugin `rollup-plugin-svelte`.
12+
13+
```js
14+
import svelte from 'rollup-plugin-svelte';
15+
import cssModules from 'svelte-preprocess-cssmodules';
16+
17+
export default {
18+
...
19+
plugins: [
20+
svelte({
21+
preprocess: [
22+
cssModules(),
23+
]
24+
}),
25+
]
26+
...
27+
}
28+
```
29+
30+
## Options
31+
Pass an object of the following properties
32+
33+
| Name | Type | Default | Description |
34+
| ------------- | ------------- | ------------- | ------------- |
35+
| `localIdentName` | `{String}` | `"[local]-[hash:base64:6]"` | A rule using any available token from [webpack interpolateName](https://github.com/webpack/loader-utils#interpolatename) |
36+
| `includePaths` | `{Array}` | `[]` (Any) | An array of paths to be processed |
37+
38+
39+
## Usage on Svelte Component
40+
41+
**On the HTML markup** (not the CSS), Prefix any class name that require CSS Modules by *$style.* => `$style.My_CLASSNAME`
42+
43+
```html
44+
<style>
45+
.red { color: red; }
46+
</style>
47+
48+
<p class="$style.red">My red text</p>
49+
```
50+
51+
The component will be transformed to
52+
53+
```html
54+
<style>
55+
.red-30_1IC { color: red; }
56+
</style>
57+
58+
<p class="red-30_1IC">My red text</p>
59+
```
60+
61+
### Replace only the required class
62+
63+
CSS Modules classname are generated to the html class values prefixed by `$style.`. The rest is left untouched.
64+
65+
*Before*
66+
67+
```html
68+
<style>
69+
.blue { color: blue; }
70+
.red { color: red; }
71+
.text-center { text-align: center; }
72+
</style>
73+
74+
<p class="blue text-center">My blue text</p>
75+
<p class="$style.red text-center">My red text</p>
76+
```
77+
78+
*After*
79+
80+
```html
81+
<style>
82+
.blue { color: blue;
83+
}
84+
.red-2iBDzf { color: red; }
85+
.text-center { text-align: center; }
86+
</style>
87+
88+
<p class="blue text-center">My blue text</p>
89+
<p class="red-2iBDzf text-center">My red text</p>
90+
```
91+
92+
### Remove unspecified class
93+
94+
If a CSS Modules class has no css style attached, it will be removed from the class attribute.
95+
96+
*Before*
97+
98+
```html
99+
<style>
100+
.text-center { text-align: center; }
101+
</style>
102+
103+
<p class="$style.blue text-center">My blue text</p>
104+
```
105+
106+
*After*
107+
108+
```html
109+
<style>
110+
.text-center { text-align: center; }
111+
</style>
112+
113+
<p class="text-center">My blue text</p>
114+
```
115+
116+
### Target any classname format
117+
118+
kebab-case or camelCase, name the classes the way you're more comfortable with.
119+
120+
*Before*
121+
122+
```html
123+
<style>
124+
.red { color: red; }
125+
.red-crimson { color: crimson; }
126+
.redMajenta { color: magenta; }
127+
</style>
128+
129+
<span class="$style.red">Red</span>
130+
<span class="$style.red-crimson">Crimson</span>
131+
<span class="$style.redMajenta">Majenta</span>
132+
```
133+
134+
*After*
135+
136+
```html
137+
<style>
138+
.red-2xTdmA { color: red; }
139+
.red-crimson-1lu8Sg { color: crimson; }
140+
.redMajenta-2wdRa3 { color: magenta; }
141+
</style>
142+
143+
<span class="red-2xTdmA">Red</span>
144+
<span class="red-crimson-1lu8Sg">Crimson</span>
145+
<span class="redMajenta-2wdRa3">Majenta</span>
146+
```
147+
148+
## Example
149+
150+
*Rollup Config*
151+
152+
```js
153+
export default {
154+
...
155+
plugins: [
156+
svelte({
157+
preprocess: [
158+
cssModules({
159+
includePaths: ['src'],
160+
localIdentName: '[hash:base64:10]',
161+
}),
162+
]
163+
}),
164+
]
165+
...
166+
}
167+
```
168+
169+
*Svelte Component*
170+
171+
```html
172+
<style>
173+
.modal {
174+
position: fixed;
175+
top: 50%;
176+
left: 50%;
177+
z-index: 10;
178+
width: 400px;
179+
height: 80%;
180+
background-color: #fff;
181+
transform: translateX(-50%) translateY(-50%);
182+
}
183+
184+
section {
185+
flex: 0 1 auto;
186+
flex-direction: column;
187+
display: flex;
188+
height: 100%;
189+
}
190+
header {
191+
padding: 1rem;
192+
font-size: 1.2rem;
193+
font-weight: bold;
194+
border-bottom: 1px solid #d9d9d9;
195+
}
196+
197+
.body {
198+
padding: 1rem;
199+
flex: 1 0 0;
200+
min-height: 0;
201+
max-height: 100%;
202+
overflow: scroll;
203+
-webkit-overflow-scrolling: touch;
204+
}
205+
206+
footer {
207+
padding: 1rem;
208+
text-align: right;
209+
border-top: 1px solid #d9d9d9;
210+
}
211+
button {
212+
padding: .5em 1em;
213+
min-width: 100px;
214+
font-size: .8rem;
215+
font-weight: 600;
216+
background: #fff;
217+
border: 1px solid #ccc;
218+
border-radius: 5px;
219+
}
220+
.cancel {
221+
background-color: #f2f2f2;
222+
}
223+
</style>
224+
225+
<div class="$style.modal">
226+
<section>
227+
<header>My Modal Title</header>
228+
<div class="$style.body">
229+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
230+
</div>
231+
<footer>
232+
<button>Ok</button>
233+
<button class="$style.cancel">Cancel</button>
234+
</footer>
235+
</section>
236+
</div>
237+
```
238+
239+
*Final html code generated by svelte*
240+
241+
```html
242+
<style>
243+
._329TyLUs9c {
244+
position: fixed;
245+
top: 50%;
246+
left: 50%;
247+
z-index: 10;
248+
width: 400px;
249+
height: 80%;
250+
background-color: #fff;
251+
transform: translateX(-50%) translateY(-50%);
252+
}
253+
254+
section {
255+
flex: 0 1 auto;
256+
flex-direction: column;
257+
display: flex;
258+
height: 100%;
259+
}
260+
header {
261+
padding: 1rem;
262+
font-size: 1.2rem;
263+
font-weight: bold;
264+
border-bottom: 1px solid #d9d9d9;
265+
}
266+
267+
._1HPUBXtzNG {
268+
padding: 1rem;
269+
flex: 1 0 0;
270+
min-height: 0;
271+
max-height: 100%;
272+
overflow: scroll;
273+
-webkit-overflow-scrolling: touch;
274+
}
275+
276+
footer {
277+
padding: 1rem;
278+
text-align: right;
279+
border-top: 1px solid #d9d9d9;
280+
}
281+
button {
282+
padding: .5em 1em;
283+
min-width: 100px;
284+
font-size: .8rem;
285+
font-weight: 600;
286+
background: #fff;
287+
border: 1px solid #ccc;
288+
border-radius: 5px;
289+
}
290+
._1xhJxRwWs7 {
291+
background-color: #f2f2f2;
292+
}
293+
</style>
294+
295+
<div class="_329TyLUs9c">
296+
<section class="svelte-1s2ez3w">
297+
<header class="svelte-1s2ez3w">My Modal Title</header>
298+
<div class="_1HPUBXtzNG">
299+
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</p>
300+
</div>
301+
<footer class="svelte-1s2ez3w">
302+
<button class="svelte-1s2ez3w">Ok</button>
303+
<button class="_1xhJxRwWs7 svelte-1s2ez3w">Cancel</button>
304+
</footer>
305+
</section>
306+
</div>
307+
```
308+
309+
**Note:** The svelte scoped classes are still being applied to the html elements with a style.
310+
311+
## Why CSS Modules on Svelte
312+
313+
While the native CSS Scoped system should be largely enough to avoid class conflict, it could find its limit when working on a hybrid project. On a non full javascript front-end where Svelte is used to enhance pieces of the page, the thought on the class naming is no less different than the one on a regular html page. For example, on the modal component above, It would have been wiser to namespace some of the classes such as `.modal-body` and `.modal-cancel` to avoid inheriting styles from other `.body` and `.cancel`.
314+
315+
## License
316+
317+
[MIT](https://opensource.org/licenses/MIT)

0 commit comments

Comments
 (0)