@instructure/emotion - npm Package Compare versions

Comparing version 8.6.1-snapshot.28 to 8.6.1-snapshot.45

es/index.js

@@ -24,5 +24,6 @@ /*
  */
-export { jsx, css, keyframes, Global } from '@emotion/react';
+/// <reference types="@emotion/react/types/css-prop" />
+export * from '@emotion/react';
 export { EmotionThemeProvider } from './EmotionThemeProvider';
-export { ThemeablePropValues, ThemeablePropTypes, makeThemeVars, getShorthandPropValue, mirrorShorthandCorners, mirrorShorthandEdges } from './styleUtils';
-export { withStyle } from './withStyle';
+export * from './styleUtils';
+export * from './withStyle';

es/styleUtils/index.js

@@ -24,3 +24,3 @@ /*
  */
-export { ThemeablePropValues } from './ThemeablePropValues';
+export * from './ThemeablePropValues';
 export { ThemeablePropTypes } from './ThemeablePropTypes';
@@ -27,0 +27,0 @@ export { makeThemeVars } from './makeThemeVars';

es/styleUtils/ThemeablePropValues.js

@@ -79,4 +79,5 @@ /*
   }
-};
+}; // SPACING
+
 export default ThemeablePropValues;
 export { ThemeablePropValues };

lib/index.js

@@ -6,26 +6,5 @@ "use strict";
 });
-Object.defineProperty(exports, "jsx", {
-  enumerable: true,
-  get: function () {
-    return _react.jsx;
-  }
-});
-Object.defineProperty(exports, "css", {
-  enumerable: true,
-  get: function () {
-    return _react.css;
-  }
-});
-Object.defineProperty(exports, "keyframes", {
-  enumerable: true,
-  get: function () {
-    return _react.keyframes;
-  }
-});
-Object.defineProperty(exports, "Global", {
-  enumerable: true,
-  get: function () {
-    return _react.Global;
-  }
-});
+var _exportNames = {
+  EmotionThemeProvider: true
+};
 Object.defineProperty(exports, "EmotionThemeProvider", {
@@ -37,47 +16,17 @@ enumerable: true,
 });
-Object.defineProperty(exports, "ThemeablePropValues", {
-  enumerable: true,
-  get: function () {
-    return _styleUtils.ThemeablePropValues;
-  }
-});
-Object.defineProperty(exports, "ThemeablePropTypes", {
-  enumerable: true,
-  get: function () {
-    return _styleUtils.ThemeablePropTypes;
-  }
-});
-Object.defineProperty(exports, "makeThemeVars", {
-  enumerable: true,
-  get: function () {
-    return _styleUtils.makeThemeVars;
-  }
-});
-Object.defineProperty(exports, "getShorthandPropValue", {
-  enumerable: true,
-  get: function () {
-    return _styleUtils.getShorthandPropValue;
-  }
-});
-Object.defineProperty(exports, "mirrorShorthandCorners", {
-  enumerable: true,
-  get: function () {
-    return _styleUtils.mirrorShorthandCorners;
-  }
-});
-Object.defineProperty(exports, "mirrorShorthandEdges", {
-  enumerable: true,
-  get: function () {
-    return _styleUtils.mirrorShorthandEdges;
-  }
-});
-Object.defineProperty(exports, "withStyle", {
-  enumerable: true,
-  get: function () {
-    return _withStyle.withStyle;
-  }
-});
 
 var _react = require("@emotion/react");
 
+Object.keys(_react).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _react[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _react[key];
+    }
+  });
+});
+
 var _EmotionThemeProvider = require("./EmotionThemeProvider");
@@ -87,2 +36,26 @@
 
-var _withStyle = require("./withStyle");
+Object.keys(_styleUtils).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _styleUtils[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _styleUtils[key];
+    }
+  });
+});
+
+var _withStyle = require("./withStyle");
+
+Object.keys(_withStyle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _withStyle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _withStyle[key];
+    }
+  });
+});

lib/styleUtils/index.js

@@ -6,8 +6,9 @@ "use strict";
 });
-Object.defineProperty(exports, "ThemeablePropValues", {
-  enumerable: true,
-  get: function () {
-    return _ThemeablePropValues.ThemeablePropValues;
-  }
-});
+var _exportNames = {
+  ThemeablePropTypes: true,
+  makeThemeVars: true,
+  getShorthandPropValue: true,
+  mirrorShorthandCorners: true,
+  mirrorShorthandEdges: true
+};
 Object.defineProperty(exports, "ThemeablePropTypes", {
@@ -46,2 +47,14 @@ enumerable: true,
 
+Object.keys(_ThemeablePropValues).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _ThemeablePropValues[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ThemeablePropValues[key];
+    }
+  });
+});
+
 var _ThemeablePropTypes = require("./ThemeablePropTypes");
@@ -48,0 +61,0 @@

lib/styleUtils/ThemeablePropValues.js

@@ -86,5 +86,6 @@ "use strict";
   }
-};
+}; // SPACING
+
 exports.ThemeablePropValues = ThemeablePropValues;
 var _default = ThemeablePropValues;
 exports.default = _default;

package.json

 {
   "name": "@instructure/emotion",
-  "version": "8.6.1-snapshot.28+02d1cdf48",
+  "version": "8.6.1-snapshot.45+913aab32c",
   "description": "A UI component library made by Instructure Inc.",
@@ -9,3 +9,3 @@ "author": "Instructure, Inc. Engineering and Product Design",
   "main": "./lib/index.js",
-  "types": "./types/index.d.ts",
+  "types": "./types/global.d.ts",
   "repository": {
@@ -23,4 +23,4 @@ "type": "git",
     "build:watch": "yarn ts:check --watch & ui-build --watch",
-    "build:types": "tsc -p tsconfig.build.json",
-    "ts:check": "tsc -p tsconfig.build.json --noEmit --emitDeclarationOnly false"
+    "build:types": "tsc -p tsconfig.build.json && cpy './global.d.ts' './types'",
+    "ts:check": "tsc -p tsconfig.build.json"
   },
@@ -31,7 +31,7 @@ "license": "MIT",
     "@emotion/react": "11.0.0",
-    "@instructure/console": "8.6.1-snapshot.28+02d1cdf48",
-    "@instructure/ui-decorator": "8.6.1-snapshot.28+02d1cdf48",
-    "@instructure/ui-i18n": "8.6.1-snapshot.28+02d1cdf48",
-    "@instructure/ui-themes": "8.6.1-snapshot.28+02d1cdf48",
-    "@instructure/ui-utils": "8.6.1-snapshot.28+02d1cdf48",
+    "@instructure/console": "8.6.1-snapshot.45+913aab32c",
+    "@instructure/ui-decorator": "8.6.1-snapshot.45+913aab32c",
+    "@instructure/ui-i18n": "8.6.1-snapshot.45+913aab32c",
+    "@instructure/ui-themes": "8.6.1-snapshot.45+913aab32c",
+    "@instructure/ui-utils": "8.6.1-snapshot.45+913aab32c",
     "emotion-theming": "^10.0.27",
@@ -43,4 +43,5 @@ "hoist-non-react-statics": "^3.3.2",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.6.1-snapshot.28+02d1cdf48",
-    "@instructure/ui-test-utils": "8.6.1-snapshot.28+02d1cdf48"
+    "@instructure/ui-babel-preset": "8.6.1-snapshot.45+913aab32c",
+    "@instructure/ui-test-utils": "8.6.1-snapshot.45+913aab32c",
+    "cpy-cli": "^3.1.1"
   },
@@ -54,3 +55,3 @@ "peerDependencies": {
   "sideEffects": false,
-  "gitHead": "02d1cdf4801dc578fed25e9f327f089aa37d0e92"
+  "gitHead": "913aab32c7d593c16b62c6e9ebb06fc31c27863f"
 }

src/index.ts

@@ -24,13 +24,9 @@ /*
  */
