jss-plugin-camel-case - npm Package Compare versions

Comparing version 10.0.0-alpha.9 to 10.0.0-alpha.10

dist/jss-plugin-camel-case.bundle.js

@@ -27,3 +27,4 @@ var uppercasePattern = /[A-Z]/g;
   for (var prop in style) {
-    converted[hyphenateStyleName_1(prop)] = style[prop];
+    var key = prop.startsWith('--') ? prop : hyphenateStyleName_1(prop);
+    converted[key] = style[prop];
   }
@@ -59,2 +60,6 @@
   function onChangeValue(value, prop, rule) {
+    if (prop.startsWith('--')) {
+      return value;
+    }
+
     var hyphenatedProp = hyphenateStyleName_1(prop); // There was no camel case in place
@@ -61,0 +66,0 @@

dist/jss-plugin-camel-case.cjs.js

@@ -20,3 +20,4 @@ 'use strict';
   for (var prop in style) {
-    converted[hyphenate(prop)] = style[prop];
+    var key = prop.startsWith('--') ? prop : hyphenate(prop);
+    converted[key] = style[prop];
   }
@@ -52,2 +53,6 @@
   function onChangeValue(value, prop, rule) {
+    if (prop.startsWith('--')) {
+      return value;
+    }
+
     var hyphenatedProp = hyphenate(prop); // There was no camel case in place
@@ -54,0 +59,0 @@

dist/jss-plugin-camel-case.esm.js

@@ -14,3 +14,4 @@ import hyphenate from 'hyphenate-style-name';
   for (var prop in style) {
-    converted[hyphenate(prop)] = style[prop];
+    var key = prop.startsWith('--') ? prop : hyphenate(prop);
+    converted[key] = style[prop];
   }
@@ -46,2 +47,6 @@
   function onChangeValue(value, prop, rule) {
+    if (prop.startsWith('--')) {
+      return value;
+    }
+
     var hyphenatedProp = hyphenate(prop); // There was no camel case in place
@@ -48,0 +53,0 @@

dist/jss-plugin-camel-case.js

@@ -33,3 +33,4 @@ (function (global, factory) {
       for (var prop in style) {
-        converted[hyphenateStyleName_1(prop)] = style[prop];
+        var key = prop.startsWith('--') ? prop : hyphenateStyleName_1(prop);
+        converted[key] = style[prop];
       }
@@ -65,2 +66,6 @@
       function onChangeValue(value, prop, rule) {
+        if (prop.startsWith('--')) {
+          return value;
+        }
+
         var hyphenatedProp = hyphenateStyleName_1(prop); // There was no camel case in place
@@ -67,0 +72,0 @@

dist/jss-plugin-camel-case.min.js

@@ -1,1 +0,1 @@
-!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r(e.jssPluginCamelCase={})}(this,function(e){"use strict";var r=/[A-Z]/g,n=/^ms-/,a={};var t=function(e){return e in a?a[e]:a[e]=e.replace(r,"-$&").toLowerCase().replace(n,"-ms-")};function f(e){var r={};for(var n in e)r[t(n)]=e[n];return e.fallbacks&&(Array.isArray(e.fallbacks)?r.fallbacks=e.fallbacks.map(f):r.fallbacks=f(e.fallbacks)),r}e.default=function(){return{onProcessStyle:function(e){if(Array.isArray(e)){for(var r=0;r<e.length;r++)e[r]=f(e[r]);return e}return f(e)},onChangeValue:function(e,r,n){var a=t(r);return r===a?e:(n.prop(a,e),null)}}},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,r){"object"==typeof exports&&"undefined"!=typeof module?r(exports):"function"==typeof define&&define.amd?define(["exports"],r):r(e.jssPluginCamelCase={})}(this,function(e){"use strict";var r=/[A-Z]/g,n=/^ms-/,t={};var a=function(e){return e in t?t[e]:t[e]=e.replace(r,"-$&").toLowerCase().replace(n,"-ms-")};function f(e){var r={};for(var n in e){r[n.startsWith("--")?n:a(n)]=e[n]}return e.fallbacks&&(Array.isArray(e.fallbacks)?r.fallbacks=e.fallbacks.map(f):r.fallbacks=f(e.fallbacks)),r}e.default=function(){return{onProcessStyle:function(e){if(Array.isArray(e)){for(var r=0;r<e.length;r++)e[r]=f(e[r]);return e}return f(e)},onChangeValue:function(e,r,n){if(r.startsWith("--"))return e;var t=a(r);return r===t?e:(n.prop(t,e),null)}}},Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "jss-plugin-camel-case",
   "description": "JSS plugin that allows to write camel cased rule properties",
-  "version": "10.0.0-alpha.9",
+  "version": "10.0.0-alpha.10",
   "license": "MIT",
@@ -40,3 +40,3 @@ "homepage": "https://cssinjs.org/jss-camel-case",
   "devDependencies": {
-    "jss-plugin-rule-value-function": "10.0.0-alpha.9"
+    "jss-plugin-rule-value-function": "10.0.0-alpha.10"
   },
@@ -46,5 +46,5 @@ "dependencies": {
     "hyphenate-style-name": "^1.0.2",
-    "jss": "10.0.0-alpha.9"
+    "jss": "10.0.0-alpha.10"
   },
-  "gitHead": "c552e8e8c23d2c326a7861e6562e541bf0ced981"
+  "gitHead": "953234ad4e69b2f3d00fb9d683fba24865d2c4dd"
 }

readme.md

 # jss-plugin-camel-case
 
+[![Version](https://img.shields.io/npm/v/jss-plugin-camel-case.svg?style=flat)](https://npmjs.org/package/jss-plugin-camel-case)
+[![License](https://img.shields.io/npm/l/jss-plugin-camel-case.svg?style=flat)](https://github.com/cssinjs/jss/blob/master/LICENSE)
+[![Downlodas](https://img.shields.io/npm/dm/jss-plugin-camel-case.svg?style=flat)](https://npmjs.org/package/jss-plugin-camel-case)
+[![Size](https://img.shields.io/bundlephobia/minzip/jss-plugin-camel-case.svg?style=flat)](https://npmjs.org/package/jss-plugin-camel-case)
+[![Dependencies](https://img.shields.io/david/cssinjs/jss.svg?path=packages%2Fjss-plugin-camel-case&style=flat)](https://npmjs.org/package/jss-plugin-camel-case)
+[![Gitter](https://badges.gitter.im/JoinChat.svg)](https://gitter.im/cssinjs/lobby)
+
 > JSS plugin that allows to write camel cased rule properties
 
-See our website [jss-plugin-camel-case](https://cssinjs.org/jss-plugin-camel-case?v=v10.0.0-alpha.9) for more information.
+See our website [jss-plugin-camel-case](https://cssinjs.org/jss-plugin-camel-case?v=v10.0.0-alpha.10) for more information.
 
@@ -7,0 +14,0 @@ ## Install

src/index.js

@@ -15,3 +15,5 @@ // @flow
   for (const prop in style) {
-    converted[hyphenate(prop)] = style[prop]
+    const key = prop.startsWith('--') ? prop : hyphenate(prop)
+
+    converted[key] = style[prop]
   }
@@ -46,2 +48,6 @@
   function onChangeValue(value, prop, rule) {
+    if (prop.startsWith('--')) {
+      return value
+    }
+
     const hyphenatedProp = hyphenate(prop)
@@ -48,0 +54,0 @@

src/index.test.js

@@ -164,2 +164,46 @@ import expect from 'expect.js'
   })
+
+  describe('css variables', () => {
+    let localJss
+    beforeEach(() => {
+      localJss = create(settings).use(functionPlugin(), camelCase())
+    })
+
+    it('with static css variable', () => {
+      const sheet = localJss.createStyleSheet({
+        a: {
+          '--fontSize': 12
+        }
+      })
+      expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          --fontSize: 12;
+        }
+      `)
+    })
+
+    it('with dynamic css variable', () => {
+      const sheet = localJss.createStyleSheet({
+        a: {
+          '--fontSize': size => size
+        }
+      })
+
+      sheet.update(12)
+
+      expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          --fontSize: 12;
+        }
+      `)
+
+      sheet.update(16)
+
+      expect(sheet.toString()).to.be(stripIndent`
+        .a-id {
+          --fontSize: 16;
+        }
+      `)
+    })
+  })
 })

No alert changes

Improved metrics

Total package byte prevSize

21804

increased by13.29%

Lines of code

464

increased by14.29%

Number of lines in readme file

27

increased by35%

Dependency changes

• + Addedjss@10.0.0-alpha.10(transitive)

• - Removedjss@10.0.0-alpha.9(transitive)

• - Removedsymbol-observable@1.2.0(transitive)

• Updatedjss@10.0.0-alpha.10