0.8.0 improved err handling and vendor prefixing

- fixes #7 and #8

CHANGELOG.md

@@ -1,5 +1,15 @@
 # Changelog
 
+## 0.8.0
+
+_2019-10-28_
+
+Error handling has been improved quite a bit (#7). If there is a syntax error in the CSS selector of rule being inserted (only thing that seems to actually throw an error), only that particular rule will fail to insert. Zaftig will log that to the console with error information, but the rest of the style will be used.
+
+Automatic prefixing of CSS selectors (#8). A slightly naive implementation, but it seems to work for the important cases. If a rule fails to insert, and there are any pseudo-elements or pseudo-selectors in the selector, Zaftig will re-attempt to insert by checking each portion of the selector for errors that can be fixed by adding the vendor prefix.
+
+Not a functionality change, but since last version I have added some basic automated tests to prevent obvious bugs from slipping through.
+
 ## 0.7.3
 
 _2019-09-07_

docs/index.js

@@ -81,6 +81,8 @@ z.global`
   .random {
     bo 1 solid white
   }
+
+  ::not-a-real-thing { c red }
 `
 
 window.z = z

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zaftig",
-  "version": "0.7.3",
+  "version": "0.8.0",
   "description": "css for your js",
   "source": "src/index.js",
   "main": "dist/zaftig.es5.min.js",

src/index.js

@@ -129,6 +129,30 @@ const handleTemplate = fn => (parts, ...args) => {
   }
 }
 
+const createSheet = () => document.head.appendChild(document.createElement('style'))
+
+const _testSheet = createSheet()
+const isValidSel = sel => {
+  try {
+    _testSheet.sheet.insertRule(sel + '{}', 0)
+    _testSheet.sheet.deleteRule(0)
+    return true
+  } catch (e) {
+    return false
+  }
+}
+
+const prefixSelector = sel =>
+  sel.replace(/(::?)([a-z-]+)(\()?/gi, (full, pre, name, paran) => {
+    // handle special browser cases
+    if (name == 'placeholder' && vendorPrefix != 'moz') name = 'input-' + name
+    else if (name == 'matches') name = 'any'
+    // skip valid or already prefixed selectors
+    return name[0] == '-' || isValidSel(paran ? full + '.f)' : full)
+      ? full
+      : pre + '-' + vendorPrefix + '-' + name + (paran || '')
+  })
+
 const makeZ = (conf = {}) => {
   const {
     helpers = {},
@@ -141,15 +165,25 @@ const makeZ = (conf = {}) => {
   let { style, debug = false } = conf
   let idCount = 0
 
-  const addToSheet = (sel, body) => {
-    const rule = wrap(sel, body)
-    if (rule) {
-      if (!style) {
-        style = document.head.appendChild(document.createElement('style'))
-        style.id = id
+  const addToSheet = (sel, body, prefix = false) => {
+    const rule = wrap(prefix ? prefixSelector(sel) : sel, body)
+    if (!rule) return
+    if (!style) {
+      style = createSheet()
+      style.id = id
+    }
+    try {
+      // run even in debug mode so that we can detect invalid syntax
+      style.sheet.insertRule(rule, style.sheet.cssRules.length)
+      if (debug) {
+        // rule inserted above is overwritten when textContent is
+        style.textContent += rule
+        if (prefix) console.warn('zaftig: prefixed', sel, '|', prefixSelector(sel))
       }
-      if (debug) style.textContent += rule
-      else style.sheet.insertRule(rule, style.sheet.cssRules.length)
+    } catch (e) {
+      // if insert fails, attempt again if selector can be prefixed
+      if (!prefix && rule.indexOf(':') >= 0) addToSheet(sel, body, true)
+      else console.error('zaftig: insert failed', rule, e)
     }
   }
 

test.js

@@ -159,4 +159,10 @@ h 200
       `@keyframes${fadeIn}{0%{opacity:0;}100%{opacity:1;}}@keyframes${growIn}{from{transform:scale(0);}to{transform:scale(1);}}`
     )
   })
+  o('expected number of cssRules are inserted in debug mode', () => {
+    const z = zaf.new({ debug: true })
+    z.global`h1 { color red }; h2 { color green }`
+    o(z.getSheet().sheet.cssRules.length).equals(2)
+  })
+  // TODO: add tests for selector prefixing and better error handling (JSDOM doesn't seem to give syntax errors like browsers do)
 })