@aesthetic/addon-properties - npm Package Compare versions

Comparing version 0.2.11 to 0.3.0

dts/index.d.ts

@@ -5,5 +5,6 @@ /**
  */
-import { PropertyHandlerMap } from '@aesthetic/sss';
+import { PropertyHandlerMap } from '@aesthetic/types';
+export declare const compoundProperties: PropertyHandlerMap;
 export declare const expandedProperties: PropertyHandlerMap;
 export * from './types';
 //# sourceMappingURL=index.d.ts.map

dts/types.d.ts

@@ -1,4 +0,3 @@
-import '@aesthetic/sss';
-import CSSType from 'csstype';
-import { Value } from '@aesthetic/types';
+import '@aesthetic/style';
+import { CSSType, FontFace, Keyframes, Value } from '@aesthetic/types';
 export interface AnimationProperty {
@@ -94,5 +93,6 @@ delay?: CSSType.Property.AnimationDelay;
 }
-declare module '@aesthetic/sss' {
+declare module '@aesthetic/style' {
     interface CustomProperties {
         animation?: AnimationProperty;
+        animationName?: Keyframes | Keyframes[];
         background?: BackgroundProperty;
@@ -107,2 +107,3 @@ border?: BorderProperty;
         font?: FontProperty;
+        fontFamily?: FontFace | FontFace[];
         listStyle?: ListStyleProperty;
@@ -109,0 +110,0 @@ margin?: MarginProperty;

esm/index.js

@@ -1,17 +0,39 @@
-// Generated with Packemon: https://packemon.dev
+// Bundled with Packemon: https://packemon.dev
 // Platform: browser, Support: stable, Format: esm
-import { objectLoop, isObject } from '@aesthetic/utils';
-import '@aesthetic/sss'; // Module augmentation
-// eslint-disable-next-line import/no-unresolved
-
+import { toArray, isObject, objectLoop } from '@aesthetic/utils';
 /* eslint-disable no-param-reassign */
 
 function collapse(property, object, add) {
-  objectLoop(object, function (val, key) {
-    add(property + key[0].toUpperCase() + key.slice(1), val);
+  objectLoop(object, (value, key) => {
+    add(property + key[0].toUpperCase() + key.slice(1), value);
   });
 }
 
+function handleCompound(property) {
+  return (value, add, engine) => {
+    const items = toArray(value).map(item => {
+      if (typeof item === 'string') {
+        return item;
+      }
+
+      if (property === 'animationName') {
+        return engine.renderKeyframes(item);
+      }
+
+      if (property === 'fontFamily') {
+        return engine.renderFontFace(item);
+      }
+
+      return '';
+    });
+    const name = [...new Set(items)].filter(Boolean).join(', ');
+
+    if (name) {
+      add(property, name);
+    }
+  };
+}
+
 function handleExpanded(property) {
-  return function (value, add) {
+  return (value, add) => {
     if (isObject(value)) {
@@ -26,3 +48,3 @@ collapse(property, value, add);
 function handleExpandedSpacing(property) {
-  return function (value, add) {
+  return (value, add) => {
     if (!isObject(value)) {
@@ -34,4 +56,4 @@ add(property, value);
     if (value.topBottom) {
-      add(property + "Top", value.topBottom);
-      add(property + "Bottom", value.topBottom);
+      add(`${property}Top`, value.topBottom);
+      add(`${property}Bottom`, value.topBottom);
       value.topBottom = undefined;
@@ -41,4 +63,4 @@ }
     if (value.leftRight) {
-      add(property + "Left", value.leftRight);
-      add(property + "Right", value.leftRight);
+      add(`${property}Left`, value.leftRight);
+      add(`${property}Right`, value.leftRight);
       value.leftRight = undefined;
@@ -51,3 +73,7 @@ }
 
-var expandedProperties = {
+const compoundProperties = {
+  animationName: handleCompound('animationName'),
+  fontFamily: handleCompound('fontFamily')
+};
+const expandedProperties = {
   animation: handleExpanded('animation'),
@@ -62,3 +88,4 @@ background: handleExpanded('background'),
   flex: handleExpanded('flex'),
-  font: function font(value, add) {
+
+  font(value, add) {
     if (isObject(value)) {
@@ -79,2 +106,3 @@ if (value.lineHeight) {
   },
+
   listStyle: handleExpanded('listStyle'),
@@ -88,3 +116,3 @@ margin: handleExpandedSpacing('margin'),
 };
-export { expandedProperties };
+export { compoundProperties, expandedProperties };
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@aesthetic/addon-properties",
-  "version": "0.2.11",
+  "version": "0.3.0",
   "description": "Custom properties for the Aesthetic CSS-in-JS style sheet.",
@@ -19,3 +19,4 @@ "keywords": [
   "license": "MIT",
-  "main": "./lib/index.js",
+  "type": "module",
+  "main": "./esm/index.js",
   "module": "./esm/index.js",
@@ -34,7 +35,7 @@ "types": "./dts/index.d.ts",
   "peerDependencies": {
-    "@aesthetic/sss": "*"
+    "@aesthetic/style": "*"
   },
   "dependencies": {
-    "@aesthetic/types": "^0.5.1",
-    "@aesthetic/utils": "^0.7.0",
+    "@aesthetic/types": "^0.6.0",
+    "@aesthetic/utils": "^0.8.0",
     "csstype": "^3.0.8"
@@ -49,3 +50,3 @@ },
   },
-  "gitHead": "2eaa33fd8ca72a6fd657d9b1375c7caa2f346af4"
+  "gitHead": "6fd0ed93f8f15446ba2f9f0be8054a091997cbec"
 }

README.md

@@ -8,18 +8,14 @@ # Aesthetic - Custom Properties
 Enables custom values and types for built-in CSS properties. Primarily adds support for expanded
-form object values.
+form object values, and compound values (keyframes, font faces).
 
 ```ts
-import { expandedProperties } from '@aesthetic/addon-properties';
+import { compoundProperties, expandedProperties } from '@aesthetic/addon-properties';
 import { configure } from '@aesthetic/<integration>';
-import { parse } from '@aesthetic/sss';
 
-// When using entire Aesthetic framework
 configure({
-  customProperties: expandedProperties,
+	customProperties: {
+		...compoundProperties,
+		...expandedProperties,
+	},
 });
-
-// When using SSS directly
-parse('local', styles, {
-  customProperties: expandedProperties,
-});
 ```
@@ -26,0 +22,0 @@

src/index.ts

 /* eslint-disable no-param-reassign */
+
 /**
@@ -7,82 +8,153 @@ * @copyright   2020, Miles Johnson
 
-import { AddPropertyCallback, PropertyHandlerMap } from '@aesthetic/sss';
-import { Value } from '@aesthetic/types';
-import { isObject, objectLoop } from '@aesthetic/utils';
-import { FontProperty, MarginProperty, PaddingProperty } from './types';
+import {
+	AddPropertyCallback,
+	Engine,
+	FontFace,
+	Keyframes,
+	PropertyHandlerMap,
+	Value,
+} from '@aesthetic/types';
+import { isObject, objectLoop, toArray } from '@aesthetic/utils';
+import {
+	AnimationProperty,
+	BackgroundProperty,
+	BorderProperty,
+	ColumnRuleProperty,
+	FlexProperty,
+	FontProperty,
+	ListStyleProperty,
+	MarginProperty,
+	OffsetProperty,
+	OutlineProperty,
+	PaddingProperty,
+	TextDecorationProperty,
+	TransitionProperty,
+} from './types';
 
 function collapse(property: string, object: object, add: AddPropertyCallback) {
-  objectLoop(object, (val: Value, key: string) => {
-    add(property + key[0].toUpperCase() + key.slice(1), val);
-  });
+	objectLoop(object, (value: Value, key: string) => {
+		add((property + key[0].toUpperCase() + key.slice(1)) as 'padding', value);
+	});
 }
 
-function handleExpanded(property: string) {
-  return (value: unknown, add: AddPropertyCallback) => {
-    if (isObject(value)) {
-      collapse(property, value, add);
-    } else {
-      add(property, value as Value);
-    }
-  };
+function handleCompound(property: 'animationName' | 'fontFamily') {
+	return (
+		value: FontFace | FontFace[] | Keyframes | Keyframes[] | string,
+		add: AddPropertyCallback,
+		engine: Engine<unknown>,
+	) => {
+		const items = toArray(value).map((item) => {
+			if (typeof item === 'string') {
+				return item;
+			}
+
+			if (property === 'animationName') {
+				return engine.renderKeyframes(item as Keyframes);
+			}
+
+			if (property === 'fontFamily') {
+				return engine.renderFontFace(item as FontFace);
+			}
+
+			return '';
+		});
+
+		const name = [...new Set(items)].filter(Boolean).join(', ');
+
+		if (name) {
+			add(property, name);
+		}
+	};
 }
 
-function handleExpandedSpacing(property: string) {
-  return (value: unknown, add: AddPropertyCallback) => {
-    if (!isObject<MarginProperty | PaddingProperty>(value)) {
-      add(property, value as Value);
+function handleExpanded<T extends object>(
+	property:
+		| 'animation'
+		| 'background'
+		| 'border'
+		| 'borderBottom'
+		| 'borderLeft'
+		| 'borderRight'
+		| 'borderTop'
+		| 'columnRule'
+		| 'flex'
+		| 'listStyle'
+		| 'offset'
+		| 'outline'
+		| 'textDecoration'
+		| 'transition',
+) {
+	return (value: T | Value, add: AddPropertyCallback) => {
+		if (isObject(value)) {
+			collapse(property, value, add);
+		} else {
+			add(property, value);
+		}
+	};
+}
 
-      return;
-    }
+function handleExpandedSpacing(property: 'margin' | 'padding') {
+	return (value: MarginProperty | PaddingProperty | Value, add: AddPropertyCallback) => {
+		if (!isObject(value)) {
+			add(property, value);
 
-    if (value.topBottom) {
-      add(`${property}Top`, value.topBottom);
-      add(`${property}Bottom`, value.topBottom);
-      value.topBottom = undefined;
-    }
+			return;
+		}
 
-    if (value.leftRight) {
-      add(`${property}Left`, value.leftRight);
-      add(`${property}Right`, value.leftRight);
-      value.leftRight = undefined;
-    }
+		if (value.topBottom) {
+			add(`${property}Top`, value.topBottom);
+			add(`${property}Bottom`, value.topBottom);
+			value.topBottom = undefined;
+		}
 
-    collapse(property, value, add);
-  };
+		if (value.leftRight) {
+			add(`${property}Left`, value.leftRight);
+			add(`${property}Right`, value.leftRight);
+			value.leftRight = undefined;
+		}
+
+		collapse(property, value, add);
+	};
 }
 
+export const compoundProperties: PropertyHandlerMap = {
+	animationName: handleCompound('animationName'),
+	fontFamily: handleCompound('fontFamily'),
+};
+
 export const expandedProperties: PropertyHandlerMap = {
-  animation: handleExpanded('animation'),
-  background: handleExpanded('background'),
-  border: handleExpanded('border'),
-  borderBottom: handleExpanded('borderBottom'),
-  borderLeft: handleExpanded('borderLeft'),
-  borderRight: handleExpanded('borderRight'),
-  borderTop: handleExpanded('borderTop'),
-  columnRule: handleExpanded('columnRule'),
-  flex: handleExpanded('flex'),
-  font(value, add) {
-    if (isObject<FontProperty>(value)) {
-      if (value.lineHeight) {
-        add('lineHeight', value.lineHeight);
-        value.lineHeight = undefined;
-      }
+	animation: handleExpanded<AnimationProperty>('animation'),
+	background: handleExpanded<BackgroundProperty>('background'),
+	border: handleExpanded<BorderProperty>('border'),
+	borderBottom: handleExpanded<BorderProperty>('borderBottom'),
+	borderLeft: handleExpanded<BorderProperty>('borderLeft'),
+	borderRight: handleExpanded<BorderProperty>('borderRight'),
+	borderTop: handleExpanded<BorderProperty>('borderTop'),
+	columnRule: handleExpanded<ColumnRuleProperty>('columnRule'),
+	flex: handleExpanded<FlexProperty>('flex'),
+	font(value, add) {
+		if (isObject<FontProperty>(value)) {
+			if (value.lineHeight) {
+				add('lineHeight', value.lineHeight);
+				value.lineHeight = undefined;
+			}
 
-      if (value.system) {
-        add('font', value.system);
-      } else {
-        collapse('font', value, add);
-      }
-    } else {
-      add('font', value);
-    }
-  },
-  listStyle: handleExpanded('listStyle'),
-  margin: handleExpandedSpacing('margin'),
-  offset: handleExpanded('offset'),
-  outline: handleExpanded('outline'),
-  padding: handleExpandedSpacing('padding'),
-  textDecoration: handleExpanded('textDecoration'),
-  transition: handleExpanded('transition'),
+			if (value.system) {
+				add('font', value.system);
+			} else {
+				collapse('font', value, add);
+			}
+		} else {
+			add('font', value);
+		}
+	},
+	listStyle: handleExpanded<ListStyleProperty>('listStyle'),
+	margin: handleExpandedSpacing('margin'),
+	offset: handleExpanded<OffsetProperty>('offset'),
+	outline: handleExpanded<OutlineProperty>('outline'),
+	padding: handleExpandedSpacing('padding'),
+	textDecoration: handleExpanded<TextDecorationProperty>('textDecoration'),
+	transition: handleExpanded<TransitionProperty>('transition'),
 };
 
 export * from './types';

src/types.ts

 // Module augmentation
-import '@aesthetic/sss';
-// eslint-disable-next-line import/no-unresolved
-import CSSType from 'csstype';
-import { Value } from '@aesthetic/types';
+import '@aesthetic/style';
+import { CSSType, FontFace, Keyframes, Value } from '@aesthetic/types';
 
@@ -10,124 +8,126 @@ // EXPANDED PROPERTIES
 export interface AnimationProperty {
-  delay?: CSSType.Property.AnimationDelay;
-  direction?: CSSType.Property.AnimationDirection;
-  duration?: CSSType.Property.AnimationDuration;
-  fillMode?: CSSType.Property.AnimationFillMode;
-  iterationCount?: CSSType.Property.AnimationIterationCount;
-  name?: CSSType.Property.AnimationName;
-  playState?: CSSType.Property.AnimationPlayState;
-  timingFunction?: CSSType.Property.AnimationTimingFunction;
+	delay?: CSSType.Property.AnimationDelay;
+	direction?: CSSType.Property.AnimationDirection;
+	duration?: CSSType.Property.AnimationDuration;
+	fillMode?: CSSType.Property.AnimationFillMode;
+	iterationCount?: CSSType.Property.AnimationIterationCount;
+	name?: CSSType.Property.AnimationName;
+	playState?: CSSType.Property.AnimationPlayState;
+	timingFunction?: CSSType.Property.AnimationTimingFunction;
 }
 
 export interface BackgroundProperty {
-  attachment?: CSSType.Property.BackgroundAttachment;
-  clip?: CSSType.Property.BackgroundClip;
-  color?: CSSType.Property.BackgroundColor;
-  image?: CSSType.Property.BackgroundImage;
-  origin?: CSSType.Property.BackgroundOrigin;
-  position?: CSSType.Property.BackgroundPosition<Value>;
-  repeat?: CSSType.Property.BackgroundRepeat;
-  size?: CSSType.Property.BackgroundSize<Value>;
+	attachment?: CSSType.Property.BackgroundAttachment;
+	clip?: CSSType.Property.BackgroundClip;
+	color?: CSSType.Property.BackgroundColor;
+	image?: CSSType.Property.BackgroundImage;
+	origin?: CSSType.Property.BackgroundOrigin;
+	position?: CSSType.Property.BackgroundPosition<Value>;
+	repeat?: CSSType.Property.BackgroundRepeat;
+	size?: CSSType.Property.BackgroundSize<Value>;
 }
 
 export interface BorderProperty {
-  color?: CSSType.Property.BorderColor;
-  style?: CSSType.Property.BorderStyle;
-  width?: CSSType.Property.BorderWidth<Value>;
+	color?: CSSType.Property.BorderColor;
+	style?: CSSType.Property.BorderStyle;
+	width?: CSSType.Property.BorderWidth<Value>;
 }
 
 export interface ColumnRuleProperty {
-  color?: CSSType.Property.ColumnRuleColor;
-  style?: CSSType.Property.ColumnRuleStyle;
-  width?: CSSType.Property.ColumnRuleWidth<Value>;
+	color?: CSSType.Property.ColumnRuleColor;
+	style?: CSSType.Property.ColumnRuleStyle;
+	width?: CSSType.Property.ColumnRuleWidth<Value>;
 }
 
 export interface FlexProperty {
-  basis?: CSSType.Property.FlexBasis<Value>;
-  grow?: CSSType.Property.FlexGrow;
-  shrink?: CSSType.Property.FlexShrink;
+	basis?: CSSType.Property.FlexBasis<Value>;
+	grow?: CSSType.Property.FlexGrow;
+	shrink?: CSSType.Property.FlexShrink;
 }
 
 export interface FontProperty {
-  family?: CSSType.Property.FontFamily;
-  lineHeight?: CSSType.Property.LineHeight<Value>;
-  size?: CSSType.Property.FontSize<Value>;
-  stretch?: CSSType.Property.FontStretch;
-  style?: CSSType.Property.FontStyle;
-  system?: string;
-  variant?: CSSType.Property.FontVariant;
-  weight?: CSSType.Property.FontWeight;
+	family?: CSSType.Property.FontFamily;
+	lineHeight?: CSSType.Property.LineHeight<Value>;
+	size?: CSSType.Property.FontSize<Value>;
+	stretch?: CSSType.Property.FontStretch;
+	style?: CSSType.Property.FontStyle;
+	system?: string;
+	variant?: CSSType.Property.FontVariant;
+	weight?: CSSType.Property.FontWeight;
 }
 
 export interface ListStyleProperty {
-  image?: CSSType.Property.ListStyleImage;
-  position?: CSSType.Property.ListStylePosition;
-  type?: CSSType.Property.ListStyleType;
+	image?: CSSType.Property.ListStyleImage;
+	position?: CSSType.Property.ListStylePosition;
+	type?: CSSType.Property.ListStyleType;
 }
 
 export interface MarginProperty {
-  bottom?: CSSType.Property.MarginBottom<Value>;
-  left?: CSSType.Property.MarginLeft<Value>;
-  leftRight?: CSSType.Property.MarginLeft<Value> | CSSType.Property.MarginRight<Value>;
-  right?: CSSType.Property.MarginRight<Value>;
-  top?: CSSType.Property.MarginTop<Value>;
-  topBottom?: CSSType.Property.MarginBottom<Value> | CSSType.Property.MarginTop<Value>;
+	bottom?: CSSType.Property.MarginBottom<Value>;
+	left?: CSSType.Property.MarginLeft<Value>;
+	leftRight?: CSSType.Property.MarginLeft<Value> | CSSType.Property.MarginRight<Value>;
+	right?: CSSType.Property.MarginRight<Value>;
+	top?: CSSType.Property.MarginTop<Value>;
+	topBottom?: CSSType.Property.MarginBottom<Value> | CSSType.Property.MarginTop<Value>;
 }
 
 export interface OffsetProperty {
-  anchor?: CSSType.Property.OffsetAnchor<string>;
-  distance?: CSSType.Property.OffsetDistance<string>;
-  path?: CSSType.Property.OffsetPath;
-  position?: string; // NOT UPSTREAM
-  rotate?: CSSType.Property.OffsetRotate;
+	anchor?: CSSType.Property.OffsetAnchor<string>;
+	distance?: CSSType.Property.OffsetDistance<string>;
+	path?: CSSType.Property.OffsetPath;
+	position?: string; // NOT UPSTREAM
+	rotate?: CSSType.Property.OffsetRotate;
 }
 
 export interface OutlineProperty {
-  color?: CSSType.Property.OutlineColor;
-  style?: CSSType.Property.OutlineStyle;
-  width?: CSSType.Property.OutlineWidth<Value>;
+	color?: CSSType.Property.OutlineColor;
+	style?: CSSType.Property.OutlineStyle;
+	width?: CSSType.Property.OutlineWidth<Value>;
 }
 
 export interface PaddingProperty {
-  bottom?: CSSType.Property.PaddingBottom<Value>;
-  left?: CSSType.Property.PaddingLeft<Value>;
-  leftRight?: CSSType.Property.PaddingLeft<Value> | CSSType.Property.PaddingRight<Value>;
-  right?: CSSType.Property.PaddingRight<Value>;
-  top?: CSSType.Property.PaddingTop<Value>;
-  topBottom?: CSSType.Property.PaddingBottom<Value> | CSSType.Property.PaddingTop<Value>;
+	bottom?: CSSType.Property.PaddingBottom<Value>;
+	left?: CSSType.Property.PaddingLeft<Value>;
+	leftRight?: CSSType.Property.PaddingLeft<Value> | CSSType.Property.PaddingRight<Value>;
+	right?: CSSType.Property.PaddingRight<Value>;
+	top?: CSSType.Property.PaddingTop<Value>;
+	topBottom?: CSSType.Property.PaddingBottom<Value> | CSSType.Property.PaddingTop<Value>;
 }
 
 export interface TextDecorationProperty {
-  color?: CSSType.Property.TextDecorationColor;
-  line?: CSSType.Property.TextDecorationLine;
-  style?: CSSType.Property.TextDecorationStyle;
-  thickness?: CSSType.Property.TextDecorationThickness<Value>;
+	color?: CSSType.Property.TextDecorationColor;
+	line?: CSSType.Property.TextDecorationLine;
+	style?: CSSType.Property.TextDecorationStyle;
+	thickness?: CSSType.Property.TextDecorationThickness<Value>;
 }
 
 export interface TransitionProperty {
-  delay?: CSSType.Property.TransitionDelay;
-  duration?: CSSType.Property.TransitionDuration;
-  property?: CSSType.Property.TransitionProperty;
-  timingFunction?: CSSType.Property.TransitionTimingFunction;
+	delay?: CSSType.Property.TransitionDelay;
+	duration?: CSSType.Property.TransitionDuration;
+	property?: CSSType.Property.TransitionProperty;
+	timingFunction?: CSSType.Property.TransitionTimingFunction;
 }
 
-declare module '@aesthetic/sss' {
-  export interface CustomProperties {
-    animation?: AnimationProperty;
-    background?: BackgroundProperty;
-    border?: BorderProperty;
-    borderBottom?: BorderProperty;
-    borderLeft?: BorderProperty;
-    borderRight?: BorderProperty;
-    borderTop?: BorderProperty;
-    columnRule?: ColumnRuleProperty;
-    flex?: FlexProperty;
-    font?: FontProperty;
-    listStyle?: ListStyleProperty;
-    margin?: MarginProperty;
-    offset?: OffsetProperty;
-    outline?: OutlineProperty;
-    padding?: PaddingProperty;
-    textDecoration?: TextDecorationProperty;
-    transition?: TransitionProperty;
-  }
+declare module '@aesthetic/style' {
+	export interface CustomProperties {
+		animation?: AnimationProperty;
+		animationName?: Keyframes | Keyframes[];
+		background?: BackgroundProperty;
+		border?: BorderProperty;
+		borderBottom?: BorderProperty;
+		borderLeft?: BorderProperty;
+		borderRight?: BorderProperty;
+		borderTop?: BorderProperty;
+		columnRule?: ColumnRuleProperty;
+		flex?: FlexProperty;
+		font?: FontProperty;
+		fontFamily?: FontFace | FontFace[];
+		listStyle?: ListStyleProperty;
+		margin?: MarginProperty;
+		offset?: OffsetProperty;
+		outline?: OutlineProperty;
+		padding?: PaddingProperty;
+		textDecoration?: TextDecorationProperty;
+		transition?: TransitionProperty;
+	}
 }

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

Lines of code

476

increased by2.15%

Is type module

Yes

Worsened metrics

Total package byte prevSize

23302

decreased by-9.72%

Number of package files

9

decreased by-18.18%

Number of lines in readme file

31

decreased by-11.43%

Dependency changes

• + Added@aesthetic/style@0.9.8(transitive)

• + Added@aesthetic/types@0.6.7(transitive)

• + Added@aesthetic/utils@0.8.4(transitive)

• + Addedsort-css-media-queries@2.4.0(transitive)

• - Removed@aesthetic/sss@0.8.2(transitive)

• - Removed@aesthetic/types@0.5.1(transitive)

• - Removed@aesthetic/utils@0.7.0(transitive)

• Updated@aesthetic/types@^0.6.0

• Updated@aesthetic/utils@^0.8.0