styletron-engine-atomic - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

dist/browser.es2015.es.js

@@ -186,3 +186,4 @@ import prefixAll from 'inline-style-prefixer/static';
 
-      const key = `${originalKey}${pseudo}:${originalVal}`;
+      const propValPair = `${hyphenateStyleName(originalKey)}:${originalVal}`;
+      const key = `${pseudo}${propValPair}`;
       const cachedId = cache.cache[key];
@@ -206,3 +207,7 @@
           if (prefixedValType === "string" || prefixedValType === "number") {
-            block += `${hyphenateStyleName(prefixedKey)}:${prefixedVal};`;
+            const prefixedPair = `${hyphenateStyleName(prefixedKey)}:${prefixedVal}`;
+
+            if (prefixedPair !== propValPair) {
+              block += `${prefixedPair};`;
+            }
           } else if (Array.isArray(prefixedVal)) {
@@ -212,3 +217,7 @@ const hyphenated = hyphenateStyleName(prefixedKey);
             for (let i = 0; i < prefixedVal.length; i++) {
-              block += `${hyphenated}:${prefixedVal[i]};`;
+              const prefixedPair = `${hyphenated}:${prefixedVal[i]}`;
+
+              if (prefixedPair !== propValPair) {
+                block += `${prefixedPair};`;
+              }
             }
@@ -218,3 +227,3 @@ }
 
-        block = block.slice(0, -1); // Remove trailing semicolon
+        block += propValPair; // ensure original prop/val is last (for hydration)
 
