@aesthetic/addon-mixins - npm Package Compare versions

Comparing version 0.1.1 to 0.1.2

esm/index.js

@@ -71,13 +71,15 @@ import { PALETTE_TYPES, SHADE_RANGES, BORDER_SIZES, BREAKPOINT_SIZES, SHADOW_SIZES, TEXT_SIZES } from '@aesthetic/system';
   return {
-    ':not(:focus):not(:active)': {
-      border: 0,
-      clip: 'rect(0, 0, 0, 0)',
-      clipPath: 'inset(50%)',
-      height: 1,
-      margin: 0,
-      overflow: 'hidden',
-      padding: 0,
-      position: 'absolute',
-      whiteSpace: 'nowrap',
-      width: 1
+    '@selectors': {
+      ':not(:focus):not(:active)': {
+        border: 0,
+        clip: 'rect(0, 0, 0, 0)',
+        clipPath: 'inset(50%)',
+        height: 1,
+        margin: 0,
+        overflow: 'hidden',
+        padding: 0,
+        position: 'absolute',
+        whiteSpace: 'nowrap',
+        width: 1
+      }
     }
@@ -145,4 +147,6 @@ };
     width: '100%',
-    '::-moz-focus-outer': {
-      border: 0
+    '@selectors': {
+      '::-moz-focus-outer': {
+        border: 0
+      }
     }
@@ -187,6 +191,7 @@ };
     '-webkit-font-smoothing': 'antialiased',
-    '-moz-osx-font-smoothing': 'grayscale'
+    '-moz-osx-font-smoothing': 'grayscale',
+    '@media': {}
   };
   BREAKPOINT_SIZES.forEach(function (size) {
-    declaration["@media " + _this.token("breakpoint-" + size + "-query")] = {
+    declaration['@media'][String(_this.token("breakpoint-" + size + "-query"))] = {
       fontSize: _this.var("breakpoint-" + size + "-root-text-size"),
@@ -193,0 +198,0 @@ lineHeight: _this.var("breakpoint-" + size + "-root-line-height")

lib/background.d.ts

@@ -1,2 +0,2 @@
-import { Rule } from '@aesthetic/types';
+import { Rule } from '@aesthetic/sss';
 import { Utilities } from '@aesthetic/system';
@@ -3,0 +3,0 @@ import { BackgroundOptions } from './types';

lib/border.d.ts

@@ -1,2 +0,2 @@
-import { Rule } from '@aesthetic/types';
+import { Rule } from '@aesthetic/sss';
 import { Utilities } from '@aesthetic/system';
@@ -3,0 +3,0 @@ import { BorderOptions } from './types';

lib/display.d.ts

@@ -1,5 +0,5 @@
-import { Rule } from '@aesthetic/types';
+import { LocalBlock, Rule } from '@aesthetic/sss';
 export declare function hideCompletely(): Rule;
 export declare function hideOffscreen(): Rule;
-export declare function hideVisually(): Rule;
+export declare function hideVisually(): LocalBlock;
 //# sourceMappingURL=display.d.ts.map

lib/foreground.d.ts

@@ -1,2 +0,2 @@
-import { Rule } from '@aesthetic/types';
+import { Rule } from '@aesthetic/sss';
 import { Utilities } from '@aesthetic/system';
@@ -3,0 +3,0 @@ import { ForegroundOptions } from './types';

lib/heading.d.ts

@@ -1,2 +0,2 @@
-import { Rule } from '@aesthetic/types';
+import { Rule } from '@aesthetic/sss';
 import { Utilities } from '@aesthetic/system';
@@ -3,0 +3,0 @@ import { HeadingOptions } from './types';

lib/index.js

@@ -73,13 +73,15 @@ 'use strict';
   return {
-    ':not(:focus):not(:active)': {
-      border: 0,
-      clip: 'rect(0, 0, 0, 0)',
-      clipPath: 'inset(50%)',
-      height: 1,
-      margin: 0,
-      overflow: 'hidden',
-      padding: 0,
-      position: 'absolute',
-      whiteSpace: 'nowrap',
-      width: 1
+    '@selectors': {
+      ':not(:focus):not(:active)': {
+        border: 0,
+        clip: 'rect(0, 0, 0, 0)',
+        clipPath: 'inset(50%)',
+        height: 1,
+        margin: 0,
+        overflow: 'hidden',
+        padding: 0,
+        position: 'absolute',
+        whiteSpace: 'nowrap',
+        width: 1
+      }
     }
@@ -147,4 +149,6 @@ };
     width: '100%',
-    '::-moz-focus-outer': {
-      border: 0
+    '@selectors': {
+      '::-moz-focus-outer': {
+        border: 0
+      }
     }
@@ -189,6 +193,7 @@ };
     '-webkit-font-smoothing': 'antialiased',
-    '-moz-osx-font-smoothing': 'grayscale'
+    '-moz-osx-font-smoothing': 'grayscale',
+    '@media': {}
   };
   system.BREAKPOINT_SIZES.forEach(function (size) {
-    declaration["@media " + _this.token("breakpoint-" + size + "-query")] = {
+    declaration['@media'][String(_this.token("breakpoint-" + size + "-query"))] = {
       fontSize: _this.var("breakpoint-" + size + "-root-text-size"),
@@ -195,0 +200,0 @@ lineHeight: _this.var("breakpoint-" + size + "-root-line-height")

lib/reset.d.ts

@@ -1,5 +0,5 @@
-import { Rule } from '@aesthetic/types';
+import { LocalBlock, Rule } from '@aesthetic/sss';
 import { ResetButtonOptions } from './types';
 export declare function resetButton({ flex }?: ResetButtonOptions): Rule;
-export declare function resetInput(): Rule;
+export declare function resetInput(): LocalBlock;
 export declare function resetList(): Rule;
@@ -6,0 +6,0 @@ export declare function resetMedia(): Rule;

lib/root.d.ts

@@ -1,4 +0,4 @@
-import { Rule } from '@aesthetic/types';
+import { LocalBlock } from '@aesthetic/sss';
 import { Utilities } from '@aesthetic/system';
-export declare function root(this: Utilities): Rule;
+export declare function root(this: Utilities): LocalBlock;
 //# sourceMappingURL=root.d.ts.map

lib/shadow.d.ts

@@ -1,2 +0,2 @@
-import { Rule } from '@aesthetic/types';
+import { Rule } from '@aesthetic/sss';
 import { Utilities } from '@aesthetic/system';
@@ -3,0 +3,0 @@ import { ShadowOptions } from './types';

lib/text.d.ts

@@ -1,2 +0,2 @@
-import { Rule } from '@aesthetic/types';
+import { Rule } from '@aesthetic/sss';
 import { Utilities } from '@aesthetic/system';
@@ -3,0 +3,0 @@ import { TextOptions } from './types';

lib/types.d.ts

@@ -0,1 +1,2 @@
+import { Rule } from '@aesthetic/types';
 import { BorderSize, ColorShade, MixinBuiltIn, PaletteType, ShadowSize, TextSize } from '@aesthetic/system';
@@ -37,23 +38,23 @@ export interface BackgroundOptions {
 declare module '@aesthetic/system' {
-    interface MixinUtil {
-        background: MixinBuiltIn<BackgroundOptions>;
-        border: MixinBuiltIn<BorderOptions>;
-        foreground: MixinBuiltIn<ForegroundOptions>;
-        heading: MixinBuiltIn<HeadingOptions>;
-        hideCompletely: MixinBuiltIn;
-        hideOffscreen: MixinBuiltIn;
-        hideVisually: MixinBuiltIn;
-        resetButton: MixinBuiltIn<ResetButtonOptions>;
-        resetInput: MixinBuiltIn;
-        resetList: MixinBuiltIn;
-        resetMedia: MixinBuiltIn;
-        resetTypography: MixinBuiltIn;
-        root: MixinBuiltIn;
-        shadow: MixinBuiltIn<ShadowOptions>;
-        text: MixinBuiltIn<TextOptions>;
-        textBreak: MixinBuiltIn;
-        textTruncate: MixinBuiltIn;
-        textWrap: MixinBuiltIn;
-        uiBox: MixinBuiltIn<UIBoxOptions>;
-        uiInteractive: MixinBuiltIn<UIInteractiveOptions>;
+    interface MixinUtil<T extends object = Rule, O extends object = object> {
+        background: MixinBuiltIn<T, BackgroundOptions>;
+        border: MixinBuiltIn<T, BorderOptions>;
+        foreground: MixinBuiltIn<T, ForegroundOptions>;
+        heading: MixinBuiltIn<T, HeadingOptions>;
+        hideCompletely: MixinBuiltIn<T>;
+        hideOffscreen: MixinBuiltIn<T>;
+        hideVisually: MixinBuiltIn<T>;
+        resetButton: MixinBuiltIn<T, ResetButtonOptions>;
+        resetInput: MixinBuiltIn<T>;
+        resetList: MixinBuiltIn<T>;
+        resetMedia: MixinBuiltIn<T>;
+        resetTypography: MixinBuiltIn<T>;
+        root: MixinBuiltIn<T>;
+        shadow: MixinBuiltIn<T, ShadowOptions>;
+        text: MixinBuiltIn<T, TextOptions>;
+        textBreak: MixinBuiltIn<T>;
+        textTruncate: MixinBuiltIn<T>;
+        textWrap: MixinBuiltIn<T>;
+        uiBox: MixinBuiltIn<T, UIBoxOptions>;
+        uiInteractive: MixinBuiltIn<T, UIInteractiveOptions>;
     }
@@ -60,0 +61,0 @@ }

lib/ui.d.ts

@@ -1,2 +0,2 @@
-import { Rule } from '@aesthetic/types';
+import { Rule } from '@aesthetic/sss';
 import { Utilities } from '@aesthetic/system';
@@ -3,0 +3,0 @@ import { UIBoxOptions, UIInteractiveOptions } from './types';

package.json

 {
   "name": "@aesthetic/addon-mixins",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "CSS-in-JS mixins for the Aesthetic design system.",
@@ -23,7 +23,7 @@ "keywords": [
   "peerDependencies": {
+    "@aesthetic/sss": "^0.4.0",
     "@aesthetic/system": "^0.3.0"
   },
   "dependencies": {
-    "@aesthetic/types": "^0.2.0",
-    "@aesthetic/utils": "^0.4.0"
+    "@aesthetic/utils": "^0.4.1"
   },
@@ -34,3 +34,3 @@ "funding": {
   },
-  "gitHead": "ac465fcc83a06ee1b679a1e6d29e6e1ae1bc63d2"
+  "gitHead": "67700b2a4307e451ddb61b3f7ca631080174838f"
 }

No alert changes

Improved metrics

Total package byte prevSize

34982

increased by2.25%

Lines of code

784

increased by1.42%

Dependency changes

• + Added@aesthetic/sss@0.4.6(transitive)

• - Removed@aesthetic/types@^0.2.0

• Updated@aesthetic/utils@^0.4.1