😅 fix selectory bugs, improve support for testing values in varsity

Author: tomhodgins

README.md

@@ -247,4 +247,8 @@ Once the plugin is aware of an element to watch, and the unique name of that ele
 - `--example-children`
 - `--example-value`
 
-Test available at: [test/varsity.html](http://tomhodgins.github.io/cssplus/test/varsity.html)
+Test available at: [test/varsity.html](http://tomhodgins.github.io/cssplus/test/varsity.html)
+
+## Demos
+
+For CSSplus demos, check out the [CSSPlus demos collection](http://codepen.io/collection/XLbNKz/) on Codepen.

cursory.js

@@ -2,7 +2,7 @@
 /*
 
 # Cursory
-## version 0.0.3
+## version 0.0.4
 
 Cursory is a CSS reprocessor that makes the following JS values available as CSS variables:
 

index.html

@@ -195,7 +195,7 @@ <h2 id=plugins>Plugins</h2>
   <li><a href=#varsity><strong>Varsity:</strong> scoped variables</a>
 </ul>
 
-<h3 id=cursory>Cursory <span>v0.0.3</span></h3>
+<h3 id=cursory>Cursory <span>v0.0.4</span></h3>
 <p>Cursory is a CSS reprocessor that makes the following JS values available as CSS variables:</p>
 <ul>
   <li><code>cursorX</code>
@@ -230,7 +230,7 @@ <h3 id=cursory>Cursory <span>v0.0.3</span></h3>
 }</code></pre>
 <p>Test available at: <a href=test/cursory.html>test/cursory.html</a></p>
 
-<h3 id=scrollery>Scrollery <span>v0.0.3</span></h3>
+<h3 id=scrollery>Scrollery <span>v0.0.4</span></h3>
 <p>Scrollery is a CSS reprocessor that makes the following JS values available as CSS variables for any element you tell the plugin to watch:</p>
 <ul>
   <li><code>scrollWidth</code>
@@ -253,7 +253,7 @@ <h3 id=scrollery>Scrollery <span>v0.0.3</span></h3>
 </ul>
 <p>Test available at: <a href=test/scrollery.html>test/scrollery.html</a></p>
 
-<h3 id=selectory>Selectory <span>v0.0.3</span></h3>
+<h3 id=selectory>Selectory <span>v0.0.4</span></h3>
 <p>Selectory is a CSS reprocessor that resolves selectors using JS. This plugin will read CSS selectors that end with a <code>[test]</code> attribute and use JavaScript to determine whether or not to apply that style to elements matching the other part of that selector. For example, the JS test <code>1 == 1</code> will always resolve to <code>true</code>, so a selector written for <code>div[test="1 == 1"] {}</code> will always apply to each <code>div</code> element.</p>
 <p>By default, Selectory will reprocess selectors by watching the following events:</p>
 <ul>
@@ -286,7 +286,7 @@ <h3 id=selectory>Selectory <span>v0.0.3</span></h3>
 <p>It is limited what selectors you can use with Selectory, things like <code>:hover</code> and pseudo-classes tend not to work as well. As well the parsing only allows for 1 test per selector, and complex selectors may not work as intended. Using <code>selector[test=""] {}</code> with a simple selector is best.</p>
 <p>Test available at: <a href=test/selectory.html>test/selectory.html</a></p>
 
-<h3 id=varsity>Varsity <span>v0.0.3</span></h3>
+<h3 id=varsity>Varsity <span>v0.0.4</span></h3>
 <p>Varsity is a CSS reprocessor that makes the following JS values available as CSS variables for any element you tell the plugin to watch:</p>
 <ul>
   <li><code>offsetWidth</code>

scrollery.js

@@ -2,7 +2,7 @@
 /*
 
 # Scrollery
-## version 0.0.3
+## version 0.0.4
 
 Scrollery is a CSS reprocessor that makes the following JS values available as CSS variables for any element you tell the plugin to watch:
 

selectory.js

@@ -2,7 +2,7 @@
 /*
 
 # Selectory
-## version 0.0.3
+## version 0.0.4
 
 Selectory is a CSS reprocessor that resolves selectors using JS. This plugin will read CSS selectors that end with a `[test]` attribute and use JavaScript to determine whether or not to apply that style to elements matching the other part of that selector. For example, the JS test `1 == 1` will always resolve to `true`, so a selector written for `div[test="1 == 1"] {}` will always apply to each `div` element.
 
@@ -64,8 +64,9 @@ License: MIT
     // For each stylesheet
     Array.from(document.styleSheets, sheet => {
 
+
       // For each rule
-      Array.from(sheet.cssRules, rule => {
+      sheet.cssRules && Array.from(sheet.cssRules, rule => {
 
         // Remember selector and rule text
         let selector = rule.selectorText
@@ -81,7 +82,7 @@ License: MIT
         ruleText = ruleText.replace(/.*\{(.*)\}/, (string, match) => {return match})
 
         // If `[test=` is present anywhere in the selector
-        if (selector.indexOf('[test=') !== -1) {
+        if (selector && selector.indexOf('[test=') !== -1) {
 
           // Extract the full selector name and test
           selector.replace(/^(.*)\[test=(?:"(.*)"|'(.*)')\]/i, (string, selectorText, test) => {
@@ -102,15 +103,15 @@ License: MIT
 
                 var newSelector = selector.replace(/^(.*\[)(test=(?:".*"|'.*'))(\])/i, (string, before, test, after) => {
 
-                  return before + attr + after
+                  return before + attr + '="' + i + '"' + after
 
                 })
 
                 // If true, add a new attribute to our element
                 tag.setAttribute(attr, i)
 
                 // And add our new attribute to the selector list for that rule
-                const comma = selectorList.length == 0 ? '' : ',\n'
+                const comma = selectorList.length == 0 ? '' : ',\n  '
                 selectorList += comma + newSelector
 
               }

varsity.js

@@ -107,9 +107,9 @@ License: MIT
       + `\n  --${name}-offsetLeft: ${tag.offsetLeft};`
       + `\n  --${name}-offsetTop: ${tag.offsetTop};`
       + `\n  --${name}-aspect-ratio: ${tag.offsetWidth/tag.offsetHeight};`
-      + `\n  --${name}-characters: ${tag.innerHTML.length || (tag.value && tag.value.length) || 0};`
+      + `\n  --${name}-characters: ${tag.textContent.length || (tag.value && tag.value.length) || 0};`
       + `\n  --${name}-children: ${tag.getElementsByTagName('*').length};`
-      + `\n  --${name}-value: ${(tag.value || '')};`
+      + `\n  --${name}-value: ${(tag.value && tag.value.length) || '')};`
     })
 
     // Populate style tag with current CSS string