reablocks - npm Package Compare versions

Comparing version 1.4.2 to 1.4.3

dist/index.cjs.js

@@ -25,5 +25,2 @@ 'use strict';
 
-const isRefObject = ref => 
-// eslint-disable-next-line no-prototype-builtins
-ref !== null && typeof ref === 'object' && ref.hasOwnProperty('current');
 const camelToDash = (str) => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
@@ -134,10 +131,6 @@ const applyColors = (theme) => {
 };
-const createSheet = (element, theme) => {
-    const styleEl = document.createElement('style');
-    const sheet = element.appendChild(styleEl).sheet;
-    if (!sheet) {
-        throw new Error('Could not create style sheet');
-    }
+const createSheet = (theme) => {
     const str = buildSheetRules(theme);
-    sheet.insertRule(`
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(`
     body {
@@ -147,27 +140,20 @@ ${str.join(' ')}
   `);
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
     return sheet;
 };
 
-const DesignTokensProvider = ({ children, value, reference = document.body }) => {
+const DesignTokensProvider = ({ children, value }) => {
     const sheetRef = react.useRef(null);
-    const loadedRef = react.useRef(false);
-    const applyTheme = react.useCallback(() => {
+    react.useLayoutEffect(() => {
         if (!sheetRef.current) {
-            const element = isRefObject(reference)
-                ? reference.current
-                : reference;
-            sheetRef.current = createSheet(element, value);
-            loadedRef.current = true;
+            sheetRef.current = createSheet(value);
         }
-        else if (loadedRef.current) {
-            sheetRef.current.replace(buildSheetRules(value).join(' '));
+        else {
+            sheetRef.current.replaceSync(buildSheetRules(value).join(' '));
         }
-    }, [value, reference]);
+    }, [value]);
     react.useLayoutEffect(() => {
-        applyTheme();
-    }, [applyTheme]);
-    react.useLayoutEffect(() => {
         return () => {
-            if (sheetRef.current && loadedRef.current) {
-                sheetRef.current.ownerNode.remove();
+            if (sheetRef.current) {
+                document.adoptedStyleSheets = document.adoptedStyleSheets.filter(s => s !== sheetRef.current);
             }
@@ -174,0 +160,0 @@ };

dist/index.esm.js

@@ -1,2 +0,2 @@
-import { createContext, useContext, useRef, useCallback, useLayoutEffect, Suspense, useState, useMemo } from 'react';
+import { createContext, useContext, useRef, useLayoutEffect, Suspense, useState, useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -16,5 +16,2 @@ import { motion } from 'framer-motion';
 
-const isRefObject = ref => 
-// eslint-disable-next-line no-prototype-builtins
-ref !== null && typeof ref === 'object' && ref.hasOwnProperty('current');
 const camelToDash = (str) => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
@@ -125,10 +122,6 @@ const applyColors = (theme) => {
 };
-const createSheet = (element, theme) => {
-    const styleEl = document.createElement('style');
-    const sheet = element.appendChild(styleEl).sheet;
-    if (!sheet) {
-        throw new Error('Could not create style sheet');
-    }
+const createSheet = (theme) => {
     const str = buildSheetRules(theme);
-    sheet.insertRule(`
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync(`
     body {
@@ -138,27 +131,20 @@ ${str.join(' ')}
   `);
+    document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
     return sheet;
 };
 
-const DesignTokensProvider = ({ children, value, reference = document.body }) => {
+const DesignTokensProvider = ({ children, value }) => {
     const sheetRef = useRef(null);
-    const loadedRef = useRef(false);
-    const applyTheme = useCallback(() => {
+    useLayoutEffect(() => {
         if (!sheetRef.current) {
-            const element = isRefObject(reference)
-                ? reference.current
-                : reference;
-            sheetRef.current = createSheet(element, value);
-            loadedRef.current = true;
+            sheetRef.current = createSheet(value);
         }
-        else if (loadedRef.current) {
-            sheetRef.current.replace(buildSheetRules(value).join(' '));
+        else {
+            sheetRef.current.replaceSync(buildSheetRules(value).join(' '));
         }
-    }, [value, reference]);
+    }, [value]);
     useLayoutEffect(() => {
-        applyTheme();
-    }, [applyTheme]);
-    useLayoutEffect(() => {
         return () => {
-            if (sheetRef.current && loadedRef.current) {
-                sheetRef.current.ownerNode.remove();
+            if (sheetRef.current) {
+                document.adoptedStyleSheets = document.adoptedStyleSheets.filter(s => s !== sheetRef.current);
             }
@@ -165,0 +151,0 @@ };

dist/index.js

@@ -21,5 +21,2 @@ (function (global, factory) {
 
-  const isRefObject = ref => 
-  // eslint-disable-next-line no-prototype-builtins
-  ref !== null && typeof ref === 'object' && ref.hasOwnProperty('current');
   const camelToDash = (str) => str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
@@ -130,10 +127,6 @@ const applyColors = (theme) => {
   };
-  const createSheet = (element, theme) => {
-      const styleEl = document.createElement('style');
-      const sheet = element.appendChild(styleEl).sheet;
-      if (!sheet) {
-          throw new Error('Could not create style sheet');
-      }
+  const createSheet = (theme) => {
       const str = buildSheetRules(theme);
-      sheet.insertRule(`
+      const sheet = new CSSStyleSheet();
+      sheet.replaceSync(`
     body {
@@ -143,27 +136,20 @@ ${str.join(' ')}
   `);
+      document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
       return sheet;
   };
 
-  const DesignTokensProvider = ({ children, value, reference = document.body }) => {
+  const DesignTokensProvider = ({ children, value }) => {
       const sheetRef = react.useRef(null);
-      const loadedRef = react.useRef(false);
-      const applyTheme = react.useCallback(() => {
+      react.useLayoutEffect(() => {
           if (!sheetRef.current) {
-              const element = isRefObject(reference)
-                  ? reference.current
-                  : reference;
-              sheetRef.current = createSheet(element, value);
-              loadedRef.current = true;
+              sheetRef.current = createSheet(value);
           }
-          else if (loadedRef.current) {
-              sheetRef.current.replace(buildSheetRules(value).join(' '));
+          else {
+              sheetRef.current.replaceSync(buildSheetRules(value).join(' '));
           }
-      }, [value, reference]);
+      }, [value]);
       react.useLayoutEffect(() => {
-          applyTheme();
-      }, [applyTheme]);
-      react.useLayoutEffect(() => {
           return () => {
-              if (sheetRef.current && loadedRef.current) {
-                  sheetRef.current.ownerNode.remove();
+              if (sheetRef.current) {
+                  document.adoptedStyleSheets = document.adoptedStyleSheets.filter(s => s !== sheetRef.current);
               }
@@ -170,0 +156,0 @@ };

dist/utils/DesignTokens/DesignTokensProvider.d.ts

@@ -1,7 +0,6 @@
-import { FC, PropsWithChildren, RefObject } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { DesignTokens } from './types';
 export declare type DesignTokensProviderProps = PropsWithChildren<{
     value: DesignTokens;
-    reference?: RefObject<any> | HTMLElement;
 }>;
 export declare const DesignTokensProvider: FC<DesignTokensProviderProps>;

dist/utils/DesignTokens/utils.d.ts

@@ -5,2 +5,2 @@ import { DesignTokens } from './types';
 export declare const buildSheetRules: (theme: DesignTokens) => string[];
-export declare const createSheet: (element: HTMLElement, theme: DesignTokens) => CSSStyleSheet;
+export declare const createSheet: (theme: DesignTokens) => CSSStyleSheet;

package.json

 {
   "name": "reablocks",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "Low level component building blocks for React",
@@ -5,0 +5,0 @@ "scripts": {

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

Worsened metrics

Total package byte prevSize

140139

decreased by-1.28%

Lines of code

2836

decreased by-1.49%

No dependency changes