jss-plugin-rule-value-function - npm Package Compare versions

Comparing version 10.0.0-alpha.11 to 10.0.0-alpha.12

dist/jss-plugin-rule-value-function.bundle.js

@@ -282,3 +282,3 @@ var global$1 = (typeof global !== "undefined" ? global :
 
-    if (isEmpty && !isDefined) return this; // We are going to remove this value.
+    if (isEmpty && !isDefined && !force) return this; // We are going to remove this value.
 
@@ -581,2 +581,17 @@ var remove = isEmpty && isDefined;
 var refRegExp = /\$([\w-]+)/;
+
+var findReferencedKeyframe = function findReferencedKeyframe(val, keyframes) {
+  if (typeof val === 'string') {
+    var ref = refRegExp.exec(val);
+    if (!ref) return val;
+
+    if (ref[1] in keyframes) {
+      return val.replace(ref[0], keyframes[ref[1]]);
+    }
+
+    warning(false, "[JSS] Referenced keyframes rule \"" + ref[1] + "\" is not defined.");
+  }
+
+  return val;
+};
 /**
@@ -586,20 +601,15 @@ * Replace the reference for a animation name.
 
+
 var replaceRef = function replaceRef(style, prop, keyframes) {
   var value = style[prop];
+  var refKeyframe = findReferencedKeyframe(value, keyframes);
 
-  if (typeof value === 'string') {
-    var ref = refRegExp.exec(value);
-    if (!ref) return;
-
-    if (ref[1] in keyframes) {
-      style[prop] = value.replace(ref[0], keyframes[ref[1]]);
-    } else {
-      warning(false, "[JSS] Referenced keyframes rule \"" + ref[1] + "\" is not defined.");
-    }
+  if (refKeyframe !== value) {
+    style[prop] = refKeyframe;
   }
 };
 
-var pluginKeyframesRule = {
+var plugin = {
   onCreateRule: function onCreateRule(key, frames, options) {
-    return keyRegExp$1.test(key) ? new KeyframesRule(key, frames, options) : null;
+    return typeof key === 'string' && keyRegExp$1.test(key) ? new KeyframesRule(key, frames, options) : null;
   },
@@ -612,2 +622,20 @@ // Animation name ref replacer.
     return style;
+  },
+  onChangeValue: function onChangeValue(val, prop, rule) {
+    var sheet = rule.options.sheet;
+
+    if (!sheet) {
+      return val;
+    }
+
+    switch (prop) {
+      case 'animation':
+        return findReferencedKeyframe(val, sheet.keyframes);
+
+      case 'animation-name':
+        return findReferencedKeyframe(val, sheet.keyframes);
+
+      default:
+        return val;
+    }
   }
@@ -791,3 +819,3 @@ };
 };
-var plugins = [pluginStyleRule, pluginConditionalRule, pluginKeyframesRule, pluginKeyframeRule, pluginFontFaceRule, pluginViewportRule, pluginSimpleRule];
+var plugins = [pluginStyleRule, pluginConditionalRule, plugin, pluginKeyframeRule, pluginFontFaceRule, pluginViewportRule, pluginSimpleRule];
 var defaultUpdateOptions = {
@@ -991,10 +1019,8 @@ process: true
       // We need to run the plugins in case new `style` relies on syntax plugins.
-      plugins$$1.onProcessStyle(styleRule.style, styleRule, sheet); // Update, remove and add props.
+      plugins$$1.onProcessStyle(styleRule.style, styleRule, sheet); // Update and add props.
 
       for (var prop in styleRule.style) {
         var nextValue = styleRule.style[prop];
-        var prevValue = style[prop]; // Since we use `force` option, we should optimize the `.prop()` call
-        // for cases where the primive value has not changed.
-        // It can't do that check, because it doesn't have the previous `style`
-        // object.
+        var prevValue = style[prop]; // We need to use `force: true` because `rule.style` has been updated during onUpdate hook, so `rule.prop()` will not update the CSSOM rule.
+        // We do this comparison to avoid unneeded `rule.prop()` calls, since we have the old `style` object here.
 
@@ -1004,2 +1030,13 @@ if (nextValue !== prevValue) {
         }
+      } // Remove props.
+
+
+      for (var _prop in style) {
+        var _nextValue = styleRule.style[_prop];
+        var _prevValue = style[_prop]; // We need to use `force: true` because `rule.style` has been updated during onUpdate hook, so `rule.prop()` will not update the CSSOM rule.
+        // We do this comparison to avoid unneeded `rule.prop()` calls, since we have the old `style` object here.
+
+        if (_nextValue == null && _nextValue !== _prevValue) {
+          styleRule.prop(_prop, null, forceUpdateOptions);
+        }
       }
@@ -1970,3 +2007,3 @@ }
     this.id = instanceCounter++;
-    this.version = "10.0.0-alpha.11";
+    this.version = "10.0.0-alpha.12";
     this.plugins = new PluginsRegistry();
@@ -2200,6 +2237,7 @@ this.options = {
     onProcessStyle: function onProcessStyle(style, rule) {
-      // We don't ned to extract functions on each style update, since this can
-      // happen only one.
+      // We need to extract function values from the declaration, so that we can keep core unaware of them.
+      // We need to do that only once.
+      // We don't need to extract functions on each style update, since this can happen only once.
       // We don't support function values inside of function rules.
-      if (fnValuesNs in rule) return style;
+      if (fnValuesNs in rule || fnRuleNs in rule) return style;
       var fnValues = {};
@@ -2206,0 +2244,0 @@

dist/jss-plugin-rule-value-function.cjs.js

@@ -19,6 +19,7 @@ 'use strict';
     onProcessStyle: function onProcessStyle(style, rule) {
-      // We don't ned to extract functions on each style update, since this can
-      // happen only one.
+      // We need to extract function values from the declaration, so that we can keep core unaware of them.
+      // We need to do that only once.
+      // We don't need to extract functions on each style update, since this can happen only once.
       // We don't support function values inside of function rules.
-      if (fnValuesNs in rule) return style;
+      if (fnValuesNs in rule || fnRuleNs in rule) return style;
       var fnValues = {};
@@ -25,0 +26,0 @@

dist/jss-plugin-rule-value-function.esm.js

@@ -15,6 +15,7 @@ import { createRule } from 'jss';
     onProcessStyle: function onProcessStyle(style, rule) {
-      // We don't ned to extract functions on each style update, since this can
-      // happen only one.
+      // We need to extract function values from the declaration, so that we can keep core unaware of them.
+      // We need to do that only once.
+      // We don't need to extract functions on each style update, since this can happen only once.
       // We don't support function values inside of function rules.
-      if (fnValuesNs in rule) return style;
+      if (fnValuesNs in rule || fnRuleNs in rule) return style;
       var fnValues = {};
@@ -21,0 +22,0 @@

dist/jss-plugin-rule-value-function.js

@@ -19,6 +19,7 @@ (function (global, factory) {
       onProcessStyle: function onProcessStyle(style, rule) {
-        // We don't ned to extract functions on each style update, since this can
-        // happen only one.
+        // We need to extract function values from the declaration, so that we can keep core unaware of them.
+        // We need to do that only once.
+        // We don't need to extract functions on each style update, since this can happen only once.
         // We don't support function values inside of function rules.
-        if (fnValuesNs in rule) return style;
+        if (fnValuesNs in rule || fnRuleNs in rule) return style;
         var fnValues = {};
@@ -25,0 +26,0 @@

dist/jss-plugin-rule-value-function.min.js

@@ -1,1 +0,1 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("jss")):"function"==typeof define&&define.amd?define(["exports","jss"],n):n((e=e||self).jssPluginRuleValueFunction={},e.jss)}(this,function(e,n){"use strict";var t=Date.now(),r="fnValues"+t,o="fnStyle"+ ++t;e.default=function(){return{onCreateRule:function(e,t,r){if("function"!=typeof t)return null;var u=n.createRule(e,{},r);return u[o]=t,u},onProcessStyle:function(e,n){if(r in n)return e;var t={};for(var o in e){var u=e[o];"function"==typeof u&&(delete e[o],t[o]=u)}return n[r]=t,e},onUpdate:function(e,n,t,u){var f=n,i=f[o];i&&(f.style=i(e));var s=f[r];if(s)for(var a in s)f.prop(a,s[a](e),u)}}},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports,require("jss")):"function"==typeof define&&define.amd?define(["exports","jss"],n):n((e=e||self).jssPluginRuleValueFunction={},e.jss)}(this,function(e,n){"use strict";var t=Date.now(),r="fnValues"+t,o="fnStyle"+ ++t;e.default=function(){return{onCreateRule:function(e,t,r){if("function"!=typeof t)return null;var u=n.createRule(e,{},r);return u[o]=t,u},onProcessStyle:function(e,n){if(r in n||o in n)return e;var t={};for(var u in e){var f=e[u];"function"==typeof f&&(delete e[u],t[u]=f)}return n[r]=t,e},onUpdate:function(e,n,t,u){var f=n,i=f[o];i&&(f.style=i(e));var s=f[r];if(s)for(var a in s)f.prop(a,s[a](e),u)}}},Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "jss-plugin-rule-value-function",
   "description": "JSS plugin for function value and rule syntax",
-  "version": "10.0.0-alpha.11",
+  "version": "10.0.0-alpha.12",
   "license": "MIT",
@@ -48,5 +48,5 @@ "homepage": "https://cssinjs.org/",
     "@babel/runtime": "^7.3.1",
-    "jss": "10.0.0-alpha.11"
+    "jss": "10.0.0-alpha.12"
   },
-  "gitHead": "79343bda7df92609218aea1c9907297051cfc6ed"
+  "gitHead": "e6bf06abb8440633e1a0b332632d6d382522e20e"
 }

readme.md

@@ -12,3 +12,3 @@ # jss-plugin-rule-value-function
 
-See our website [jss-plugin-rule-value-function](https://cssinjs.org/jss-plugin-rule-value-function?v=v10.0.0-alpha.11) for more information.
+See our website [jss-plugin-rule-value-function](https://cssinjs.org/jss-plugin-rule-value-function?v=v10.0.0-alpha.12) for more information.
 
@@ -15,0 +15,0 @@ ## Install

src/function-values.test.js

@@ -363,2 +363,64 @@ /* eslint-disable no-underscore-dangle */
 
+  describe('keyframe names', () => {
+    it('should work with animation-name', () => {
+      const sheet = jss.createStyleSheet({
+        '@keyframes animateIn': {},
+
+        '@keyframes animateOut': {},
+
+        a: {'animation-name': ({name}) => name}
+      })
+
+      sheet.update({name: '$animateIn'})
+
+      expect(sheet.toString()).to.be(stripIndent`
+        @keyframes keyframes-animateIn-id {}
+        @keyframes keyframes-animateOut-id {}
+        .a-id {
+          animation-name: keyframes-animateIn-id;
+        }
+      `)
+
+      sheet.update({name: '$animateOut'})
+
+      expect(sheet.toString()).to.be(stripIndent`
+        @keyframes keyframes-animateIn-id {}
+        @keyframes keyframes-animateOut-id {}
+        .a-id {
+          animation-name: keyframes-animateOut-id;
+        }
+      `)
+    })
+
+    it('should work with animation prop', () => {
+      const sheet = jss.createStyleSheet({
+        '@keyframes animateIn': {},
+
+        '@keyframes animateOut': {},
+
+        a: {animation: ({name}) => `${name} 5s`}
+      })
+
+      sheet.update({name: '$animateIn'})
+
+      expect(sheet.toString()).to.be(stripIndent`
+        @keyframes keyframes-animateIn-id {}
+        @keyframes keyframes-animateOut-id {}
+        .a-id {
+          animation: keyframes-animateIn-id 5s;
+        }
+      `)
+
+      sheet.update({name: '$animateOut'})
+
+      expect(sheet.toString()).to.be(stripIndent`
+        @keyframes keyframes-animateIn-id {}
+        @keyframes keyframes-animateOut-id {}
+        .a-id {
+          animation: keyframes-animateOut-id 5s;
+        }
+      `)
+    })
+  })
+
   describe('rule.toJSON()', () => {
@@ -365,0 +427,0 @@ it('should handle function values', () => {

src/index.js

@@ -29,6 +29,7 @@ /* @flow */
     onProcessStyle(style: JssStyle, rule: Rule): JssStyle {
-      // We don't ned to extract functions on each style update, since this can
-      // happen only one.
+      // We need to extract function values from the declaration, so that we can keep core unaware of them.
+      // We need to do that only once.
+      // We don't need to extract functions on each style update, since this can happen only once.
       // We don't support function values inside of function rules.
-      if (fnValuesNs in rule) return style
+      if (fnValuesNs in rule || fnRuleNs in rule) return style
 
@@ -35,0 +36,0 @@ const fnValues = {}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

97250

increased by3.99%

Lines of code

3060

increased by2.65%

Dependency changes

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

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

• Updatedjss@10.0.0-alpha.12