-export { jsx, css, keyframes, Global } from '@emotion/react'
 
+/// <reference types="@emotion/react/types/css-prop" />
+
+export * from '@emotion/react'
+
 export { EmotionThemeProvider } from './EmotionThemeProvider'
-export {
-  ThemeablePropValues,
-  ThemeablePropTypes,
-  makeThemeVars,
-  getShorthandPropValue,
-  mirrorShorthandCorners,
-  mirrorShorthandEdges
-} from './styleUtils'
-export { withStyle } from './withStyle'
+export * from './styleUtils'
+export * from './withStyle'

src/styleUtils/index.ts

@@ -25,3 +25,3 @@ /*
 
-export { ThemeablePropValues } from './ThemeablePropValues'
+export * from './ThemeablePropValues'
 export { ThemeablePropTypes } from './ThemeablePropTypes'
@@ -28,0 +28,0 @@ export { makeThemeVars } from './makeThemeVars'

src/styleUtils/ThemeablePropValues.ts

@@ -86,5 +86,55 @@ /*
   }
-}
+} as const
 
+// SPACING
+type SpacingKeys = keyof typeof ThemeablePropValues.SPACING
+type SpacingValues = typeof ThemeablePropValues.SPACING[SpacingKeys]
+type Spacing =
+  | `${SpacingValues}`
+  | `${SpacingValues} ${SpacingValues}`
+  | `${SpacingValues} ${SpacingValues} ${SpacingValues}`
+  | `${SpacingValues} ${SpacingValues} ${SpacingValues} ${SpacingValues}`
+
+// SHADOW_TYPES
+type ShadowKeys = keyof typeof ThemeablePropValues.SHADOW_TYPES
+type Shadow = typeof ThemeablePropValues.SHADOW_TYPES[ShadowKeys]
+
+// STACKING_TYPES
+type StackingKeys = keyof typeof ThemeablePropValues.STACKING_TYPES
+type Stacking = typeof ThemeablePropValues.STACKING_TYPES[StackingKeys]
+
+// BACKGROUNDS
+type BackgroundKeys = keyof typeof ThemeablePropValues.BACKGROUNDS
+type Background = typeof ThemeablePropValues.BACKGROUNDS[BackgroundKeys]
+
+// BORDER_RADII
+type BorderRadiiKeys = keyof typeof ThemeablePropValues.BORDER_RADII
+type BorderRadiiValues = typeof ThemeablePropValues.BORDER_RADII[BorderRadiiKeys]
+type BorderRadii =
+  | `${BorderRadiiValues}`
+  | `${BorderRadiiValues} ${BorderRadiiValues}`
+  | `${BorderRadiiValues} ${BorderRadiiValues} ${BorderRadiiValues}`
+  | `${BorderRadiiValues} ${BorderRadiiValues} ${BorderRadiiValues} ${BorderRadiiValues}`
+
+// BORDER_WIDTHS
+type BorderWidthKeys = keyof typeof ThemeablePropValues.BORDER_WIDTHS
+type BorderWidthValues = typeof ThemeablePropValues.BORDER_WIDTHS[BorderWidthKeys]
+type BorderWidth =
+  | `${BorderWidthValues}`
+  | `${BorderWidthValues} ${BorderWidthValues}`
+  | `${BorderWidthValues} ${BorderWidthValues} ${BorderWidthValues}`
+  | `${BorderWidthValues} ${BorderWidthValues} ${BorderWidthValues} ${BorderWidthValues}`
+
 export default ThemeablePropValues
 export { ThemeablePropValues }
+export type {
+  SpacingValues,
+  Spacing,
+  Shadow,
+  Stacking,
+  Background,
+  BorderRadiiValues,
+  BorderRadii,
+  BorderWidthValues,
+  BorderWidth
+}

types/index.d.ts

@@ -1,5 +0,5 @@
-export { jsx, css, keyframes, Global } from '@emotion/react';
+export * from '@emotion/react';
 export { EmotionThemeProvider } from './EmotionThemeProvider';
-export { ThemeablePropValues, ThemeablePropTypes, makeThemeVars, getShorthandPropValue, mirrorShorthandCorners, mirrorShorthandEdges } from './styleUtils';
-export { withStyle } from './withStyle';
+export * from './styleUtils';
+export * from './withStyle';
 //# sourceMappingURL=index.d.ts.map

types/styleUtils/index.d.ts

@@ -1,2 +0,2 @@
-export { ThemeablePropValues } from './ThemeablePropValues';
+export * from './ThemeablePropValues';
 export { ThemeablePropTypes } from './ThemeablePropTypes';
@@ -3,0 +3,0 @@ export { makeThemeVars } from './makeThemeVars';

types/styleUtils/ThemeablePropTypes.d.ts

@@ -10,8 +10,8 @@ import PropTypes from 'prop-types';
 declare const ThemeablePropTypes: {
-    shadow: PropTypes.Requireable<string>;
-    stacking: PropTypes.Requireable<string>;
+    shadow: PropTypes.Requireable<"resting" | "above" | "topmost" | "none">;
+    stacking: PropTypes.Requireable<"resting" | "above" | "topmost" | "deepest" | "below">;
     borderWidth: (props: any, propName: any, componentName: any, location: any) => any;
     borderRadius: (props: any, propName: any, componentName: any, location: any) => any;
-    background: PropTypes.Requireable<string>;
-    size: PropTypes.Requireable<string>;
+    background: PropTypes.Requireable<"default" | "inverse" | "transparent">;
+    size: PropTypes.Requireable<"small" | "medium" | "large" | "x-small" | "x-large">;
     spacing: (props: any, propName: any, componentName: any, location: any) => any;
@@ -18,0 +18,0 @@ };

types/styleUtils/ThemeablePropValues.d.ts

 declare const ThemeablePropValues: {
-    SHADOW_TYPES: {
-        resting: string;
-        above: string;
-        topmost: string;
-        none: string;
+    readonly SHADOW_TYPES: {
+        readonly resting: "resting";
+        readonly above: "above";
+        readonly topmost: "topmost";
+        readonly none: "none";
     };
-    STACKING_TYPES: {
-        deepest: string;
-        below: string;
-        resting: string;
-        above: string;
-        topmost: string;
+    readonly STACKING_TYPES: {
+        readonly deepest: "deepest";
+        readonly below: "below";
+        readonly resting: "resting";
+        readonly above: "above";
+        readonly topmost: "topmost";
     };
-    BORDER_WIDTHS: {
-        0: string;
-        none: string;
-        small: string;
-        medium: string;
-        large: string;
+    readonly BORDER_WIDTHS: {
+        readonly 0: "0";
+        readonly none: "none";
+        readonly small: "small";
+        readonly medium: "medium";
+        readonly large: "large";
     };
-    BORDER_RADII: {
-        0: string;
-        none: string;
-        small: string;
-        medium: string;
-        large: string;
-        circle: string;
-        pill: string;
+    readonly BORDER_RADII: {
+        readonly 0: "0";
+        readonly none: "none";
+        readonly small: "small";
+        readonly medium: "medium";
+        readonly large: "large";
+        readonly circle: "circle";
+        readonly pill: "pill";
     };
-    BACKGROUNDS: {
-        default: string;
-        inverse: string;
-        transparent: string;
+    readonly BACKGROUNDS: {
+        readonly default: "default";
+        readonly inverse: "inverse";
+        readonly transparent: "transparent";
     };
-    SIZES: {
-        xSmall: string;
-        small: string;
-        medium: string;
-        large: string;
-        xLarge: string;
+    readonly SIZES: {
+        readonly xSmall: "x-small";
+        readonly small: "small";
+        readonly medium: "medium";
+        readonly large: "large";
+        readonly xLarge: "x-large";
     };
-    SPACING: {
-        0: string;
-        none: string;
-        auto: string;
-        xxxSmall: string;
-        xxSmall: string;
-        xSmall: string;
-        small: string;
-        medium: string;
-        large: string;
-        xLarge: string;
-        xxLarge: string;
+    readonly SPACING: {
+        readonly 0: "0";
+        readonly none: "none";
+        readonly auto: "auto";
+        readonly xxxSmall: "xxx-small";
+        readonly xxSmall: "xx-small";
+        readonly xSmall: "x-small";
+        readonly small: "small";
+        readonly medium: "medium";
+        readonly large: "large";
+        readonly xLarge: "x-large";
+        readonly xxLarge: "xx-large";
     };
 };
+declare type SpacingKeys = keyof typeof ThemeablePropValues.SPACING;
+declare type SpacingValues = typeof ThemeablePropValues.SPACING[SpacingKeys];
+declare type Spacing = `${SpacingValues}` | `${SpacingValues} ${SpacingValues}` | `${SpacingValues} ${SpacingValues} ${SpacingValues}` | `${SpacingValues} ${SpacingValues} ${SpacingValues} ${SpacingValues}`;
+declare type ShadowKeys = keyof typeof ThemeablePropValues.SHADOW_TYPES;
+declare type Shadow = typeof ThemeablePropValues.SHADOW_TYPES[ShadowKeys];
+declare type StackingKeys = keyof typeof ThemeablePropValues.STACKING_TYPES;
+declare type Stacking = typeof ThemeablePropValues.STACKING_TYPES[StackingKeys];
+declare type BackgroundKeys = keyof typeof ThemeablePropValues.BACKGROUNDS;
+declare type Background = typeof ThemeablePropValues.BACKGROUNDS[BackgroundKeys];
+declare type BorderRadiiKeys = keyof typeof ThemeablePropValues.BORDER_RADII;
+declare type BorderRadiiValues = typeof ThemeablePropValues.BORDER_RADII[BorderRadiiKeys];
+declare type BorderRadii = `${BorderRadiiValues}` | `${BorderRadiiValues} ${BorderRadiiValues}` | `${BorderRadiiValues} ${BorderRadiiValues} ${BorderRadiiValues}` | `${BorderRadiiValues} ${BorderRadiiValues} ${BorderRadiiValues} ${BorderRadiiValues}`;
+declare type BorderWidthKeys = keyof typeof ThemeablePropValues.BORDER_WIDTHS;
+declare type BorderWidthValues = typeof ThemeablePropValues.BORDER_WIDTHS[BorderWidthKeys];
+declare type BorderWidth = `${BorderWidthValues}` | `${BorderWidthValues} ${BorderWidthValues}` | `${BorderWidthValues} ${BorderWidthValues} ${BorderWidthValues}` | `${BorderWidthValues} ${BorderWidthValues} ${BorderWidthValues} ${BorderWidthValues}`;
 export default ThemeablePropValues;
 export { ThemeablePropValues };
+export type { SpacingValues, Spacing, Shadow, Stacking, Background, BorderRadiiValues, BorderRadii, BorderWidthValues, BorderWidth };
 //# sourceMappingURL=ThemeablePropValues.d.ts.map

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

167591

increased by4.74%

Number of package files

80

increased by2.56%

Lines of code

3455

increased by2.58%

Worsened metrics

Dev dependency count

3

increased by50%

Dependency changes

• Updated@instructure/console@8.6.1-snapshot.45+913aab32c

• Updated@instructure/ui-decorator@8.6.1-snapshot.45+913aab32c

• Updated@instructure/ui-i18n@8.6.1-snapshot.45+913aab32c

• Updated@instructure/ui-themes@8.6.1-snapshot.45+913aab32c

• Updated@instructure/ui-utils@8.6.1-snapshot.45+913aab32c