From eb17ae6dd70b92b650dc6f4a1c28185e99bcce4d Mon Sep 17 00:00:00 2001
From: Luca Goslar <47827429+lucagoslar@users.noreply.github.com>
Date: Fri, 20 Jan 2023 16:15:11 +0100
Subject: [PATCH 1/3] docs: typescript and css preprocessor usage

---
 README.md | 45 ++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 42 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index f00ae1e..e2f281f 100644
--- a/README.md
+++ b/README.md
@@ -46,6 +46,44 @@ import { styleChildComponent } from "svelte-preprocess-style-child-component";
 }
 ```
 
+### Depending on a CSS preprocessor (e.g. Sass)
+
+```shell
+npm i -D svelte-sequential-preprocessor svelte-preprocess-style-child-component
+```
+
+```js
+import seqPreprocessor from 'svelte-sequential-preprocessor';
+import { styleChildComponent } from "svelte-preprocess-style-child-component";
+...
+{
+  preprocess: seqPreprocessor([preprocess(), styleChildComponent()]), // Ensure styleChildComponent is called after the CSS preprocessor
+}
+```
+
+## Typescript
+
+Create a Typescript declaration file and reference it in your `tsconfig.json`.
+
+```ts
+// e.g. ./types/svelte-preprocess-style-child-component.d.ts
+
+declare namespace svelteHTML {
+  interface HTMLAttributes {
+    part?: string | boolean;
+  }
+}
+```
+
+> **Warning**
+> If modifying your `tsconfig.json`, objects are merged, but arrays are overwritten. Thus, it is necessary to manually merge files and directories referenced in `./.svelte-kit/tsconfig.json`.
+
+```json
+{
+  "include": ["./types/**/*.d.ts"]
+}
+```
+
 ## Additional features
 
 ### Class selector
@@ -116,8 +154,8 @@ It transforms component selectors to global selectors, and passes down the class
 ⬇️
 
 ```html
-<div class={$$props.parts$$?.default$$}>
-  <h1 class={$$props.parts$$?.heading}>Child component!</h1>
+<div class="{$$props.parts$$?.default$$}">
+  <h1 class="{$$props.parts$$?.heading}">Child component!</h1>
 </div>
 ```
 
@@ -148,7 +186,8 @@ It transforms component selectors to global selectors, and passes down the class
   import Child from "./Child.svelte";
 </script>
 
-<Child parts$$={{"default$$":"svelte-child-27gw8r","heading":"svelte-child-qzjtt3"}} />
+<Child
+parts$$={{"default$$":"svelte-child-27gw8r","heading":"svelte-child-qzjtt3"}} />
 
 <style>
   :global(.svelte-child-27gw8r) {

From fe3499480272c3a72b397b8d9aa203e8e6d81e28 Mon Sep 17 00:00:00 2001
From: Luca Goslar <47827429+lucagoslar@users.noreply.github.com>
Date: Fri, 20 Jan 2023 17:46:59 +0100
Subject: [PATCH 2/3] docs: update headline level

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index e2f281f..b978a29 100644
--- a/README.md
+++ b/README.md
@@ -61,7 +61,7 @@ import { styleChildComponent } from "svelte-preprocess-style-child-component";
 }
 ```
 
-## Typescript
+### Typescript
 
 Create a Typescript declaration file and reference it in your `tsconfig.json`.
 

From cddc4d11cb144b5f0ef5d80127b5abeee2930dfb Mon Sep 17 00:00:00 2001
From: Luca Goslar <47827429+lucagoslar@users.noreply.github.com>
Date: Sun, 22 Jan 2023 00:01:57 +0100
Subject: [PATCH 3/3] docs: overwriting css component rules

---
 README.md | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)

diff --git a/README.md b/README.md
index b978a29..1c30721 100644
--- a/README.md
+++ b/README.md
@@ -46,6 +46,24 @@ import { styleChildComponent } from "svelte-preprocess-style-child-component";
 }
 ```
 
+### Overwriting CSS component rules
+
+By default, the specificity of CSS component rules outweighs the specificity of the rules later applied. Anonymous layering can circumvent this behaviour, allowing to overwrite properties.
+
+```svelte
+<!-- Child.svelte -->
+
+<style>
+  @layer {
+    p {
+      color: red;
+    }
+  }
+</style>
+```
+
+For more information on [layering](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer), see the MDN Web Docs.
+
 ### Depending on a CSS preprocessor (e.g. Sass)
 
 ```shell