@@ -311,6 +320,18 @@ const id = cache.addValue(key, {
 /* eslint-env browser */
-const STYLES_HYDRATOR = /\.([^{]+){[^}]*;([^}]*?)}/g;
-const KEYFRAMES_HYRDATOR = /@keyframes ([^{]+)\{([^{]+\{[^}]*\})*\}/g;
+const STYLES_HYDRATOR = /\.([^{:]+)(:[^{]+)?{(?:[^}]*;)?([^}]*?)}/g;
+const KEYFRAMES_HYRDATOR = /@keyframes ([^{]+)\{((?:[^{]+\{[^}]*\})*)\}/g;
 const FONT_FACE_HYDRATOR = /@font-face\{font-family:([^;]+);([^}]*)\}/g;
 
+function hydrateStyles(cache, hydrator, css) {
+  let match;
+
+  while (match = hydrator.exec(css)) {
+    const [, id, pseudo, key] = match;
+    const fullKey = pseudo ? `${pseudo}${key}` : key;
+    cache.cache[fullKey] = id; // set cache without triggering side effects
+
+    cache.idGenerator.increment(); // increment id
+  }
+}
+
 function hydrate(cache, hydrator, css) {
@@ -376,4 +397,5 @@ let match;
         const element = opts.hydrate[i];
+        const hydrateType = element.dataset.hydrate;
 
-        if (element.dataset["font-face"]) {
+        if (hydrateType === "font-face") {
           hydrate(this.fontFaceCache, FONT_FACE_HYDRATOR, element.textContent);
@@ -383,3 +405,3 @@ continue;
 
-        if (element.dataset.keyframes) {
+        if (hydrateType === "keyframes") {
           hydrate(this.keyframesCache, KEYFRAMES_HYRDATOR, element.textContent);
@@ -393,3 +415,4 @@ continue;
         cache.key = key;
-        hydrate(cache, STYLES_HYDRATOR, element.textContent);
+        hydrateStyles(cache, STYLES_HYDRATOR, element.textContent);
+        this.styleCache.caches[key] = cache;
       }
@@ -412,3 +435,3 @@ }
   renderFontFace(fontFace) {
-    const key = JSON.stringify(fontFace);
+    const key = declarationsToBlock(fontFace);
     return this.fontFaceCache.addValue(key, fontFace);
@@ -418,3 +441,3 @@ }
   renderKeyframes(keyframes) {
-    const key = JSON.stringify(keyframes);
+    const key = keyframesToBlock(keyframes);
     return this.keyframesCache.addValue(key, keyframes);
@@ -421,0 +444,0 @@ }

dist/browser.es2017.es.js

@@ -186,3 +186,4 @@ import prefixAll from 'inline-style-prefixer/static';
 
-      const key = `${originalKey}${pseudo}:${originalVal}`;
+      const propValPair = `${hyphenateStyleName(originalKey)}:${originalVal}`;
+      const key = `${pseudo}${propValPair}`;
       const cachedId = cache.cache[key];
@@ -206,3 +207,7 @@
           if (prefixedValType === "string" || prefixedValType === "number") {
-            block += `${hyphenateStyleName(prefixedKey)}:${prefixedVal};`;
+            const prefixedPair = `${hyphenateStyleName(prefixedKey)}:${prefixedVal}`;
+
+            if (prefixedPair !== propValPair) {
+              block += `${prefixedPair};`;
+            }
           } else if (Array.isArray(prefixedVal)) {
@@ -212,3 +217,7 @@ const hyphenated = hyphenateStyleName(prefixedKey);
             for (let i = 0; i < prefixedVal.length; i++) {
-              block += `${hyphenated}:${prefixedVal[i]};`;
+              const prefixedPair = `${hyphenated}:${prefixedVal[i]}`;
+
+              if (prefixedPair !== propValPair) {
+                block += `${prefixedPair};`;
+              }
             }
@@ -218,3 +227,3 @@ }
 
-        block = block.slice(0, -1); // Remove trailing semicolon
+        block += propValPair; // ensure original prop/val is last (for hydration)
 
@@ -311,6 +320,18 @@ const id = cache.addValue(key, {
 /* eslint-env browser */
-const STYLES_HYDRATOR = /\.([^{]+){[^}]*;([^}]*?)}/g;
-const KEYFRAMES_HYRDATOR = /@keyframes ([^{]+)\{([^{]+\{[^}]*\})*\}/g;
+const STYLES_HYDRATOR = /\.([^{:]+)(:[^{]+)?{(?:[^}]*;)?([^}]*?)}/g;
+const KEYFRAMES_HYRDATOR = /@keyframes ([^{]+)\{((?:[^{]+\{[^}]*\})*)\}/g;
 const FONT_FACE_HYDRATOR = /@font-face\{font-family:([^;]+);([^}]*)\}/g;
 
+function hydrateStyles(cache, hydrator, css) {
+  let match;
+
+  while (match = hydrator.exec(css)) {
+    const [, id, pseudo, key] = match;
+    const fullKey = pseudo ? `${pseudo}${key}` : key;
+    cache.cache[fullKey] = id; // set cache without triggering side effects
+
+    cache.idGenerator.increment(); // increment id
+  }
+}
+
 function hydrate(cache, hydrator, css) {
@@ -376,4 +397,5 @@ let match;
         const element = opts.hydrate[i];
+        const hydrateType = element.dataset.hydrate;
 
-        if (element.dataset["font-face"]) {
+        if (hydrateType === "font-face") {
           hydrate(this.fontFaceCache, FONT_FACE_HYDRATOR, element.textContent);
@@ -383,3 +405,3 @@ continue;
 
-        if (element.dataset.keyframes) {
+        if (hydrateType === "keyframes") {
           hydrate(this.keyframesCache, KEYFRAMES_HYRDATOR, element.textContent);
@@ -393,3 +415,4 @@ continue;
         cache.key = key;
-        hydrate(cache, STYLES_HYDRATOR, element.textContent);
+        hydrateStyles(cache, STYLES_HYDRATOR, element.textContent);
+        this.styleCache.caches[key] = cache;
       }
@@ -412,3 +435,3 @@ }
   renderFontFace(fontFace) {
-    const key = JSON.stringify(fontFace);
+    const key = declarationsToBlock(fontFace);
     return this.fontFaceCache.addValue(key, fontFace);
@@ -418,3 +441,3 @@ }
   renderKeyframes(keyframes) {
-    const key = JSON.stringify(keyframes);
+    const key = keyframesToBlock(keyframes);
     return this.keyframesCache.addValue(key, keyframes);
@@ -421,0 +444,0 @@ }

dist/browser.es5.es.js

@@ -221,3 +221,4 @@ import prefixAll from 'inline-style-prefixer/static';
 
-      var key = "" + originalKey + pseudo + ":" + originalVal;
+      var propValPair = hyphenateStyleName(originalKey) + ":" + originalVal;
+      var key = "" + pseudo + propValPair;
       var cachedId = cache.cache[key];
@@ -242,3 +243,7 @@
           if (prefixedValType === "string" || prefixedValType === "number") {
-            _block += hyphenateStyleName(prefixedKey) + ":" + prefixedVal + ";";
+            var prefixedPair = hyphenateStyleName(prefixedKey) + ":" + prefixedVal;
+
+            if (prefixedPair !== propValPair) {
+              _block += prefixedPair + ";";
+            }
           } else if (Array.isArray(prefixedVal)) {
@@ -248,3 +253,7 @@ var hyphenated = hyphenateStyleName(prefixedKey);
             for (var i = 0; i < prefixedVal.length; i++) {
-              _block += hyphenated + ":" + prefixedVal[i] + ";";
+              var _prefixedPair = hyphenated + ":" + prefixedVal[i];
+
+              if (_prefixedPair !== propValPair) {
+                _block += _prefixedPair + ";";
+              }
             }
@@ -254,3 +263,3 @@ }
 
-        _block = _block.slice(0, -1); // Remove trailing semicolon
+        _block += propValPair; // ensure original prop/val is last (for hydration)
 
@@ -344,7 +353,7 @@ var id = cache.addValue(key, {
 /* eslint-env browser */
-var STYLES_HYDRATOR = /\.([^{]+){[^}]*;([^}]*?)}/g;
-var KEYFRAMES_HYRDATOR = /@keyframes ([^{]+)\{([^{]+\{[^}]*\})*\}/g;
+var STYLES_HYDRATOR = /\.([^{:]+)(:[^{]+)?{(?:[^}]*;)?([^}]*?)}/g;
+var KEYFRAMES_HYRDATOR = /@keyframes ([^{]+)\{((?:[^{]+\{[^}]*\})*)\}/g;
 var FONT_FACE_HYDRATOR = /@font-face\{font-family:([^;]+);([^}]*)\}/g;
 
-function hydrate(cache, hydrator, css) {
+function hydrateStyles(cache, hydrator, css) {
   var match;
@@ -355,3 +364,18 @@
         id = _match[1],
-        key = _match[2];
+        _pseudo = _match[2],
+        key = _match[3];
+    var fullKey = _pseudo ? "" + _pseudo + key : key;
+    cache.cache[fullKey] = id; // set cache without triggering side effects
+
+    cache.idGenerator.increment(); // increment id
+  }
+}
+
+function hydrate(cache, hydrator, css) {
+  var match;
+
+  while (match = hydrator.exec(css)) {
+    var _match2 = match,
+        id = _match2[1],
+        key = _match2[2];
     cache.cache[key] = id; // set cache without triggering side effects
@@ -422,4 +446,5 @@
         var element = opts.hydrate[i];
+        var hydrateType = element.dataset.hydrate;
 
-        if (element.dataset["font-face"]) {
+        if (hydrateType === "font-face") {
           hydrate(this.fontFaceCache, FONT_FACE_HYDRATOR, element.textContent);
@@ -429,3 +454,3 @@ continue;
 
-        if (element.dataset.keyframes) {
+        if (hydrateType === "keyframes") {
           hydrate(this.keyframesCache, KEYFRAMES_HYRDATOR, element.textContent);
@@ -439,3 +464,4 @@ continue;
         cache.key = key;
-        hydrate(cache, STYLES_HYDRATOR, element.textContent);
+        hydrateStyles(cache, STYLES_HYDRATOR, element.textContent);
+        this.styleCache.caches[key] = cache;
       }
@@ -460,3 +486,3 @@ }
   _proto.renderFontFace = function renderFontFace(fontFace) {
-    var key = JSON.stringify(fontFace);
+    var key = declarationsToBlock(fontFace);
     return this.fontFaceCache.addValue(key, fontFace);
@@ -466,3 +492,3 @@ };
   _proto.renderKeyframes = function renderKeyframes(keyframes) {
-    var key = JSON.stringify(keyframes);
+    var key = keyframesToBlock(keyframes);
     return this.keyframesCache.addValue(key, keyframes);
@@ -469,0 +495,0 @@ };

dist/browser.es5.js

@@ -227,3 +227,4 @@ 'use strict';
 
-      var key = "" + originalKey + pseudo + ":" + originalVal;
+      var propValPair = hyphenateStyleName(originalKey) + ":" + originalVal;
+      var key = "" + pseudo + propValPair;
       var cachedId = cache.cache[key];
@@ -248,3 +249,7 @@
           if (prefixedValType === "string" || prefixedValType === "number") {
-            _block += hyphenateStyleName(prefixedKey) + ":" + prefixedVal + ";";
+            var prefixedPair = hyphenateStyleName(prefixedKey) + ":" + prefixedVal;
+
+            if (prefixedPair !== propValPair) {
+              _block += prefixedPair + ";";
+            }
           } else if (Array.isArray(prefixedVal)) {
@@ -254,3 +259,7 @@ var hyphenated = hyphenateStyleName(prefixedKey);
             for (var i = 0; i < prefixedVal.length; i++) {
-              _block += hyphenated + ":" + prefixedVal[i] + ";";
+              var _prefixedPair = hyphenated + ":" + prefixedVal[i];
+
+              if (_prefixedPair !== propValPair) {
+                _block += _prefixedPair + ";";
+              }
             }
@@ -260,3 +269,3 @@ }
 
-        _block = _block.slice(0, -1); // Remove trailing semicolon
+        _block += propValPair; // ensure original prop/val is last (for hydration)
 
@@ -350,7 +359,7 @@ var id = cache.addValue(key, {
 /* eslint-env browser */
-var STYLES_HYDRATOR = /\.([^{]+){[^}]*;([^}]*?)}/g;
-var KEYFRAMES_HYRDATOR = /@keyframes ([^{]+)\{([^{]+\{[^}]*\})*\}/g;
+var STYLES_HYDRATOR = /\.([^{:]+)(:[^{]+)?{(?:[^}]*;)?([^}]*?)}/g;
+var KEYFRAMES_HYRDATOR = /@keyframes ([^{]+)\{((?:[^{]+\{[^}]*\})*)\}/g;
 var FONT_FACE_HYDRATOR = /@font-face\{font-family:([^;]+);([^}]*)\}/g;
 
-function hydrate(cache, hydrator, css) {
+function hydrateStyles(cache, hydrator, css) {
   var match;
@@ -361,3 +370,18 @@
         id = _match[1],
-        key = _match[2];
+        _pseudo = _match[2],
+        key = _match[3];
+    var fullKey = _pseudo ? "" + _pseudo + key : key;
+    cache.cache[fullKey] = id; // set cache without triggering side effects
+
+    cache.idGenerator.increment(); // increment id
+  }
+}
+
+function hydrate(cache, hydrator, css) {
+  var match;
+
+  while (match = hydrator.exec(css)) {
+    var _match2 = match,
+        id = _match2[1],
+        key = _match2[2];
     cache.cache[key] = id; // set cache without triggering side effects
@@ -428,4 +452,5 @@
         var element = opts.hydrate[i];
+        var hydrateType = element.dataset.hydrate;
 
-        if (element.dataset["font-face"]) {
+        if (hydrateType === "font-face") {
           hydrate(this.fontFaceCache, FONT_FACE_HYDRATOR, element.textContent);
@@ -435,3 +460,3 @@ continue;
 
-        if (element.dataset.keyframes) {
+        if (hydrateType === "keyframes") {
           hydrate(this.keyframesCache, KEYFRAMES_HYRDATOR, element.textContent);
@@ -445,3 +470,4 @@ continue;
         cache.key = key;
-        hydrate(cache, STYLES_HYDRATOR, element.textContent);
+        hydrateStyles(cache, STYLES_HYDRATOR, element.textContent);
+        this.styleCache.caches[key] = cache;
       }
@@ -466,3 +492,3 @@ }
   _proto.renderFontFace = function renderFontFace(fontFace) {
-    var key = JSON.stringify(fontFace);
+    var key = declarationsToBlock(fontFace);
     return this.fontFaceCache.addValue(key, fontFace);
@@ -472,3 +498,3 @@ };
   _proto.renderKeyframes = function renderKeyframes(keyframes) {
-    var key = JSON.stringify(keyframes);
+    var key = keyframesToBlock(keyframes);
     return this.keyframesCache.addValue(key, keyframes);
@@ -475,0 +501,0 @@ };

dist/index.es.js

@@ -186,3 +186,4 @@ import prefixAll from 'inline-style-prefixer/static';
 
-      const key = `${originalKey}${pseudo}:${originalVal}`;
+      const propValPair = `${hyphenateStyleName(originalKey)}:${originalVal}`;
+      const key = `${pseudo}${propValPair}`;
       const cachedId = cache.cache[key];
@@ -206,3 +207,7 @@
           if (prefixedValType === "string" || prefixedValType === "number") {
-            block += `${hyphenateStyleName(prefixedKey)}:${prefixedVal};`;
+            const prefixedPair = `${hyphenateStyleName(prefixedKey)}:${prefixedVal}`;
+
+            if (prefixedPair !== propValPair) {
+              block += `${prefixedPair};`;
+            }
           } else if (Array.isArray(prefixedVal)) {
@@ -212,3 +217,7 @@ const hyphenated = hyphenateStyleName(prefixedKey);
             for (let i = 0; i < prefixedVal.length; i++) {
-              block += `${hyphenated}:${prefixedVal[i]};`;
+              const prefixedPair = `${hyphenated}:${prefixedVal[i]}`;
+
+              if (prefixedPair !== propValPair) {
+                block += `${prefixedPair};`;
+              }
             }
@@ -218,3 +227,3 @@ }
 
-        block = block.slice(0, -1); // Remove trailing semicolon
+        block += propValPair; // ensure original prop/val is last (for hydration)
 
@@ -311,6 +320,18 @@ const id = cache.addValue(key, {
 /* eslint-env browser */
-const STYLES_HYDRATOR = /\.([^{]+){[^}]*;([^}]*?)}/g;
-const KEYFRAMES_HYRDATOR = /@keyframes ([^{]+)\{([^{]+\{[^}]*\})*\}/g;
+const STYLES_HYDRATOR = /\.([^{:]+)(:[^{]+)?{(?:[^}]*;)?([^}]*?)}/g;
+const KEYFRAMES_HYRDATOR = /@keyframes ([^{]+)\{((?:[^{]+\{[^}]*\})*)\}/g;
 const FONT_FACE_HYDRATOR = /@font-face\{font-family:([^;]+);([^}]*)\}/g;
 
+function hydrateStyles(cache, hydrator, css) {
+  let match;
+
+  while (match = hydrator.exec(css)) {
+    const [, id, pseudo, key] = match;
+    const fullKey = pseudo ? `${pseudo}${key}` : key;
+    cache.cache[fullKey] = id; // set cache without triggering side effects
+
+    cache.idGenerator.increment(); // increment id
+  }
+}
+
 function hydrate(cache, hydrator, css) {
@@ -376,4 +397,5 @@ let match;
         const element = opts.hydrate[i];
+        const hydrateType = element.dataset.hydrate;
 
-        if (element.dataset["font-face"]) {
+        if (hydrateType === "font-face") {
           hydrate(this.fontFaceCache, FONT_FACE_HYDRATOR, element.textContent);
@@ -383,3 +405,3 @@ continue;
 
-        if (element.dataset.keyframes) {
+        if (hydrateType === "keyframes") {
           hydrate(this.keyframesCache, KEYFRAMES_HYRDATOR, element.textContent);
@@ -393,3 +415,4 @@ continue;
         cache.key = key;
-        hydrate(cache, STYLES_HYDRATOR, element.textContent);
+        hydrateStyles(cache, STYLES_HYDRATOR, element.textContent);
+        this.styleCache.caches[key] = cache;
       }
@@ -412,3 +435,3 @@ }
   renderFontFace(fontFace) {
-    const key = JSON.stringify(fontFace);
+    const key = declarationsToBlock(fontFace);
     return this.fontFaceCache.addValue(key, fontFace);
@@ -418,3 +441,3 @@ }
   renderKeyframes(keyframes) {
-    const key = JSON.stringify(keyframes);
+    const key = keyframesToBlock(keyframes);
     return this.keyframesCache.addValue(key, keyframes);
@@ -421,0 +444,0 @@ }

dist/index.js

@@ -192,3 +192,4 @@ 'use strict';
 
-      const key = `${originalKey}${pseudo}:${originalVal}`;
+      const propValPair = `${hyphenateStyleName(originalKey)}:${originalVal}`;
+      const key = `${pseudo}${propValPair}`;
       const cachedId = cache.cache[key];
@@ -212,3 +213,7 @@
           if (prefixedValType === "string" || prefixedValType === "number") {
-            block += `${hyphenateStyleName(prefixedKey)}:${prefixedVal};`;
+            const prefixedPair = `${hyphenateStyleName(prefixedKey)}:${prefixedVal}`;
+
+            if (prefixedPair !== propValPair) {
+              block += `${prefixedPair};`;
+            }
           } else if (Array.isArray(prefixedVal)) {
@@ -218,3 +223,7 @@ const hyphenated = hyphenateStyleName(prefixedKey);
             for (let i = 0; i < prefixedVal.length; i++) {
-              block += `${hyphenated}:${prefixedVal[i]};`;
+              const prefixedPair = `${hyphenated}:${prefixedVal[i]}`;
+
+              if (prefixedPair !== propValPair) {
+                block += `${prefixedPair};`;
+              }
             }
@@ -224,3 +233,3 @@ }
 
-        block = block.slice(0, -1); // Remove trailing semicolon
+        block += propValPair; // ensure original prop/val is last (for hydration)
 
@@ -317,6 +326,18 @@ const id = cache.addValue(key, {
 /* eslint-env browser */
-const STYLES_HYDRATOR = /\.([^{]+){[^}]*;([^}]*?)}/g;
-const KEYFRAMES_HYRDATOR = /@keyframes ([^{]+)\{([^{]+\{[^}]*\})*\}/g;
+const STYLES_HYDRATOR = /\.([^{:]+)(:[^{]+)?{(?:[^}]*;)?([^}]*?)}/g;
+const KEYFRAMES_HYRDATOR = /@keyframes ([^{]+)\{((?:[^{]+\{[^}]*\})*)\}/g;
 const FONT_FACE_HYDRATOR = /@font-face\{font-family:([^;]+);([^}]*)\}/g;
 
+function hydrateStyles(cache, hydrator, css) {
+  let match;
+
+  while (match = hydrator.exec(css)) {
+    const [, id, pseudo, key] = match;
+    const fullKey = pseudo ? `${pseudo}${key}` : key;
+    cache.cache[fullKey] = id; // set cache without triggering side effects
+
+    cache.idGenerator.increment(); // increment id
+  }
+}
+
 function hydrate(cache, hydrator, css) {
@@ -382,4 +403,5 @@ let match;
         const element = opts.hydrate[i];
+        const hydrateType = element.dataset.hydrate;
 
-        if (element.dataset["font-face"]) {
+        if (hydrateType === "font-face") {
           hydrate(this.fontFaceCache, FONT_FACE_HYDRATOR, element.textContent);
@@ -389,3 +411,3 @@ continue;
 
-        if (element.dataset.keyframes) {
+        if (hydrateType === "keyframes") {
           hydrate(this.keyframesCache, KEYFRAMES_HYRDATOR, element.textContent);
@@ -399,3 +421,4 @@ continue;
         cache.key = key;
-        hydrate(cache, STYLES_HYDRATOR, element.textContent);
+        hydrateStyles(cache, STYLES_HYDRATOR, element.textContent);
+        this.styleCache.caches[key] = cache;
       }
@@ -418,3 +441,3 @@ }
   renderFontFace(fontFace) {
-    const key = JSON.stringify(fontFace);
+    const key = declarationsToBlock(fontFace);
     return this.fontFaceCache.addValue(key, fontFace);
@@ -424,3 +447,3 @@ }
   renderKeyframes(keyframes) {
-    const key = JSON.stringify(keyframes);
+    const key = keyframesToBlock(keyframes);
     return this.keyframesCache.addValue(key, keyframes);
@@ -427,0 +450,0 @@ }

package.json

 {
   "name": "styletron-engine-atomic",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Universal, high-performance JavaScript styles",
@@ -5,0 +5,0 @@ "author": "Ryan Tsao <[e-mail]>",

src/client/client.js

 /* eslint-env browser */
 
-const STYLES_HYDRATOR = /\.([^{]+){[^}]*;([^}]*?)}/g;
-const KEYFRAMES_HYRDATOR = /@keyframes ([^{]+)\{([^{]+\{[^}]*\})*\}/g;
+const STYLES_HYDRATOR = /\.([^{:]+)(:[^{]+)?{(?:[^}]*;)?([^}]*?)}/g;
+const KEYFRAMES_HYRDATOR = /@keyframes ([^{]+)\{((?:[^{]+\{[^}]*\})*)\}/g;
 const FONT_FACE_HYDRATOR = /@font-face\{font-family:([^;]+);([^}]*)\}/g;
@@ -12,2 +12,12 @@
 
+function hydrateStyles<T>(cache: Cache<T>, hydrator: hydratorT, css: string) {
+  let match;
+  while ((match = hydrator.exec(css))) {
+    const [, id, pseudo, key] = match;
+    const fullKey = pseudo ? `${pseudo}${key}` : key;
+    cache.cache[fullKey] = id; // set cache without triggering side effects
+    cache.idGenerator.increment(); // increment id
+  }
+}
+
 function hydrate<T>(cache: Cache<T>, hydrator: hydratorT, css: string) {
@@ -130,7 +140,8 @@ let match;
         const element = opts.hydrate[i];
-        if (element.dataset["font-face"]) {
+        const hydrateType = element.dataset.hydrate;
+        if (hydrateType === "font-face") {
           hydrate(this.fontFaceCache, FONT_FACE_HYDRATOR, element.textContent);
           continue;
         }
-        if (element.dataset.keyframes) {
+        if (hydrateType === "keyframes") {
           hydrate(this.keyframesCache, KEYFRAMES_HYRDATOR, element.textContent);
@@ -143,3 +154,4 @@ continue;
         cache.key = key;
-        hydrate(cache, STYLES_HYDRATOR, element.textContent);
+        hydrateStyles(cache, STYLES_HYDRATOR, element.textContent);
+        this.styleCache.caches[key] = cache;
       }
@@ -161,3 +173,3 @@ }
   renderFontFace(fontFace: fontFaceT): string {
-    const key = JSON.stringify(fontFace);
+    const key = declarationsToBlock(fontFace);
     return this.fontFaceCache.addValue(key, fontFace);
@@ -167,3 +179,3 @@ }
   renderKeyframes(keyframes: keyframesT): string {
-    const key = JSON.stringify(keyframes);
+    const key = keyframesToBlock(keyframes);
     return this.keyframesCache.addValue(key, keyframes);
@@ -170,0 +182,0 @@ }

src/inject-style-prefixed.js

@@ -30,4 +30,6 @@ // @flow
 
-      const key = `${originalKey}${pseudo}:${((originalVal: any): string)}`;
-
+      const propValPair = `${hyphenate(
+        originalKey,
+      )}:${((originalVal: any): string)}`;
+      const key = `${pseudo}${propValPair}`;
       const cachedId = cache.cache[key];
@@ -46,11 +48,17 @@ if (cachedId !== void 0) {
           if (prefixedValType === "string" || prefixedValType === "number") {
-            block += `${hyphenate(prefixedKey)}:${prefixedVal};`;
+            const prefixedPair = `${hyphenate(prefixedKey)}:${prefixedVal}`;
+            if (prefixedPair !== propValPair) {
+              block += `${prefixedPair};`;
+            }
           } else if (Array.isArray(prefixedVal)) {
             const hyphenated = hyphenate(prefixedKey);
             for (let i = 0; i < prefixedVal.length; i++) {
-              block += `${hyphenated}:${prefixedVal[i]};`;
+              const prefixedPair = `${hyphenated}:${prefixedVal[i]}`;
+              if (prefixedPair !== propValPair) {
+                block += `${prefixedPair};`;
+              }
             }
           }
         }
-        block = block.slice(0, -1); // Remove trailing semicolon
+        block += propValPair; // ensure original prop/val is last (for hydration)
         const id = cache.addValue(key, {pseudo, block});
@@ -57,0 +65,0 @@ classString += " " + id;

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

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

1151206

increased by204.25%

Number of package files

32

increased by33.33%

Lines of code

22918

increased by533.09%

Worsened metrics

Number of low supply chain risk alerts

15

increased by15.38%

Number of medium supply chain risk alerts

8

increased byInfinity%

No dependency changes