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

Comparing version 0.0.0-PR2226-20240523171859 to 0.0.0-PR2226-20240524194419

CHANGELOG.md

 # @khanacademy/wonder-blocks-layout
 
-## 0.0.0-PR2226-20240523171859
+## 0.0.0-PR2226-20240524194419
 
+### Major Changes
+
+-   a5d1ed5a: Use css-modules
+
 ### Patch Changes
 
 -   Updated dependencies [d1df7564]
+    -   @khanacademy/wonder-blocks-tokens@0.0.0-PR2226-20240524194419
+    -   @khanacademy/wonder-blocks-core@0.0.0-PR2226-20240524194419
+
+## 2.0.33
+
+### Patch Changes
+
 -   Updated dependencies [5dfac06e]
-    -   @khanacademy/wonder-blocks-tokens@0.0.0-PR2226-20240523171859
-    -   @khanacademy/wonder-blocks-core@0.0.0-PR2226-20240523171859
+    -   @khanacademy/wonder-blocks-core@6.4.1
 
@@ -12,0 +22,0 @@ ## 2.0.32

dist/components/strut.d.ts

@@ -5,3 +5,3 @@ import * as React from "react";
     size: number;
-    style?: StyleType;
+    style?: StyleType | string;
 };
@@ -8,0 +8,0 @@ /**

dist/es/index.js

@@ -5,2 +5,3 @@ import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
+import { cx } from 'class-variance-authority';
 
@@ -189,7 +190,7 @@ function _extends() {
       "aria-hidden": "true",
-      style: [styles.grow, style]
+      style: [styles$1.grow, style]
     });
   }
 }
-const styles = StyleSheet.create({
+const styles$1 = StyleSheet.create({
   grow: {
@@ -200,2 +201,33 @@ flexGrow: 1
 
+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 = ".VjQpm{align-items:stretch;border-style:solid;border-width:0;box-sizing:border-box;display:flex;flex-basis:var(--strut-size);flex-direction:column;flex-shrink:0;margin:0;min-height:0;min-width:0;padding:0;position:relative;width:var(--strut-size);z-index:0}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0cnV0Lm1vZHVsZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FFSSxtQkFBb0IsQ0FFcEIsa0JBQW1CLENBRG5CLGNBQWUsQ0FFZixxQkFBc0IsQ0FDdEIsWUFBYSxDQVViLDRCQUE2QixDQVQ3QixxQkFBc0IsQ0FVdEIsYUFBYyxDQVRkLFFBQVMsQ0FJVCxZQUFhLENBQ2IsV0FBWSxDQUpaLFNBQVUsQ0FDVixpQkFBa0IsQ0FLbEIsdUJBQXdCLENBSnhCLFNBT0oiLCJmaWxlIjoic3RydXQubW9kdWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5zdHJ1dCB7XG4gICAgLyogU1RBUlQgdmlldyAtIGJvcnJvd2VkIGZyb20gVmlldyAqL1xuICAgIGFsaWduLWl0ZW1zOiBzdHJldGNoO1xuICAgIGJvcmRlci13aWR0aDogMDtcbiAgICBib3JkZXItc3R5bGU6IHNvbGlkO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB6LWluZGV4OiAwO1xuICAgIG1pbi1oZWlnaHQ6IDA7XG4gICAgbWluLXdpZHRoOiAwO1xuICAgIC8qIEVORCB2aWV3ICovXG4gICAgd2lkdGg6IHZhcigtLXN0cnV0LXNpemUpO1xuICAgIGZsZXgtYmFzaXM6IHZhcigtLXN0cnV0LXNpemUpO1xuICAgIGZsZXgtc2hyaW5rOiAwO1xufSJdfQ== */";
+var styles = {"strut":"VjQpm"};
+styleInject(css_248z);
+
 class Strut extends React.Component {
@@ -207,18 +239,11 @@ render() {
     } = this.props;
-    return React.createElement(View, {
+    return React.createElement("div", {
       "aria-hidden": "true",
-      style: [strutStyle(size), style]
+      className: cx(styles.strut, style),
+      style: {
+        "--strut-size": size + "px"
+      }
     });
   }
 }
-const strutStyle = size => {
-  return {
-    width: size,
-    MsFlexBasis: size,
-    MsFlexPreferredSize: size,
-    WebkitFlexBasis: size,
-    flexBasis: size,
-    flexShrink: 0
-  };
-};
 
@@ -225,0 +250,0 @@ const queryMatchesSize = (mediaQuery, mediaSize) => {

dist/index.js

@@ -9,2 +9,3 @@ 'use strict';
 var aphrodite = require('aphrodite');
+var classVarianceAuthority = require('class-variance-authority');
 
@@ -213,7 +214,7 @@ function _interopNamespace(e) {
       "aria-hidden": "true",
-      style: [styles.grow, style]
+      style: [styles$1.grow, style]
     });
   }
 }
