aesthetic - npm Package Compare versions

Comparing version 4.1.0 to 4.1.1

CHANGELOG.md

@@ -0,1 +1,17 @@
+### 4.1.1 - 2019-09-15
+
+#### 🐞 Fixes
+
+- Now supports server-side rendering.
+  - Doesn't set `dir` on `html` unless a document exists.
+  - Only uses `useLayoutEffect` in the browser.
+
+#### 📦 Dependencies
+
+- Updated all to latest.
+
+#### ⚙️ Types
+
+- Refine types and replace `any` with `unknown`.
+
 ## 4.1.0 - 2019-07-10
@@ -2,0 +18,0 @@

esm/Aesthetic.js

@@ -50,3 +50,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
   _proto.applyGlobalStyles = function applyGlobalStyles(baseOptions) {
-    document.documentElement.setAttribute('dir', this.options.rtl ? 'rtl' : 'ltr');
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('dir', this.options.rtl ? 'rtl' : 'ltr');
+    }
+
     var options = this.getPreparedTransformOptions(_extends({}, baseOptions, {
@@ -53,0 +56,0 @@ global: true,

lib/Aesthetic.js

@@ -64,3 +64,6 @@ "use strict";
   _proto.applyGlobalStyles = function applyGlobalStyles(baseOptions) {
-    document.documentElement.setAttribute('dir', this.options.rtl ? 'rtl' : 'ltr');
+    if (typeof document !== 'undefined') {
+      document.documentElement.setAttribute('dir', this.options.rtl ? 'rtl' : 'ltr');
+    }
+
     var options = this.getPreparedTransformOptions(_extends({}, baseOptions, {
@@ -67,0 +70,0 @@ global: true,

lib/ClassNameAesthetic.d.ts

 import Aesthetic from './Aesthetic';
 import { ClassName } from './types';
-export default class ClassNameAesthetic<Theme extends object> extends Aesthetic<Theme, any, ClassName> {
-    transformToClassName(styles: any[]): ClassName;
+export default class ClassNameAesthetic<Theme extends object> extends Aesthetic<Theme, {}, ClassName> {
+    transformToClassName(styles: unknown[]): ClassName;
 }
 //# sourceMappingURL=ClassNameAesthetic.d.ts.map

lib/Ruleset.d.ts

@@ -13,3 +13,3 @@ import Sheet from './Sheet';
     addNested(selector: string, ruleset: Ruleset<Block>, merge?: boolean): this;
-    addProperty(key: keyof Block, value: any): this;
+    addProperty<K extends keyof Block>(key: K, value: unknown): this;
     addProperties(properties: Partial<Block>): this;
@@ -16,0 +16,0 @@ createRuleset(selector: string): Ruleset<Block>;

lib/TestAesthetic.d.ts

 import Aesthetic from './Aesthetic';
 import { ClassName, SheetMap } from './types';
-export default class TestAesthetic<Theme extends object = any> extends Aesthetic<Theme, any, string> {
+export default class TestAesthetic<Theme extends object = {}> extends Aesthetic<Theme, {}, string> {
     isParsedBlock(block: unknown): block is string;
-    parseStyleSheet(styleSheet: SheetMap<any>): SheetMap<string>;
+    parseStyleSheet(styleSheet: SheetMap<{}>): SheetMap<string>;
     transformToClassName(styles: string[]): ClassName;
 }
 //# sourceMappingURL=TestAesthetic.d.ts.map

lib/testUtils.d.ts

 import CSS from 'csstype';
 import Aesthetic from './Aesthetic';
 import TestAesthetic from './TestAesthetic';
-import { FontFace, Direction } from './types';
+import { FontFace, Direction, SheetMap, Keyframes } from './types';
 export { TestAesthetic };
@@ -10,7 +10,10 @@ export interface TestTheme {
 }
-export declare function registerTestTheme(aesthetic: Aesthetic<TestTheme, any, any>): void;
+export declare function registerTestTheme(aesthetic: Aesthetic<TestTheme, {}, {}>): void;
 export declare function cleanupStyleElements(): void;
 export declare function getFlushedStyles(namespace?: string): string;
-export declare function convertDirection(value: object | object[], dir: Direction): any;
-export declare function renderAndExpect(aesthetic: Aesthetic<any, any, any>, styleSheet: any, expectedStyles: any, { dir, global, }: {
+export interface UnknownObject {
+    [key: string]: unknown;
+}
+export declare function convertDirection(value: UnknownObject | UnknownObject[], dir: Direction): {};
+export declare function renderAndExpect(aesthetic: Aesthetic<{}, {}, {}>, styleSheet: SheetMap<string | UnknownObject>, expectedStyles: UnknownObject | undefined, { dir, global, }: {
     dir: Direction;
@@ -36,21 +39,4 @@ global?: boolean;
 export declare const FONT_CIRCULAR_MULTIPLE_FLAT_SRC: CSS.FontFace[];
-export declare const KEYFRAME_FADE: {
-    from: {
-        opacity: number;
-    };
-    to: {
-        opacity: number;
-    };
-};
-export declare const KEYFRAME_SLIDE_PERCENT: {
-    '0%': {
-        left: string;
-    };
-    '50%': {
-        left: string;
-    };
-    '100%': {
-        left: string;
-    };
-};
+export declare const KEYFRAME_FADE: Keyframes;
+export declare const KEYFRAME_SLIDE_PERCENT: Keyframes;
 export declare const SYNTAX_UNIFIED_LOCAL: {
@@ -92,10 +78,3 @@ button: {
     '@keyframes': {
-        fade: {
-            from: {
-                opacity: number;
-            };
-            to: {
-                opacity: number;
-            };
-        };
+        fade: Keyframes;
     };
@@ -238,10 +217,3 @@ };
     '@keyframes': {
-        fade: {
-            from: {
-                opacity: number;
-            };
-            to: {
-                opacity: number;
-            };
-        };
+        fade: Keyframes;
     };
@@ -251,13 +223,3 @@ };
     '@keyframes': {
-        slide: {
-            '0%': {
-                left: string;
-            };
-            '50%': {
-                left: string;
-            };
-            '100%': {
-                left: string;
-            };
-        };
+        slide: Keyframes;
     };
@@ -267,21 +229,4 @@ };
     '@keyframes': {
-        fade: {
-            from: {
-                opacity: number;
-            };
-            to: {
-                opacity: number;
-            };
-        };
-        slide: {
-            '0%': {
-                left: string;
-            };
-            '50%': {
-                left: string;
-            };
-            '100%': {
-                left: string;
-            };
-        };
+        fade: Keyframes;
+        slide: Keyframes;
     };
@@ -293,33 +238,8 @@ };
             name: string;
-            '0%': {
-                left: string;
-            };
-            '50%': {
-                left: string;
-            };
-            '100%': {
-                left: string;
-            };
+            from?: import("./types").Block | undefined;
+            to?: import("./types").Block | undefined;
         };
     };
     multiple: {
-        animationName: (string | {
-            from: {
-                opacity: number;
-            };
-            to: {
-                opacity: number;
-            };
-        } | {
-            name: string;
-            '0%': {
-                left: string;
-            };
-            '50%': {
-                left: string;
-            };
-            '100%': {
-                left: string;
-            };
-        })[];
+        animationName: (string | Keyframes)[];
     };
@@ -326,0 +246,0 @@ };

lib/types.d.ts

@@ -29,3 +29,3 @@ import CSS from 'csstype';
 };
-export declare type Keyframes = {
+export interface Keyframes {
     from?: Block;
@@ -35,6 +35,6 @@ to?: Block;
     [percent: string]: Block | string | undefined;
-};
-export declare type SheetMap<T> = {
+}
+export interface SheetMap<T> {
     [selector: string]: T;
-};
+}
 export declare type ComponentBlock = Block & {
@@ -59,4 +59,4 @@ '@fallbacks'?: PropertiesFallback;
 };
-export declare type StyleSheetDefinition<Theme, T> = (theme: Theme) => T extends any ? StyleSheet : StyleSheet & StyleSheetNeverize<T>;
-export declare type GlobalSheet = {
+export declare type StyleSheetDefinition<Theme, T> = (theme: Theme) => T extends unknown ? StyleSheet : StyleSheet & StyleSheetNeverize<T>;
+export interface GlobalSheet {
     '@charset'?: string;
@@ -75,3 +75,3 @@ '@font-face'?: {
     '@viewport'?: Block;
-};
+}
 export declare type GlobalSheetNeverize<T> = {
@@ -78,0 +78,0 @@ [K in keyof T]: K extends keyof GlobalSheet ? GlobalSheet[K] : never;

lib/UnifiedSyntax.d.ts

@@ -65,19 +65,14 @@ import Ruleset from './Ruleset';
      */
-    emit(eventName: 'attribute', args: [Ruleset<NativeBlock>, string, Ruleset<NativeBlock>]): any;
-    emit(eventName: 'charset', args: [Sheet<NativeBlock>, string]): any;
-    emit(eventName: 'css', args: [string, string]): any;
-    emit(eventName: 'fallback', args: [Ruleset<NativeBlock>, keyof NativeBlock, any[]]): any;
-    emit(eventName: 'font-face', args: [Sheet<NativeBlock>, Ruleset<NativeBlock>[], string, string[][]]): any;
-    emit(eventName: 'global', args: [Sheet<NativeBlock>, string, Ruleset<NativeBlock>]): any;
-    emit(eventName: 'import', args: [Sheet<NativeBlock>, string[]]): any;
-    emit(eventName: 'keyframe', args: [Sheet<NativeBlock>, Ruleset<NativeBlock>, string]): any;
-    emit(eventName: 'media', args: [Ruleset<NativeBlock>, string, Ruleset<NativeBlock>]): any;
-    emit(eventName: 'page', args: [Sheet<NativeBlock>, Ruleset<NativeBlock>]): any;
-    emit(eventName: 'property', args: [Ruleset<NativeBlock>, keyof NativeBlock, any]): any;
-    emit(eventName: 'property:animationName', args: [Ruleset<NativeBlock>, Properties['animationName']]): any;
-    emit(eventName: 'property:fontFamily', args: [Ruleset<NativeBlock>, Properties['fontFamily']]): any;
-    emit(eventName: 'pseudo', args: [Ruleset<NativeBlock>, string, Ruleset<NativeBlock>]): any;
-    emit(eventName: 'selector', args: [Ruleset<NativeBlock>, string, Ruleset<NativeBlock>]): any;
-    emit(eventName: 'support', args: [Ruleset<NativeBlock>, string, Ruleset<NativeBlock>]): any;
-    emit(eventName: 'viewport', args: [Sheet<NativeBlock>, Ruleset<NativeBlock>]): any;
+    emit(eventName: 'attribute' | 'media' | 'pseudo' | 'selector' | 'support', args: [Ruleset<NativeBlock>, string, Ruleset<NativeBlock>]): unknown;
+    emit(eventName: 'charset', args: [Sheet<NativeBlock>, string]): unknown;
+    emit(eventName: 'css', args: [string, string]): unknown;
+    emit(eventName: 'fallback', args: [Ruleset<NativeBlock>, keyof NativeBlock, unknown[]]): unknown;
+    emit(eventName: 'font-face', args: [Sheet<NativeBlock>, Ruleset<NativeBlock>[], string, string[][]]): unknown;
+    emit(eventName: 'global', args: [Sheet<NativeBlock>, string, Ruleset<NativeBlock>]): unknown;
+    emit(eventName: 'import', args: [Sheet<NativeBlock>, string[]]): unknown;
+    emit(eventName: 'keyframe', args: [Sheet<NativeBlock>, Ruleset<NativeBlock>, string]): unknown;
+    emit(eventName: 'page' | 'viewport', args: [Sheet<NativeBlock>, Ruleset<NativeBlock>]): unknown;
+    emit(eventName: 'property', args: [Ruleset<NativeBlock>, keyof NativeBlock, unknown]): unknown;
+    emit(eventName: 'property:animationName', args: [Ruleset<NativeBlock>, Properties['animationName']]): unknown;
+    emit(eventName: 'property:fontFamily', args: [Ruleset<NativeBlock>, Properties['fontFamily']]): unknown;
     /**
@@ -90,6 +85,6 @@ * Delete an event listener.
      */
-    on(eventName: 'attribute', callback: (ruleset: Ruleset<NativeBlock>, name: string, value: Ruleset<NativeBlock>) => void): this;
+    on(eventName: 'attribute' | 'pseudo' | 'selector' | 'support', callback: (ruleset: Ruleset<NativeBlock>, name: string, value: Ruleset<NativeBlock>) => void): this;
     on(eventName: 'charset', callback: (sheet: Sheet<NativeBlock>, charset: string) => void): this;
     on(eventName: 'css', callback: (css: string, className: string) => void): this;
-    on(eventName: 'fallback', callback: (ruleset: Ruleset<NativeBlock>, name: keyof NativeBlock, values: any[]) => void): this;
+    on(eventName: 'fallback', callback: (ruleset: Ruleset<NativeBlock>, name: keyof NativeBlock, values: unknown[]) => void): this;
     on(eventName: 'font-face', callback: (sheet: Sheet<NativeBlock>, fontFaces: Ruleset<NativeBlock>[], fontFamily: string, srcPaths: string[][]) => void): this;
@@ -100,11 +95,7 @@ on(eventName: 'global', callback: (sheet: Sheet<NativeBlock>, selector: string, ruleset: Ruleset<NativeBlock>) => void): this;
     on(eventName: 'media', callback: (ruleset: Ruleset<NativeBlock>, query: string, value: Ruleset<NativeBlock>) => void): this;
-    on(eventName: 'page', callback: (sheet: Sheet<NativeBlock>, ruleset: Ruleset<NativeBlock>) => void): this;
-    on(eventName: 'property', callback: (ruleset: Ruleset<NativeBlock>, name: keyof NativeBlock, value: any) => void): this;
-    on(eventName: 'property:animationName', callback: (ruleset: Ruleset<NativeBlock>, value: Properties['animationName']) => any): this;
-    on(eventName: 'property:fontFamily', callback: (ruleset: Ruleset<NativeBlock>, value: Properties['fontFamily']) => any): this;
-    on(eventName: 'pseudo', callback: (ruleset: Ruleset<NativeBlock>, name: string, value: Ruleset<NativeBlock>) => void): this;
-    on(eventName: 'selector', callback: (ruleset: Ruleset<NativeBlock>, name: string, value: Ruleset<NativeBlock>) => void): this;
-    on(eventName: 'support', callback: (ruleset: Ruleset<NativeBlock>, query: string, value: Ruleset<NativeBlock>) => void): this;
-    on(eventName: 'viewport', callback: (sheet: Sheet<NativeBlock>, ruleset: Ruleset<NativeBlock>) => void): this;
+    on(eventName: 'page' | 'viewport', callback: (sheet: Sheet<NativeBlock>, ruleset: Ruleset<NativeBlock>) => void): this;
+    on(eventName: 'property', callback: (ruleset: Ruleset<NativeBlock>, name: keyof NativeBlock, value: unknown) => void): this;
+    on(eventName: 'property:animationName', callback: (ruleset: Ruleset<NativeBlock>, value: Properties['animationName']) => unknown): this;
+    on(eventName: 'property:fontFamily', callback: (ruleset: Ruleset<NativeBlock>, value: Properties['fontFamily']) => unknown): this;
 }
 //# sourceMappingURL=UnifiedSyntax.d.ts.map

package.json

 {
   "name": "aesthetic",
-  "version": "4.1.0",
+  "version": "4.1.1",
   "description": "Aesthetic is a powerful type-safe, framework agnostic, CSS-in-JS library for styling components through the use of adapters.",
@@ -30,15 +30,15 @@ "keywords": [
   "dependencies": {
-    "aesthetic-utils": "^2.0.0",
+    "aesthetic-utils": "^2.0.1",
     "csstype": "^2.6.6",
     "extend": "^3.0.2",
-    "rtl-css-js": "^1.13.0",
+    "rtl-css-js": "^1.13.1",
     "stylis": "^3.5.4",
     "utility-types": "^3.7.0",
-    "uuid": "^3.3.2"
+    "uuid": "^3.3.3"
   },
   "devDependencies": {
-    "@types/extend": "*",
-    "@types/uuid": "*"
+    "@types/extend": "^3.0.1",
+    "@types/uuid": "^3.4.5"
   },
-  "gitHead": "08d57c8c6e27dec605e1776c38eff9aa212ab772"
+  "gitHead": "9e25a97050daf05f81b04815c301f93cdc1d3b56"
 }

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

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 1 instance in 1 package

Improved metrics

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

156163

decreased by-5.4%

Number of package files

52

decreased by-1.89%

Lines of code

3382

decreased by-2.45%

Dependency changes

• Updatedaesthetic-utils@^2.0.1

• Updatedrtl-css-js@^1.13.1

• Updateduuid@^3.3.3