Skip to content

Commit 0c5700c

Browse files
micantoinemicantoine
authored
Merge pull request #11 from micantoine/10-Error-when-import-css-from-node_modules
Error when import css from node modules
2 parents 8c71c58 + cde5480 commit 0c5700c

File tree

6 files changed

+471
-147
lines changed

6 files changed

+471
-147
lines changed

‎README.md

Lines changed: 145 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,6 @@ npm install --save-dev svelte-preprocess-cssmodules
66

77
Generate CSS Modules classname on Svelte components
88

9-
- [Configuration](#configuration)
10-
- [Rollup](#rollup)
11-
- [Webpack](#webpack)
12-
- [Options](#options)
139
- [Use of the *style* tag](#use-of-the-style-tag)
1410
- [Process required class](#process-required-class)
1511
- [Remove unspecified class](#remove-unspecified-class)
@@ -22,147 +18,13 @@ Generate CSS Modules classname on Svelte components
2218
- [kebab-case situation](#kebab-case-situation)
2319
- [Unnamed import](#unnamed-import)
2420
- [Directive and dynamic class](#directive-and-dynamic-class)
21+
- [Configuration](#configuration)
22+
- [Rollup](#rollup)
23+
- [Webpack](#webpack)
24+
- [Options](#options)
2525
- [Code example](#code-example)
2626
- [Why CSS Modules on Svelte](#why-css-modules-on-svelte)
2727

28-
## Configuration
29-
30-
### Rollup
31-
32-
To be used with the plugin [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte).
33-
34-
```js
35-
import svelte from 'rollup-plugin-svelte';
36-
import cssModules from 'svelte-preprocess-cssmodules';
37-
38-
export default {
39-
...
40-
plugins: [
41-
svelte({
42-
preprocess: [
43-
cssModules(),
44-
]
45-
}),
46-
]
47-
...
48-
}
49-
```
50-
51-
### Webpack
52-
53-
To be used with the loader [`svelte-loader`](https://github.com/sveltejs/svelte-loader).
54-
55-
```js
56-
const cssModules = require('svelte-preprocess-cssmodules');
57-
58-
module.exports = {
59-
...
60-
module: {
61-
rules: [
62-
{
63-
test: /\.svelte$/,
64-
exclude: /node_modules/,
65-
use: [
66-
{
67-
loader: 'svelte-loader',
68-
options: {
69-
preprocess: [
70-
cssModules(),
71-
]
72-
}
73-
}
74-
]
75-
}
76-
]
77-
}
78-
...
79-
}
80-
```
81-
82-
### Options
83-
Pass an object of the following properties
84-
85-
| Name | Type | Default | Description |
86-
| ------------- | ------------- | ------------- | ------------- |
87-
| `localIdentName` | `{String}` | `"[local]-[hash:base64:6]"` | A rule using any available token |
88-
| `includePaths` | `{Array}` | `[]` (Any) | An array of paths to be processed |
89-
| `getLocalIdent` | `Function` | `undefined` | Generate the classname by specifying a function instead of using the built-in interpolation |
90-
| `strict` | `{Boolean}` | `false` | When true, an exception is raised when a class is used while not being defined in `<style>`
91-
92-
93-
**`localIdentName`**
94-
95-
Inspired by [webpack interpolateName](https://github.com/webpack/loader-utils#interpolatename), here is the list of tokens:
96-
97-
- `[local]` the targeted classname
98-
- `[ext]` the extension of the resource
99-
- `[name]` the basename of the resource
100-
- `[path]` the path of the resource
101-
- `[folder]` the folder the resource is in
102-
- `[contenthash]` or `[hash]` *(they are the same)* the hash of the resource content (by default it's the hex digest of the md4 hash)
103-
- `[<hashType>:contenthash:<digestType>:<length>]` optionally one can configure
104-
- other hashTypes, i. e. `sha1`, `md4`, `md5`, `sha256`, `sha512`
105-
- other digestTypes, i. e. `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
106-
- and `length` the length in chars
107-
108-
**`getLocalIdent`**
109-
110-
Customize the creation of the classname instead of relying on the built-in function.
111-
112-
```ts
113-
function getLocalIdent(
114-
context: {
115-
context: string, // the context path
116-
resourcePath: string, // path + filename
117-
},
118-
localIdentName: {
119-
template: string, // the template rule
120-
interpolatedName: string, // the built-in generated classname
121-
},
122-
className: string, // the classname string
123-
content: {
124-
markup: string, // the markup content
125-
style: string, // the style content
126-
}
127-
): string {
128-
return `your_generated_classname`;
129-
}
130-
```
131-
132-
*Example of use*
133-
134-
```bash
135-
# Directory
136-
SvelteApp
137-
└─ src
138-
├─ App.svelte
139-
└─ components
140-
└─ Button.svelte
141-
```
142-
```html
143-
<!-- Button.svelte -->
144-
<button class="$style.red">Ok</button>
145-
146-
<style>
147-
.red { background-color: red; }
148-
</style>
149-
```
150-
151-
```js
152-
// Preprocess config
153-
...
154-
preprocess: [
155-
cssModules({
156-
localIdentName: '[path][name]__[local]',
157-
getLocalIdent: (context, { interpolatedName }) => {
158-
return interpolatedName.toLowerCase().replace('src_', '');
159-
// svelteapp_components_button__red;
160-
}
161-
})
162-
],
163-
...
164-
```
165-
16628
## Use of the *style* tag
16729

16830
Write css rules inside `<style>` and prefix **on the HTML markup** any classname that require CSS Modules by `$style` => `$style.MY_CLASSNAME` .
@@ -325,7 +187,9 @@ To remove verbosity the shorthand `$.MY_CLASSNAME` can be used instead of the re
325187

326188
## Import styles from an external stylesheet
327189

328-
Alternatively, styles can be created into an external file and imported onto a svelte component from the `<script>` tag. The name referring to the import can then be used in the markup targetting any existing classname of the stylesheet.
190+
Alternatively, styles can be created into an external file and imported onto a svelte component from the `<script>` tag. The name referring to the import can then be used in the markup targetting any existing classname of the stylesheet.
191+
192+
**Note:** *The import option is only meant for stylesheets relative to the component. You will have to set your own bundler in order to import *node_modules* packages css files.*
329193

330194
```css
331195
/** style.css **/
@@ -532,6 +396,144 @@ Use the Svelte's builtin `class:` directive or javascript template to display a
532396
<p class={isSuccess ? success : error}>Notice</p>
533397
```
534398

399+
## Configuration
400+
401+
### Rollup
402+
403+
To be used with the plugin [`rollup-plugin-svelte`](https://github.com/sveltejs/rollup-plugin-svelte).
404+
405+
```js
406+
import svelte from 'rollup-plugin-svelte';
407+
import cssModules from 'svelte-preprocess-cssmodules';
408+
409+
export default {
410+
...
411+
plugins: [
412+
svelte({
413+
preprocess: [
414+
cssModules(),
415+
]
416+
}),
417+
]
418+
...
419+
}
420+
```
421+
422+
### Webpack
423+
424+
To be used with the loader [`svelte-loader`](https://github.com/sveltejs/svelte-loader).
425+
426+
```js
427+
const cssModules = require('svelte-preprocess-cssmodules');
428+
429+
module.exports = {
430+
...
431+
module: {
432+
rules: [
433+
{
434+
test: /\.svelte$/,
435+
exclude: /node_modules/,
436+
use: [
437+
{
438+
loader: 'svelte-loader',
439+
options: {
440+
preprocess: [
441+
cssModules(),
442+
]
443+
}
444+
}
445+
]
446+
}
447+
]
448+
}
449+
...
450+
}
451+
```
452+
453+
### Options
454+
Pass an object of the following properties
455+
456+
| Name | Type | Default | Description |
457+
| ------------- | ------------- | ------------- | ------------- |
458+
| `localIdentName` | `{String}` | `"[local]-[hash:base64:6]"` | A rule using any available token |
459+
| `includePaths` | `{Array}` | `[]` (Any) | An array of paths to be processed |
460+
| `getLocalIdent` | `Function` | `undefined` | Generate the classname by specifying a function instead of using the built-in interpolation |
461+
| `strict` | `{Boolean}` | `false` | When true, an exception is raised when a class is used while not being defined in `<style>`
462+
463+
464+
**`localIdentName`**
465+
466+
Inspired by [webpack interpolateName](https://github.com/webpack/loader-utils#interpolatename), here is the list of tokens:
467+
468+
- `[local]` the targeted classname
469+
- `[ext]` the extension of the resource
470+
- `[name]` the basename of the resource
471+
- `[path]` the path of the resource
472+
- `[folder]` the folder the resource is in
473+
- `[contenthash]` or `[hash]` *(they are the same)* the hash of the resource content (by default it's the hex digest of the md4 hash)
474+
- `[<hashType>:contenthash:<digestType>:<length>]` optionally one can configure
475+
- other hashTypes, i. e. `sha1`, `md4`, `md5`, `sha256`, `sha512`
476+
- other digestTypes, i. e. `hex`, `base26`, `base32`, `base36`, `base49`, `base52`, `base58`, `base62`, `base64`
477+
- and `length` the length in chars
478+
479+
**`getLocalIdent`**
480+
481+
Customize the creation of the classname instead of relying on the built-in function.
482+
483+
```ts
484+
function getLocalIdent(
485+
context: {
486+
context: string, // the context path
487+
resourcePath: string, // path + filename
488+
},
489+
localIdentName: {
490+
template: string, // the template rule
491+
interpolatedName: string, // the built-in generated classname
492+
},
493+
className: string, // the classname string
494+
content: {
495+
markup: string, // the markup content
496+
style: string, // the style content
497+
}
498+
): string {
499+
return `your_generated_classname`;
500+
}
501+
```
502+
503+
*Example of use*
504+
505+
```bash
506+
# Directory
507+
SvelteApp
508+
└─ src
509+
├─ App.svelte
510+
└─ components
511+
└─ Button.svelte
512+
```
513+
```html
514+
<!-- Button.svelte -->
515+
<button class="$style.red">Ok</button>
516+
517+
<style>
518+
.red { background-color: red; }
519+
</style>
520+
```
521+
522+
```js
523+
// Preprocess config
524+
...
525+
preprocess: [
526+
cssModules({
527+
localIdentName: '[path][name]__[local]',
528+
getLocalIdent: (context, { interpolatedName }) => {
529+
return interpolatedName.toLowerCase().replace('src_', '');
530+
// svelteapp_components_button__red;
531+
}
532+
})
533+
],
534+
...
535+
```
536+
535537
## Code Example
536538

537539
*Rollup Config*

‎example/webpack/App.svelte

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script>
2+
import 'swiper/swiper.min.css';
23
import Time from './components/Time.svelte';
34
import css from './app.css';
45
import { success, successSmall } from './app2.css';

0 commit comments

Comments
 (0)