(fix) Bug when extending styles (cristianbote#218)

atersolis · Jan 2, 2021 · ee8865c · ee8865c
1 parent 58bc405
commit ee8865c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 6 deletions.
diff --git a/src/core/hash.js b/src/core/hash.js
@@ -29,11 +29,11 @@ let stringify = (data) => {
  * @param {String|Object} compiled
  * @param {Object} sheet StyleSheet target
  * @param {Object} global Global flag
- * @param {Boolean} append Append or not
+ * @param {Boolean} before To insert style before an other style
  * @param {Boolean} keyframes Keyframes mode. The input is the keyframes body that needs to be wrapped.
  * @returns {String}
  */
-export let hash = (compiled, sheet, global, append, keyframes) => {
+export let hash = (compiled, sheet, global, before, keyframes) => {
     // Get a string representation of the object or the value that is called 'compiled'
     let stringifiedCompiled = typeof compiled == 'object' ? stringify(compiled) : compiled;
 
@@ -55,7 +55,8 @@ export let hash = (compiled, sheet, global, append, keyframes) => {
     }
 
     // add or update
-    update(cache[className], sheet, append);
+    //"/*" + className + "*/" is a marker to insert styles before .className
+    update('/*' + className + '*/' + cache[className], sheet, before);
 
     // return hash
     return className;

diff --git a/src/core/update.js b/src/core/update.js
@@ -16,6 +16,9 @@ export let extractCss = (target) => {
  * @param {Object} sheet
  * @param {Boolean} append
  */
-export let update = (css, sheet, append) => {
-    sheet.data.indexOf(css) == -1 && (sheet.data = append ? css + sheet.data : sheet.data + css);
+export let update = (css, sheet, before) => {
+    sheet.data.indexOf(css) == -1 &&
+        (sheet.data = before
+            ? sheet.data.replace('/*' + before[0] + '*/', css + '/*' + before[0] + '*/')
+            : sheet.data + css);
 };
diff --git a/src/styled.js b/src/styled.js
@@ -35,7 +35,7 @@ function styled(tag, forwardRef) {
             // Set a flag if the current components had a previous className
             // similar to goober. This is the append/prepend flag
             // The _empty_ space compresses better than `\s`
-            _ctx.o = / *go\d+/g.test(_previousClassName);
+            _ctx.o = (_previousClassName || '').match(/ *go\d+/g);
 
             _props.className =
                 // Define the new className