kremling - npm Package Compare versions

Comparing version 2.0.0 to 2.0.1

lib/use-css.hook.js

@@ -36,3 +36,3 @@ "use strict";
   var _useState = (0, _react.useState)(function () {
-    return getStyleElement(null, isPostCss, css, namespace);
+    return getStyleElement(isPostCss, css, namespace, true);
   }),
@@ -48,15 +48,17 @@ _useState2 = _slicedToArray(_useState, 2),
     (0, _react.useLayoutEffect)(function () {
-      var newStyleElement = getStyleElement(styleElement, isPostCss, css, namespace);
+      var newStyleElement = getStyleElement(isPostCss, css, namespace);
       setStyleElement(newStyleElement);
       return function () {
         if (--styleElement.kremlings === 0) {
+          var rawCss = isPostCss ? css.styles : css;
           document.head.removeChild(styleElement);
-          delete _styleElementUtils.styleTags[css];
+          delete _styleElementUtils.styleTags[rawCss];
         }
       };
-    }, [css, namespace, styleElement, setStyleElement, isPostCss]);
+    }, [css, namespace, isPostCss]);
   }
 }
 
-function getStyleElement(oldStyleElement, isPostCss, css, namespace) {
+function getStyleElement(isPostCss, css, namespace) {
+  var incrementKremingsIfFound = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
   var kremlingAttr = isPostCss ? namespace : "data-".concat(namespace);
@@ -68,3 +70,3 @@ var kremlingValue = isPostCss ? css.id : (0, _styleElementUtils.incrementCounter)();
     // This css is already being used by another instance of the component, or another component altogether.
-    if (styleElement !== oldStyleElement) {
+    if (incrementKremingsIfFound) {
       styleElement.kremlings++;
@@ -71,0 +73,0 @@ }

lib/use-css.test.js

@@ -166,2 +166,20 @@ "use strict";
   });
+  it("removes the local styleTag references when the component is unmounted", function () {
+    var postcss = {
+      id: '8',
+      styles: "[star-wars='8'] .kenobi, [star-wars='8'].kenobi{}",
+      namespace: 'star-wars'
+    };
+    (0, _testUtils.act)(function () {
+      _reactDom.default.render(_react.default.createElement(ScopedDiv, {
+        css: postcss
+      }), container);
+    });
+    expect(container.innerHTML).toEqual('<div star-wars="8"></div>');
+    expect(_styleElementUtils.styleTags[postcss.styles]).toBeDefined();
+    (0, _testUtils.act)(function () {
+      _reactDom.default.unmountComponentAtNode(container);
+    });
+    expect(_styleElementUtils.styleTags[postcss.styles]).toBeUndefined();
+  });
 });
@@ -168,0 +186,0 @@

package.json

 {
   "name": "kremling",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Embarrassingly simple css for React",
@@ -5,0 +5,0 @@ "main": "lib/kremling.js",

src/use-css.hook.js

@@ -11,3 +11,3 @@ import {useLayoutEffect, useEffect, useState} from 'react'
   const namespace = overrideNamespace || (isPostCss && css.namespace) || Scoped.defaultNamespace
-  const [styleElement, setStyleElement] = useState(() => getStyleElement(null, isPostCss, css, namespace))
+  const [styleElement, setStyleElement] = useState(() => getStyleElement(isPostCss, css, namespace, true))
   useStyleElement()
@@ -21,3 +21,3 @@
     useLayoutEffect(() => {
-      const newStyleElement = getStyleElement(styleElement, isPostCss, css, namespace)
+      const newStyleElement = getStyleElement(isPostCss, css, namespace)
       setStyleElement(newStyleElement)
@@ -27,11 +27,12 @@
         if (--styleElement.kremlings === 0) {
+          const rawCss = isPostCss ? css.styles : css
           document.head.removeChild(styleElement)
-          delete styleTags[css]
+          delete styleTags[rawCss]
         }
       }
-    }, [css, namespace, styleElement, setStyleElement, isPostCss])
+    }, [css, namespace, isPostCss])
   }
 }
 
-function getStyleElement(oldStyleElement, isPostCss, css, namespace) {
+function getStyleElement(isPostCss, css, namespace, incrementKremingsIfFound = false) {
   const kremlingAttr = isPostCss ? namespace : `data-${namespace}`
@@ -44,3 +45,3 @@ const kremlingValue = isPostCss ? css.id : incrementCounter()
     // This css is already being used by another instance of the component, or another component altogether.
-    if (styleElement !== oldStyleElement) {
+    if (incrementKremingsIfFound) {
       styleElement.kremlings++
@@ -47,0 +48,0 @@ }

src/use-css.test.js

@@ -155,2 +155,20 @@ import React from 'react'
   })
+
+  it(`removes the local styleTag references when the component is unmounted`, () => {
+    const postcss = {
+      id: '8',
+      styles: `[star-wars='8'] .kenobi, [star-wars='8'].kenobi{}`,
+      namespace: 'star-wars',
+    }
+
+    act(() => {
+      ReactDOM.render(<ScopedDiv css={postcss} />, container)
+    })
+    expect(container.innerHTML).toEqual('<div star-wars="8"></div>')
+    expect(styleTags[postcss.styles]).toBeDefined()
+    act(() => {
+      ReactDOM.unmountComponentAtNode(container)
+    })
+    expect(styleTags[postcss.styles]).toBeUndefined()
+  })
 })
@@ -157,0 +175,0 @@

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

Lines of code

2234

increased by1.68%

Worsened metrics

Total package byte prevSize

182014

decreased by-7.64%

Number of package files

41

decreased by-18%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes