add specifictyPrefix option to docs

CHANGELOG.md

@@ -5,6 +5,14 @@ If you're searching for older logs, please check the [old changelog](https://git
 
 ## 11.0
 
+### 11.4.0
+| Package | Changes |
+| --- | --- |
+| fela-plugin-theme-value | ([#812](https://github.com/robinweser/fela/pull/812)) Introducing a new plugin to access theme values directly |
+| fela-plugin-pseudo-prefixer<br>fela-plugin-fullscreen-prefixer | ([#814](https://github.com/robinweser/fela/pull/814)) Introducing 2 new plugins: a general pseudo prefixer and a specific `::fullscreen` prefixer built on top of that |
+| fela<br>fela-dom | ([#813](https://github.com/robinweser/fela/pull/813)) Added a new renderer config option called `specificityPrefix` that allows to prefix generated selectors with a global prefix |
+| fela-dom | ([#811](https://github.com/robinweser/fela/pull/811)) Renamed UMD output to `FelaDOM` to match previous versions |
+
 ### 11.3.2
 
 | Package | Changes |

docs/advanced/RendererConfiguration.md

@@ -14,6 +14,7 @@ We might introduce more configuration options with future releases, so be sure t
 | mediaQueryOrder | *(Array?)* |  | An explicit order in which `@media` queries are rendered |
 | sortMediaQuery | *Function* |  | A function with the same signature as sort functions in e.g. `Array.prototype.sort` for dynamically sorting media queries. Maps over an array of media query strings. Overwrites `mediaQueryOrder`. |
 | selectorPrefix | *(string?)* |  | Prepend a static prefix to every generated class and keyframe. It must only consist of `a-zA-Z0-9-_` and start with `a-zA-Z_`. |
+| specificityPrefix | *(string?)* |  | Prepend a static prefix to every CSS selector. It must only consist of `a-zA-Z0-9-_` and start with `a-zA-Z_`. |
 | styleNodeAttributes | *(Object?)* |  | A map of attributes that's passed to the generated style nodes. |
 | filterClassName | *(Function?)* | `cls => cls.indexOf('ad') !== -1` | Filter-function to filter used class names |
 | devMode | *(Boolean?)* | `false` | Enabling development mode for better developer experience. **Make sure to disable devMode in production.** |
@@ -40,6 +41,7 @@ const config = {
     '(min-height: 500px)'
   ],
   selectorPrefix: 'fela_',
+  specificityPrefix: ".App ", 
   styleNodeAttributes: {
     nonce: "XXX"
   },
@@ -101,11 +103,11 @@ console.log(renderToString(renderer))
   }
 }
 
-.fela_a {
+.App .fela_a {
   color: red
 }
 
-.fela_b {
+.App .fela_b {
   font-size: 12px
 }
 ```