@theme-ui/css - npm Package Compare versions

Comparing version 0.4.0-rc.13 to 0.5.0-alpha.0

dist/index.esm.js

@@ -0,1 +1,3 @@
+import '@emotion/react';
+
 function _extends() {
@@ -2,0 +4,0 @@ _extends = Object.assign || function (target) {

dist/index.js

@@ -0,1 +1,3 @@
+require('@emotion/react');
+
 function _extends() {
@@ -2,0 +4,0 @@ _extends = Object.assign || function (target) {

dist/index.modern.js

@@ -0,1 +1,3 @@
+import '@emotion/react';
+
 function _extends() {
@@ -2,0 +4,0 @@ _extends = Object.assign || function (target) {

dist/index.umd.js

 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(['exports'], factory) :
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@emotion/react')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@emotion/react'], factory) :
   (global = global || self, factory(global.css = {}));
@@ -5,0 +5,0 @@ }(this, (function (exports) {

dist/types.d.ts

 import * as CSS from 'csstype';
+import '@emotion/react';
 declare type StandardCSSProperties = CSS.Properties<number | string>;
@@ -292,14 +293,14 @@ /**
     /**
-    * The **`scrollPaddingX`** is shorthand property for CSS properties **`scroll-padding-left`** and **`scroll-padding-right`**. They set the width of the scroll padding area on the left and right side of an element.
-    *
-    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-left
-    * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-right
-    */
+     * The **`scrollPaddingX`** is shorthand property for CSS properties **`scroll-padding-left`** and **`scroll-padding-right`**. They set the width of the scroll padding area on the left and right side of an element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-left
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-right
+     */
     scrollPaddingX?: StandardCSSProperties['scrollPaddingLeft'];
     /**
-       * The **`scrollPaddingY`** is shorthand property for CSS properties **`scroll-padding-top`** and **`scroll-padding-bottom`**. They set the width of the scroll padding area on the top and bottom side of an element.
-       *
-       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
-       * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-bottom
-       */
+     * The **`scrollPaddingY`** is shorthand property for CSS properties **`scroll-padding-top`** and **`scroll-padding-bottom`**. They set the width of the scroll padding area on the top and bottom side of an element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-top
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-padding-bottom
+     */
     scrollPaddingY?: StandardCSSProperties['scrollPaddingTop'];
@@ -322,3 +323,3 @@ size?: StandardCSSProperties['width'];
      */
-    boxShadow?: CSS.BoxShadowProperty | number;
+    boxShadow?: CSS.Property.BoxShadow | number;
     /**
@@ -336,3 +337,3 @@ * The **`font-weight`** CSS property specifies the weight (or boldness) of the font. The font weights available to you will depend on the `font-family` you are using. Some fonts are only
      */
-    fontWeight?: CSS.FontWeightProperty | string;
+    fontWeight?: CSS.Property.FontWeight | string;
     /**
@@ -349,3 +350,3 @@ * The **`border-top-style`** CSS property sets the line style of an element's top `border`.
      */
-    borderTopStyle?: CSS.BorderTopStyleProperty | string;
+    borderTopStyle?: CSS.Property.BorderTopStyle | string;
     /**
@@ -362,3 +363,3 @@ * The **`border-top-width`** CSS property sets the width of the top border of an element.
      */
-    borderTopWidth?: CSS.BorderTopWidthProperty<never> | string;
+    borderTopWidth?: CSS.Property.BorderTopWidth<never> | string;
     /**
@@ -375,3 +376,3 @@ * The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`.
      */
-    borderBottomStyle?: CSS.BorderBottomStyleProperty | string;
+    borderBottomStyle?: CSS.Property.BorderBottomStyle | string;
     /**
@@ -388,3 +389,3 @@ * The **`border-right-style`** CSS property sets the line style of an element's right `border`.
      */
-    borderRightStyle?: CSS.BorderRightStyleProperty | string;
+    borderRightStyle?: CSS.Property.BorderRightStyle | string;
     /**
@@ -401,3 +402,3 @@ * The **`border-left-style`** CSS property sets the line style of an element's left `border`.
      */
-    borderLeftStyle?: CSS.BorderLeftStyleProperty | string;
+    borderLeftStyle?: CSS.Property.BorderLeftStyle | string;
     /**
@@ -413,3 +414,3 @@ * The **`border-radius`** CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
      */
-    borderRadius?: CSS.BorderRadiusProperty<string | number>;
+    borderRadius?: CSS.Property.BorderRadius<string | number>;
     /**
@@ -426,3 +427,3 @@ * The **`z-index`** CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
      */
-    zIndex?: CSS.ZIndexProperty | string;
+    zIndex?: CSS.Property.ZIndex | string;
 }
@@ -497,23 +498,23 @@ /**
      */
-    background?: CSS.ColorProperty;
+    background?: CSS.Property.Color;
     /**
      * Body foreground color
      */
-    text?: CSS.ColorProperty;
+    text?: CSS.Property.Color;
     /**
      * Primary brand color for links, buttons, etc.
      */
-    primary?: CSS.ColorProperty;
+    primary?: CSS.Property.Color;
     /**
      * A secondary brand color for alternative styling
      */
-    secondary?: CSS.ColorProperty;
+    secondary?: CSS.Property.Color;
     /**
      * A contrast color for emphasizing UI
      */
-    accent?: CSS.ColorProperty;
+    accent?: CSS.Property.Color;
     /**
      * A background color for highlighting text
      */
-    highlight?: CSS.ColorProperty;
+    highlight?: CSS.Property.Color;
     /**
@@ -523,4 +524,4 @@ * A faint color for backgrounds, borders, and accents that do not require
      */
-    muted?: CSS.ColorProperty;
-    [k: string]: CSS.ColorProperty | Scale<CSS.ColorProperty> | undefined;
+    muted?: CSS.Property.Color;
+    [k: string]: CSS.Property.Color | Scale<CSS.Property.Color> | undefined;
 }
@@ -573,19 +574,19 @@ export declare type ColorModesScale = ColorMode & {
     };
-    space?: Scale<CSS.MarginProperty<number | string>>;
-    fontSizes?: Scale<CSS.FontSizeProperty<number>>;
-    fonts?: Scale<CSS.FontFamilyProperty>;
-    fontWeights?: Scale<CSS.FontWeightProperty>;
-    lineHeights?: Scale<CSS.LineHeightProperty<TLengthStyledSystem>>;
-    letterSpacings?: Scale<CSS.LetterSpacingProperty<TLengthStyledSystem>>;
-    sizes?: Scale<CSS.HeightProperty<{}> | CSS.WidthProperty<{}>>;
-    borders?: Scale<CSS.BorderProperty<{}>>;
-    borderStyles?: Scale<CSS.BorderProperty<{}>>;
-    borderWidths?: Scale<CSS.BorderWidthProperty<TLengthStyledSystem>>;
-    radii?: Scale<CSS.BorderRadiusProperty<TLengthStyledSystem>>;
-    shadows?: Scale<CSS.BoxShadowProperty>;
-    zIndices?: Scale<CSS.ZIndexProperty>;
+    space?: Scale<CSS.Property.Margin<number | string>>;
+    fontSizes?: Scale<CSS.Property.FontSize<number>>;
+    fonts?: Scale<CSS.Property.FontFamily>;
+    fontWeights?: Scale<CSS.Property.FontWeight>;
+    lineHeights?: Scale<CSS.Property.LineHeight<TLengthStyledSystem>>;
+    letterSpacings?: Scale<CSS.Property.LetterSpacing<TLengthStyledSystem>>;
+    sizes?: Scale<CSS.Property.Height<{}> | CSS.Property.Width<{}>>;
+    borders?: Scale<CSS.Property.Border<{}>>;
+    borderStyles?: Scale<CSS.Property.Border<{}>>;
+    borderWidths?: Scale<CSS.Property.BorderWidth<TLengthStyledSystem>>;
+    radii?: Scale<CSS.Property.BorderRadius<TLengthStyledSystem>>;
+    shadows?: Scale<CSS.Property.BoxShadow>;
+    zIndices?: Scale<CSS.Property.ZIndex>;
     colorStyles?: Scale<ThemeUICSSProperties>;
     textStyles?: Scale<ThemeUICSSProperties>;
-    opacities?: Scale<CSS.OpacityProperty>;
-    transitions?: Scale<CSS.TransitionProperty>;
+    opacities?: Scale<CSS.Property.Opacity>;
+    transitions?: Scale<CSS.Property.Transition>;
     /**
@@ -758,2 +759,8 @@ * Enable/disable custom CSS properties/variables if lower browser
 }
+interface ThemeUITheme extends Theme {
+}
+declare module '@emotion/react' {
+    interface Theme extends ThemeUITheme {
+    }
+}
 export {};

package.json

 {
   "name": "@theme-ui/css",
-  "version": "0.4.0-rc.13",
+  "version": "0.5.0-alpha.0",
   "source": "src/index.ts",
@@ -20,5 +20,6 @@ "main": "dist/index.js",
   "dependencies": {
-    "csstype": "^2.5.7"
+    "@emotion/react": "^11.1.1",
+    "csstype": "^3.0.5"
   },
-  "gitHead": "77155d2d7615ea50bec8e206625ad0b33d618de0"
+  "gitHead": "4a277d27fcae7d070af2b03ea82365eb89ae5bbc"
 }

src/types.ts

 import * as CSS from 'csstype'
+import '@emotion/react'
 
@@ -301,3 +302,3 @@ type StandardCSSProperties = CSS.Properties<number | string>
 
-   /**
+  /**
    * The **`scrollPaddingX`** is shorthand property for CSS properties **`scroll-padding-left`** and **`scroll-padding-right`**. They set the width of the scroll padding area on the left and right side of an element.
@@ -310,3 +311,3 @@ *
 
-/**
+  /**
    * The **`scrollPaddingY`** is shorthand property for CSS properties **`scroll-padding-top`** and **`scroll-padding-bottom`**. They set the width of the scroll padding area on the top and bottom side of an element.
@@ -317,3 +318,3 @@ *
    */
-  scrollPaddingY?: StandardCSSProperties['scrollPaddingTop']  
+  scrollPaddingY?: StandardCSSProperties['scrollPaddingTop']
   size?: StandardCSSProperties['width']
@@ -336,3 +337,3 @@ }
    */
-  boxShadow?: CSS.BoxShadowProperty | number
+  boxShadow?: CSS.Property.BoxShadow | number
   /**
@@ -350,3 +351,3 @@ * The **`font-weight`** CSS property specifies the weight (or boldness) of the font. The font weights available to you will depend on the `font-family` you are using. Some fonts are only
    */
-  fontWeight?: CSS.FontWeightProperty | string
+  fontWeight?: CSS.Property.FontWeight | string
 
@@ -364,3 +365,3 @@ /**
    */
-  borderTopStyle?: CSS.BorderTopStyleProperty | string
+  borderTopStyle?: CSS.Property.BorderTopStyle | string
   /**
@@ -377,3 +378,3 @@ * The **`border-top-width`** CSS property sets the width of the top border of an element.
    */
-  borderTopWidth?: CSS.BorderTopWidthProperty<never> | string
+  borderTopWidth?: CSS.Property.BorderTopWidth<never> | string
   /**
@@ -390,3 +391,3 @@ * The **`border-bottom-style`** CSS property sets the line style of an element's bottom `border`.
    */
-  borderBottomStyle?: CSS.BorderBottomStyleProperty | string
+  borderBottomStyle?: CSS.Property.BorderBottomStyle | string
   /**
@@ -403,3 +404,3 @@ * The **`border-right-style`** CSS property sets the line style of an element's right `border`.
    */
-  borderRightStyle?: CSS.BorderRightStyleProperty | string
+  borderRightStyle?: CSS.Property.BorderRightStyle | string
   /**
@@ -416,3 +417,3 @@ * The **`border-left-style`** CSS property sets the line style of an element's left `border`.
    */
-  borderLeftStyle?: CSS.BorderLeftStyleProperty | string
+  borderLeftStyle?: CSS.Property.BorderLeftStyle | string
   /**
@@ -428,3 +429,3 @@ * The **`border-radius`** CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
    */
-  borderRadius?: CSS.BorderRadiusProperty<string | number>
+  borderRadius?: CSS.Property.BorderRadius<string | number>
 
@@ -442,3 +443,3 @@ /**
    */
-  zIndex?: CSS.ZIndexProperty | string
+  zIndex?: CSS.Property.ZIndex | string
 }
@@ -536,3 +537,3 @@
    */
-  background?: CSS.ColorProperty
+  background?: CSS.Property.Color
 
@@ -542,3 +543,3 @@ /**
    */
-  text?: CSS.ColorProperty
+  text?: CSS.Property.Color
 
@@ -548,3 +549,3 @@ /**
    */
-  primary?: CSS.ColorProperty
+  primary?: CSS.Property.Color
 
@@ -554,3 +555,3 @@ /**
    */
-  secondary?: CSS.ColorProperty
+  secondary?: CSS.Property.Color
 
@@ -560,3 +561,3 @@ /**
    */
-  accent?: CSS.ColorProperty
+  accent?: CSS.Property.Color
 
@@ -566,3 +567,3 @@ /**
    */
-  highlight?: CSS.ColorProperty
+  highlight?: CSS.Property.Color
 
@@ -573,5 +574,5 @@ /**
    */
-  muted?: CSS.ColorProperty
+  muted?: CSS.Property.Color
 
-  [k: string]: CSS.ColorProperty | Scale<CSS.ColorProperty> | undefined
+  [k: string]: CSS.Property.Color | Scale<CSS.Property.Color> | undefined
 }
@@ -625,19 +626,19 @@
   mediaQueries?: { [size: string]: string }
-  space?: Scale<CSS.MarginProperty<number | string>>
-  fontSizes?: Scale<CSS.FontSizeProperty<number>>
-  fonts?: Scale<CSS.FontFamilyProperty>
-  fontWeights?: Scale<CSS.FontWeightProperty>
-  lineHeights?: Scale<CSS.LineHeightProperty<TLengthStyledSystem>>
-  letterSpacings?: Scale<CSS.LetterSpacingProperty<TLengthStyledSystem>>
-  sizes?: Scale<CSS.HeightProperty<{}> | CSS.WidthProperty<{}>>
-  borders?: Scale<CSS.BorderProperty<{}>>
-  borderStyles?: Scale<CSS.BorderProperty<{}>>
-  borderWidths?: Scale<CSS.BorderWidthProperty<TLengthStyledSystem>>
-  radii?: Scale<CSS.BorderRadiusProperty<TLengthStyledSystem>>
-  shadows?: Scale<CSS.BoxShadowProperty>
-  zIndices?: Scale<CSS.ZIndexProperty>
+  space?: Scale<CSS.Property.Margin<number | string>>
+  fontSizes?: Scale<CSS.Property.FontSize<number>>
+  fonts?: Scale<CSS.Property.FontFamily>
+  fontWeights?: Scale<CSS.Property.FontWeight>
+  lineHeights?: Scale<CSS.Property.LineHeight<TLengthStyledSystem>>
+  letterSpacings?: Scale<CSS.Property.LetterSpacing<TLengthStyledSystem>>
+  sizes?: Scale<CSS.Property.Height<{}> | CSS.Property.Width<{}>>
+  borders?: Scale<CSS.Property.Border<{}>>
+  borderStyles?: Scale<CSS.Property.Border<{}>>
+  borderWidths?: Scale<CSS.Property.BorderWidth<TLengthStyledSystem>>
+  radii?: Scale<CSS.Property.BorderRadius<TLengthStyledSystem>>
+  shadows?: Scale<CSS.Property.BoxShadow>
+  zIndices?: Scale<CSS.Property.ZIndex>
   colorStyles?: Scale<ThemeUICSSProperties>
   textStyles?: Scale<ThemeUICSSProperties>
-  opacities?: Scale<CSS.OpacityProperty>
-  transitions?: Scale<CSS.TransitionProperty>
+  opacities?: Scale<CSS.Property.Opacity>
+  transitions?: Scale<CSS.Property.Transition>
 
@@ -830,1 +831,7 @@ /**
 }
+
+interface ThemeUITheme extends Theme {}
+
+declare module '@emotion/react' {
+  export interface Theme extends ThemeUITheme {}
+}

test/errors-and-inference.ts

@@ -1,14 +0,9 @@
-import { expecter } from 'ts-snippet'
+import { expecter } from '@theme-ui/test-utils'
 
 import { css, get, Theme } from '../src'
 
-const expectSnippet = expecter(
-  (code) => `
+const expectSnippet = expecter(`
   import { css } from './packages/css/src'
+`)
 
-  ${code}
-`,
-  { strict: true, noErrorTruncation: true }
-)
-
 describe('Theme', () => {
@@ -28,3 +23,3 @@ test('shows friendly error only on bad property', () => {
     `).toFail(
-      /Error snippet\.ts \(\d+,\d+\): Type '"foo"' is not assignable to type [\s\S]+'./
+      /Error snippet\.tsx \(\d+,\d+\): Type '"foo"' is not assignable to type [\s\S]+'./
     )
@@ -44,3 +39,3 @@ })
       new RegExp(
-        `Error snippet\\.ts \\(\\d+,\\d+\\): Type '{ color: string; widows: "bar"; }'` +
+        `Error snippet\.tsx \\(\\d+,\\d+\\): Type '{ color: "blue"; widows: "bar"; }'` +
           ` is not assignable to type '[\\s\\S]+'.\\n\\s+` +
@@ -168,5 +163,5 @@ `Types of property 'widows' are incompatible.\\n\\s+` +
 
-  expectedSnippet.toInfer('baseColors', '(string | undefined)[]')
-  expectedSnippet.toInfer('light', 'string')
-  expectedSnippet.toInfer('dark', 'string')
+  expectedSnippet.toInfer('baseColors', '((string & {}) | undefined)[]')
+  expectedSnippet.toInfer('light', 'Color')
+  expectedSnippet.toInfer('dark', 'Color')
 })

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

Improved metrics

Total package byte prevSize

814595

increased by180.02%

Lines of code

5058

increased by0.22%

Worsened metrics

Dependency count

2

increased by100%

Number of package files

68

decreased by-54.36%

Dependency changes

• + Added@emotion/react@^11.1.1

• + Added@babel/code-frame@7.24.7(transitive)

• + Added@babel/generator@7.25.6(transitive)

• + Added@babel/helper-module-imports@7.24.7(transitive)

• + Added@babel/helper-string-parser@7.24.8(transitive)

• + Added@babel/helper-validator-identifier@7.24.7(transitive)

• + Added@babel/highlight@7.24.7(transitive)

• + Added@babel/parser@7.25.6(transitive)

• + Added@babel/runtime@7.25.6(transitive)

• + Added@babel/template@7.25.0(transitive)

• + Added@babel/traverse@7.25.6(transitive)

• + Added@babel/types@7.25.6(transitive)

• + Added@emotion/babel-plugin@11.12.0(transitive)

• + Added@emotion/cache@11.13.1(transitive)

• + Added@emotion/hash@0.9.2(transitive)

• + Added@emotion/memoize@0.9.0(transitive)

• + Added@emotion/react@11.13.3(transitive)

• + Added@emotion/serialize@1.3.1(transitive)

• + Added@emotion/sheet@1.4.0(transitive)

• + Added@emotion/unitless@0.10.0(transitive)

• + Added@emotion/use-insertion-effect-with-fallbacks@1.1.0(transitive)

• + Added@emotion/utils@1.4.0(transitive)

• + Added@emotion/weak-memoize@0.4.0(transitive)

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Addedansi-styles@3.2.1(transitive)

• + Addedbabel-plugin-macros@3.1.0(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedchalk@2.4.2(transitive)

• + Addedcolor-convert@1.9.3(transitive)

• + Addedcolor-name@1.1.3(transitive)

• + Addedconvert-source-map@1.9.0(transitive)

• + Addedcosmiconfig@7.1.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addeddebug@4.3.7(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedescape-string-regexp@1.0.54.0.0(transitive)

• + Addedfind-root@1.1.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedhas-flag@3.0.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addedhoist-non-react-statics@3.3.2(transitive)

• + Addedimport-fresh@3.3.0(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-core-module@2.15.1(transitive)

• + Addedjs-tokens@4.0.0(transitive)

• + Addedjsesc@2.5.2(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedms@2.1.3(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicocolors@1.1.0(transitive)

• + Addedreact@18.3.1(transitive)

• + Addedreact-is@16.13.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedsource-map@0.5.7(transitive)

• + Addedstylis@4.2.0(transitive)

• + Addedsupports-color@5.5.0(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedto-fast-properties@2.0.0(transitive)

• + Addedyaml@1.10.2(transitive)

• - Removedcsstype@2.6.21(transitive)

• Updatedcsstype@^3.0.5