fix: improve the key sanitization, closes #19 (#20)

* fix: improve the key sanitization, needed for v TW 1.6 animation keyframes.

* chore: update deps

* chore: reduce test noise

Author: dobromir-hristov

package.json

@@ -43,7 +43,7 @@
     "chalk": "^2.4.2",
     "fs-extra": "^8.1.0",
     "lodash.reduce": "^4.6.0",
-    "tailwindcss": "^1.1.2",
+    "tailwindcss": "^1.6.0",
     "yargs": "^14.0.0"
   },
   "devDependencies": {

src/converters/Converter.js

@@ -1,5 +1,5 @@
 import { indentWith } from './utils.js'
-import { isObject } from './utils'
+import { isObject, sanitizeKey } from './utils'
 
 const INDENT_BY = 2
 
@@ -220,7 +220,7 @@ class Converter {
    * @private
    */
   _propertyNameSanitizer (property) {
-    property = property.replace('/', '\\/')
+    property = sanitizeKey(property.replace(/\//g, '\\/'))
     return [this.prefix, property].filter(v => v).join('-')
   }
 
@@ -231,6 +231,7 @@ class Converter {
    * @private
    */
   _objectEntryKeySanitizer (key) {
+    key = sanitizeKey(key)
     return this.quotedKeys ? `"${key}"` : key
   }
 }

src/converters/Stylus.js

@@ -11,7 +11,8 @@ class StylusConverter extends Converter {
   }
 
   _objectEntryKeySanitizer (prop) {
-    if (/\d/.test(prop) || this.quotedKeys) return `"${prop}"`
+    prop = super._objectEntryKeySanitizer(prop)
+    if (/\d/.test(prop) && !prop.startsWith("\"")) return `"${prop}"`
     return prop
   }
 }

src/converters/utils.js

@@ -20,3 +20,7 @@ export function resolveConfig (config) {
 export function isObject (value) {
   return !Array.isArray(value) && typeof value === 'object'
 }
+
+export function sanitizeKey (text) {
+  return text.replace(/%/g, '').replace(/, /g, '-')
+}