-const styles = aphrodite.StyleSheet.create({
+const styles$1 = aphrodite.StyleSheet.create({
   grow: {
@@ -224,2 +225,33 @@ flexGrow: 1
 
+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 = ".VjQpm{align-items:stretch;border-style:solid;border-width:0;box-sizing:border-box;display:flex;flex-basis:var(--strut-size);flex-direction:column;flex-shrink:0;margin:0;min-height:0;min-width:0;padding:0;position:relative;width:var(--strut-size);z-index:0}\n/*# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0cnV0Lm1vZHVsZS5jc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FFSSxtQkFBb0IsQ0FFcEIsa0JBQW1CLENBRG5CLGNBQWUsQ0FFZixxQkFBc0IsQ0FDdEIsWUFBYSxDQVViLDRCQUE2QixDQVQ3QixxQkFBc0IsQ0FVdEIsYUFBYyxDQVRkLFFBQVMsQ0FJVCxZQUFhLENBQ2IsV0FBWSxDQUpaLFNBQVUsQ0FDVixpQkFBa0IsQ0FLbEIsdUJBQXdCLENBSnhCLFNBT0oiLCJmaWxlIjoic3RydXQubW9kdWxlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbIi5zdHJ1dCB7XG4gICAgLyogU1RBUlQgdmlldyAtIGJvcnJvd2VkIGZyb20gVmlldyAqL1xuICAgIGFsaWduLWl0ZW1zOiBzdHJldGNoO1xuICAgIGJvcmRlci13aWR0aDogMDtcbiAgICBib3JkZXItc3R5bGU6IHNvbGlkO1xuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XG4gICAgZGlzcGxheTogZmxleDtcbiAgICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICAgIG1hcmdpbjogMDtcbiAgICBwYWRkaW5nOiAwO1xuICAgIHBvc2l0aW9uOiByZWxhdGl2ZTtcbiAgICB6LWluZGV4OiAwO1xuICAgIG1pbi1oZWlnaHQ6IDA7XG4gICAgbWluLXdpZHRoOiAwO1xuICAgIC8qIEVORCB2aWV3ICovXG4gICAgd2lkdGg6IHZhcigtLXN0cnV0LXNpemUpO1xuICAgIGZsZXgtYmFzaXM6IHZhcigtLXN0cnV0LXNpemUpO1xuICAgIGZsZXgtc2hyaW5rOiAwO1xufSJdfQ== */";
+var styles = {"strut":"VjQpm"};
+styleInject(css_248z);
+
 class Strut extends React__namespace.Component {
@@ -231,18 +263,11 @@ render() {
     } = this.props;
-    return React__namespace.createElement(wonderBlocksCore.View, {
+    return React__namespace.createElement("div", {
       "aria-hidden": "true",
-      style: [strutStyle(size), style]
+      className: classVarianceAuthority.cx(styles.strut, style),
+      style: {
+        "--strut-size": size + "px"
+      }
     });
   }
 }
-const strutStyle = size => {
-  return {
-    width: size,
-    MsFlexBasis: size,
-    MsFlexPreferredSize: size,
-    WebkitFlexBasis: size,
-    flexBasis: size,
-    flexShrink: 0
-  };
-};
 
@@ -249,0 +274,0 @@ const queryMatchesSize = (mediaQuery, mediaSize) => {

package.json

 {
   "name": "@khanacademy/wonder-blocks-layout",
-  "version": "0.0.0-PR2226-20240523171859",
+  "version": "0.0.0-PR2226-20240524194419",
   "design": "v1",
@@ -17,10 +17,11 @@ "publishConfig": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "0.0.0-PR2226-20240523171859",
-    "@khanacademy/wonder-blocks-tokens": "0.0.0-PR2226-20240523171859"
+    "@khanacademy/wonder-blocks-core": "0.0.0-PR2226-20240524194419",
+    "@khanacademy/wonder-blocks-tokens": "0.0.0-PR2226-20240524194419"
   },
   "devDependencies": {
-    "@khanacademy/wb-dev-build-settings": "0.0.0-PR2226-20240523171859"
+    "@khanacademy/wb-dev-build-settings": "0.0.0-PR2226-20240524194419"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",
+    "class-variance-authority": "^0.7.0",
     "react": "16.14.0"
@@ -27,0 +28,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

147036

increased by3.43%

Number of package files

29

increased by3.57%

Lines of code

2240

increased by2.89%

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-20240524194419(transitive)

• + Added@khanacademy/wonder-blocks-tokens@0.0.0-PR2226-20240524194419(transitive)

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

• - Removed@khanacademy/wonder-blocks-tokens@0.0.0-PR2226-20240523171859(transitive)

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

• Updated@khanacademy/wonder-blocks-tokens@0.0.0-PR2226-20240524194419