Skip to content

Commit 2fecb77

Browse files
committed
Update the readme
1 parent d6ab118 commit 2fecb77

File tree

1 file changed

+14
-10
lines changed

1 file changed

+14
-10
lines changed

README.md

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ npm install --save-dev svelte-preprocess-cssmodules
2323
- [Native](#native)
2424
- [Mixed](#mixed)
2525
- [Scoped](#scoped)
26-
- [Modules over Svelte scoping ?](#modules-over-svelte-scoping)
26+
- [Modules over Svelte scoping?](#modules-over-svelte-scoping)
2727
- [Configuration](#configuration)
2828
- [Rollup](#rollup)
2929
- [Webpack](#webpack)
@@ -722,11 +722,15 @@ Cons:
722722

723723
- does not pass scoped class name to child components
724724

725-
### Modules over Svelte scoping ?
725+
### Modules over Svelte scoping?
726726

727-
- **On a full svelte application**: it is just a question of taste as the default svelte scoping is largely enough. Component styles will never inherit from other styling.
727+
**On a full svelte application**
728728

729-
- **On a hybrid project** (like using svelte to enhance a web page): the default scoping may actually inherits from a class of the same name belonging the style of the page. In that case using CSS Modules to create a unique ID and to avoid class inheritance might be advantageous.
729+
it is just a question of taste as the default svelte scoping is largely enough. Component styles will never inherit from other styling.
730+
731+
**On a hybrid project** (like using svelte to enhance a web page)
732+
733+
the default scoping may actually inherits from a class of the same name belonging the style of the page. In that case using CSS Modules to create a unique ID and to avoid class inheritance might be advantageous.
730734

731735
| | Svelte scoping | Preprocessor Native | Preprocessor Mixed | Preprocessor Scoped |
732736
| -------------| ------------- | ------------- | ------------- | ------------- |
@@ -812,9 +816,9 @@ export default config;
812816

813817
### Svelte Preprocess
814818

815-
Svelte is running the preprocessors by phases, going through all *markup* first, following by *script* and then *style*.
819+
Svelte is running the preprocessors by phases, going through all *markup* first, followed by *script* and then *style*.
816820

817-
The CSS Modules preprocessor is doing all its work on the markup phase via `svelte.parse()` that requires the compoment to be a valid standard svelte component (using vanilla js and vanilla css). It will throw an error if it encounters any other code (such as typescript or sass).
821+
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.
818822

819823
```js
820824
const { typescript, scss } = require('svelte-preprocess');
@@ -823,14 +827,14 @@ const { cssModules } = require('svelte-preprocess-cssmodules');
823827
...
824828
// svelte config: NOT working!
825829
preprocess: [
826-
typescript(), // 2 run on script phase
827-
scss(), // 3 run on style phase
828-
cssModules(), // 1 run on markup phase
830+
typescript(), // 2 run second on script phase
831+
scss(), // 3 run last on style phase
832+
cssModules(), // 1 run first on markup phase
829833
],
830834
...
831835
```
832836

833-
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 from the listed preprocessors.
837+
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 from the list of preprocessors.
834838

835839
```js
836840
const { typescript, scss } = require('svelte-preprocess');

0 commit comments

Comments
 (0)