@khanacademy/wonder-blocks-icon - npm Package Compare versions

Comparing version 0.0.0-PR2226-20240524194419 to 0.0.0-PR2226-20240527175915

CHANGELOG.md

 # @khanacademy/wonder-blocks-icon
 
-## 0.0.0-PR2226-20240524194419
+## 0.0.0-PR2226-20240527175915
 
+### Major Changes
+
+-   d1df7564: Use css-modules
+
 ### Patch Changes
 
 -   Updated dependencies [d1df7564]
-    -   @khanacademy/wonder-blocks-core@0.0.0-PR2226-20240524194419
+    -   @khanacademy/wonder-blocks-core@0.0.0-PR2226-20240527175915
 
@@ -10,0 +14,0 @@ ## 4.1.1

dist/components/phosphor-icon.d.ts

@@ -38,3 +38,3 @@ import * as React from "react";
      */
-    style?: StyleType;
+    style?: StyleType | string;
     /**
@@ -41,0 +41,0 @@ * Adds CSS classes to the Icon.

dist/es/index.js

 import * as React from 'react';
-import { StyleSheet } from 'aphrodite';
-import { addStyle } from '@khanacademy/wonder-blocks-core';
+import { cx } from 'class-variance-authority';
 
@@ -40,4 +39,35 @@ function _extends() {
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = "._1y8pT{background-color:var(--i-background-color);display:inline-block;flex-grow:0;flex-shrink:0;height:var(--i-size);mask-image:var(--i-mask-image);mask-position:center;mask-repeat:no-repeat;mask-size:100%;vertical-align:text-bottom;width:var(--i-size)}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBob3NwaG9yLWljb24ubW9kdWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxRQVVJLDBDQUEyQyxDQVQzQyxvQkFBcUIsQ0FHckIsV0FBWSxDQURaLGFBQWMsQ0FTZCxvQkFBcUIsQ0FIckIsOEJBQStCLENBRi9CLG9CQUFxQixDQURyQixxQkFBc0IsQ0FEdEIsY0FBZSxDQUhmLDBCQUEyQixDQVMzQixtQkFFSiIsImZpbGUiOiJwaG9zcGhvci1pY29uLm1vZHVsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuc3ZnIHtcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgdmVydGljYWwtYWxpZ246IHRleHQtYm90dG9tO1xuICAgIGZsZXgtc2hyaW5rOiAwO1xuICAgIGZsZXgtZ3JvdzogMDtcbiAgICBtYXNrLXNpemU6IDEwMCU7XG4gICAgbWFzay1yZXBlYXQ6IG5vLXJlcGVhdDtcbiAgICBtYXNrLXBvc2l0aW9uOiBjZW50ZXI7XG4gICAgLyogZHluYW1pYyBzdHlsZXMgKi9cbiAgICBtYXNrLWltYWdlOiB2YXIoLS1pLW1hc2staW1hZ2UpO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWktYmFja2dyb3VuZC1jb2xvcik7XG4gICAgd2lkdGg6IHZhcigtLWktc2l6ZSk7XG4gICAgaGVpZ2h0OiB2YXIoLS1pLXNpemUpO1xufSJdfQ== */";
+var styles = {"svg":"_1y8pT"};
+styleInject(css_248z);
+
 const _excluded = ["color", "icon", "size", "style", "testId", "className"];
