Document ractive.toCSS and Ractive.getCSS

Author: fskreuz

docs/0.8/Ractive.getCSS().md.hbs

@@ -0,0 +1,54 @@
+---
+title: Ractive.getCSS()
+---
+Returns scoped CSS from Ractive subclasses defined at the time of the call.
+
+If used without arguments, it will return the scoped CSS of all subclasses.
+
+```js
+const Subclass1 = Ractive.extend({
+    ...
+    css: 'div{ color: red }'
+    ...
+});
+
+const Subclass2 = Ractive.extend({
+    ...
+    css: 'div{ color: green }'
+    ...
+});
+
+// css contains the scoped versions of div{ color: red } and div{ color: green }
+const css = Ractive.getCSS();
+```
+
+If provided an array of scoping IDs, it will return the scoped CSS of all subclasses whose scoping ID is included in the array.
+
+```js
+// Assuming the generated ID for this subclass is 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
+const Subclass1 = Ractive.extend({
+    ...
+    css: 'div{ color: red }'
+    ...
+});
+
+// Assuming the generated ID for this subclass is 'yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy'
+const Subclass2 = Ractive.extend({
+    ...
+    css: 'div{ color: green }'
+    ...
+});
+
+// css contains the scoped version of div{ color: red } only
+const css = Ractive.getCSS([ 'xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' ]);
+
+```
+
+> ### ractive.getCSS()
+> Returns a `string` containing the scoped CSS of all subclasses.
+>
+> ### ractive.getCSS( scopingIds )
+> Returns a `string` containing the scoped CSS of all subclasses whose scoping ID is included in the array.
+>
+> > #### scopingIds *`Array`*
+> > An array of subclass CSS scoping ids.

docs/0.8/ractive.toCSS().md.hbs

@@ -0,0 +1,29 @@
+---
+title: ractive.toCSS()
+---
+Returns the scoped CSS of the current instance and its descendants.
+
+```js
+const Subclass = Ractive.extend({
+    ...
+    css: 'div{ color: red }'
+    ...
+});
+
+const subclassInstance = new Subclass({...});
+
+// Contains the scoped version of div{ color: red }
+subclassInstance.toCSS();
+```
+
+At the moment, this will not work on a direct instance of Ractive and will log a warning. You can only use this method on an instance of a subclass.
+
+```js
+const ractiveInstance = new Ractive({...});
+
+// This will log a warning.
+ractiveInstance.toCSS();
+```
+
+> ### ractive.toCSS()
+> Returns CSS *`String`*

docs/edge/Ractive.getCSS().md.hbs

@@ -0,0 +1,54 @@
+---
+title: Ractive.getCSS()
+---
+Returns scoped CSS from Ractive subclasses defined at the time of the call.
+
+If used without arguments, it will return the scoped CSS of all subclasses.
+
+```js
+const Subclass1 = Ractive.extend({
+    ...
+    css: 'div{ color: red }'
+    ...
+});
+
+const Subclass2 = Ractive.extend({
+    ...
+    css: 'div{ color: green }'
+    ...
+});
+
+// css contains the scoped versions of div{ color: red } and div{ color: green }
+const css = Ractive.getCSS();
+```
+
+If provided an array of scoping IDs, it will return the scoped CSS of all subclasses whose scoping ID is included in the array.
+
+```js
+// Assuming the generated ID for this subclass is 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx'
+const Subclass1 = Ractive.extend({
+    ...
+    css: 'div{ color: red }'
+    ...
+});
+
+// Assuming the generated ID for this subclass is 'yyyyyyyy-yyyy-yyyy-yyyy-yyyyyyyyyyyy'
+const Subclass2 = Ractive.extend({
+    ...
+    css: 'div{ color: green }'
+    ...
+});
+
+// css contains the scoped version of div{ color: red } only
+const css = Ractive.getCSS([ 'xxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' ]);
+
+```
+
+> ### ractive.getCSS()
+> Returns a `string` containing the scoped CSS of all subclasses.
+>
+> ### ractive.getCSS( scopingIds )
+> Returns a `string` containing the scoped CSS of all subclasses whose scoping ID is included in the array.
+>
+> > #### scopingIds *`Array`*
+> > An array of subclass CSS scoping ids.

docs/edge/ractive.toCSS().md.hbs

@@ -0,0 +1,29 @@
+---
+title: ractive.toCSS()
+---
+Returns the scoped CSS of the current instance and its descendants.
+
+```js
+const Subclass = Ractive.extend({
+    ...
+    css: 'div{ color: red }'
+    ...
+});
+
+const subclassInstance = new Subclass({...});
+
+// Contains the scoped version of div{ color: red }
+subclassInstance.toCSS();
+```
+
+At the moment, this will not work on a direct instance of Ractive and will log a warning. You can only use this method on an instance of a subclass.
+
+```js
+const ractiveInstance = new Ractive({...});
+
+// This will log a warning.
+ractiveInstance.toCSS();
+```
+
+> ### ractive.toCSS()
+> Returns CSS *`String`*

templates/0.8/partials/left-nav.md.hbs

@@ -104,6 +104,7 @@
 		<li>{{{createLink 'ractive.splice()'}}}</li>
 		<li>{{{createLink 'ractive.subtract()'}}}</li>
 		<li>{{{createLink 'ractive.teardown()'}}}</li>
+		<li>{{{createLink 'ractive.toCSS()'}}}</li>
 		<li>{{{createLink 'ractive.toggle()'}}}</li>
 		<li>{{{createLink 'ractive.toHTML()'}}}</li>
 		<li>{{{createLink 'ractive.transition()'}}}</li>
@@ -126,6 +127,7 @@
 	<ul>
 		<li>{{{createLink 'Ractive.escapeKey()'}}}</li>
 		<li>{{{createLink 'Ractive.extend()'}}}</li>
+		<li>{{{createLink 'Ractive.getCSS()'}}}</li>
 		<li>{{{createLink 'Ractive.getNodeInfo()'}}}</li>
 		<li>{{{createLink 'Ractive.joinKeys()'}}}</li>
 		<li>{{{createLink 'Ractive.parse()'}}}</li>

templates/edge/partials/left-nav.md.hbs

@@ -104,6 +104,7 @@
 		<li>{{{createLink 'ractive.splice()'}}}</li>
 		<li>{{{createLink 'ractive.subtract()'}}}</li>
 		<li>{{{createLink 'ractive.teardown()'}}}</li>
+		<li>{{{createLink 'ractive.toCSS()'}}}</li>
 		<li>{{{createLink 'ractive.toggle()'}}}</li>
 		<li>{{{createLink 'ractive.toHTML()'}}}</li>
 		<li>{{{createLink 'ractive.transition()'}}}</li>
@@ -126,6 +127,7 @@
 	<ul>
 		<li>{{{createLink 'Ractive.escapeKey()'}}}</li>
 		<li>{{{createLink 'Ractive.extend()'}}}</li>
+		<li>{{{createLink 'Ractive.getCSS()'}}}</li>
 		<li>{{{createLink 'Ractive.getNodeInfo()'}}}</li>
 		<li>{{{createLink 'Ractive.joinKeys()'}}}</li>
 		<li>{{{createLink 'Ractive.parse()'}}}</li>