-const StyledIcon = addStyle("span");
+const StyledIcon = "span";
 const PhosphorIcon = React.forwardRef(function PhosphorIcon(props, ref) {
@@ -54,9 +84,10 @@ const {
   const pixelSize = viewportPixelsForSize(size);
-  const classNames = `${className != null ? className : ""}`;
-  const iconStyles = _generateStyles(color, pixelSize);
+  const classNames = cx(styles.svg, styles.icon, className, style);
   return React.createElement(StyledIcon, _extends({}, sharedProps, {
     className: classNames,
-    style: [styles.svg, iconStyles.icon, {
-      maskImage: `url(${icon})`
-    }, style],
+    style: {
+      "--i-mask-image": `url(${icon})`,
+      "--i-size": `${pixelSize}px`,
+      "--i-background-color": color
+    },
     "data-testid": testId,
@@ -66,31 +97,4 @@ ref: ref
 });
-const dynamicStyles = {};
-const _generateStyles = (color, size) => {
-  const iconStyle = `${color}-${size}`;
-  if (styles[iconStyle]) {
-    return styles[iconStyle];
-  }
-  const newStyles = {
-    icon: {
-      backgroundColor: color,
-      width: size,
-      height: size
-    }
-  };
-  dynamicStyles[iconStyle] = StyleSheet.create(newStyles);
-  return dynamicStyles[iconStyle];
-};
-const styles = StyleSheet.create({
-  svg: {
-    display: "inline-block",
-    verticalAlign: "text-bottom",
-    flexShrink: 0,
-    flexGrow: 0,
-    maskSize: "100%",
-    maskRepeat: "no-repeat",
-    maskPosition: "center"
-  }
-});
 PhosphorIcon.displayName = "PhosphorIcon";
 
 export { PhosphorIcon };

dist/index.js

@@ -6,4 +6,3 @@ 'use strict';
 var React = require('react');
-var aphrodite = require('aphrodite');
-var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
+var classVarianceAuthority = require('class-variance-authority');
 
@@ -65,4 +64,35 @@ function _interopNamespace(e) {
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z = "._1y8pT{background-color:var(--i-background-color);display:inline-block;flex-grow:0;flex-shrink:0;height:var(--i-size);mask-image:var(--i-mask-image);mask-position:center;mask-repeat:no-repeat;mask-size:100%;vertical-align:text-bottom;width:var(--i-size)}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInBob3NwaG9yLWljb24ubW9kdWxlLmNzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxRQVVJLDBDQUEyQyxDQVQzQyxvQkFBcUIsQ0FHckIsV0FBWSxDQURaLGFBQWMsQ0FTZCxvQkFBcUIsQ0FIckIsOEJBQStCLENBRi9CLG9CQUFxQixDQURyQixxQkFBc0IsQ0FEdEIsY0FBZSxDQUhmLDBCQUEyQixDQVMzQixtQkFFSiIsImZpbGUiOiJwaG9zcGhvci1pY29uLm1vZHVsZS5jc3MiLCJzb3VyY2VzQ29udGVudCI6WyIuc3ZnIHtcbiAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgdmVydGljYWwtYWxpZ246IHRleHQtYm90dG9tO1xuICAgIGZsZXgtc2hyaW5rOiAwO1xuICAgIGZsZXgtZ3JvdzogMDtcbiAgICBtYXNrLXNpemU6IDEwMCU7XG4gICAgbWFzay1yZXBlYXQ6IG5vLXJlcGVhdDtcbiAgICBtYXNrLXBvc2l0aW9uOiBjZW50ZXI7XG4gICAgLyogZHluYW1pYyBzdHlsZXMgKi9cbiAgICBtYXNrLWltYWdlOiB2YXIoLS1pLW1hc2staW1hZ2UpO1xuICAgIGJhY2tncm91bmQtY29sb3I6IHZhcigtLWktYmFja2dyb3VuZC1jb2xvcik7XG4gICAgd2lkdGg6IHZhcigtLWktc2l6ZSk7XG4gICAgaGVpZ2h0OiB2YXIoLS1pLXNpemUpO1xufSJdfQ== */";
+var styles = {"svg":"_1y8pT"};
+styleInject(css_248z);
+
 const _excluded = ["color", "icon", "size", "style", "testId", "className"];
-const StyledIcon = wonderBlocksCore.addStyle("span");
+const StyledIcon = "span";
 const PhosphorIcon = React__namespace.forwardRef(function PhosphorIcon(props, ref) {
@@ -79,9 +109,10 @@ const {
   const pixelSize = viewportPixelsForSize(size);
-  const classNames = `${className != null ? className : ""}`;
-  const iconStyles = _generateStyles(color, pixelSize);
+  const classNames = classVarianceAuthority.cx(styles.svg, styles.icon, className, style);
   return React__namespace.createElement(StyledIcon, _extends({}, sharedProps, {
     className: classNames,
-    style: [styles.svg, iconStyles.icon, {
-      maskImage: `url(${icon})`
-    }, style],
+    style: {
+      "--i-mask-image": `url(${icon})`,
+      "--i-size": `${pixelSize}px`,
+      "--i-background-color": color
+    },
     "data-testid": testId,
@@ -91,31 +122,4 @@ ref: ref
 });
-const dynamicStyles = {};
-const _generateStyles = (color, size) => {
-  const iconStyle = `${color}-${size}`;
-  if (styles[iconStyle]) {
-    return styles[iconStyle];
-  }
-  const newStyles = {
-    icon: {
-      backgroundColor: color,
-      width: size,
-      height: size
-    }
-  };
-  dynamicStyles[iconStyle] = aphrodite.StyleSheet.create(newStyles);
-  return dynamicStyles[iconStyle];
-};
-const styles = aphrodite.StyleSheet.create({
-  svg: {
-    display: "inline-block",
-    verticalAlign: "text-bottom",
-    flexShrink: 0,
-    flexGrow: 0,
-    maskSize: "100%",
-    maskRepeat: "no-repeat",
-    maskPosition: "center"
-  }
-});
 PhosphorIcon.displayName = "PhosphorIcon";
 
 exports.PhosphorIcon = PhosphorIcon;

package.json

 {
   "name": "@khanacademy/wonder-blocks-icon",
-  "version": "0.0.0-PR2226-20240524194419",
+  "version": "0.0.0-PR2226-20240527175915",
   "design": "v1",
@@ -19,7 +19,7 @@ "publishConfig": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "0.0.0-PR2226-20240524194419"
+    "@khanacademy/wonder-blocks-core": "0.0.0-PR2226-20240527175915"
   },
   "devDependencies": {
     "@khanacademy/wonder-stuff-core": "^1.4.2",
-    "@khanacademy/wb-dev-build-settings": "0.0.0-PR2226-20240524194419"
+    "@khanacademy/wb-dev-build-settings": "0.0.0-PR2226-20240527175915"
   },
@@ -29,4 +29,5 @@ "peerDependencies": {
     "aphrodite": "^1.2.5",
+    "class-variance-authority": "^0.7.0",
     "react": "16.14.0"
   }
 }

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

84005

increased by4.17%

Number of package files

19

increased by5.56%

Lines of code

596

increased by2.76%

Worsened metrics

Dependency count

6

increased by20%

Number of low supply chain risk alerts

3

increased by200%

Dependency changes

• + Added@khanacademy/wonder-blocks-core@0.0.0-PR2226-20240527175915(transitive)

• - Removed@khanacademy/wonder-blocks-core@0.0.0-PR2226-20240524194419(transitive)

• Updated@khanacademy/wonder-blocks-core@0.0.0-PR2226-20240527175915