@griffel/core - npm Package Compare versions

Comparing version 1.1.1 to 1.2.0

package.json

 {
   "name": "@griffel/core",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "DOM implementation of Atomic CSS-in-JS",
@@ -5,0 +5,0 @@ "license": "MIT",

renderer/createDOMRenderer.cjs.js

@@ -27,3 +27,3 @@ 'use strict';
         const cssRulesForBucket = cssRules[styleBucketName];
-        const sheet = target && getStyleSheetForBucket.getStyleSheetForBucket(styleBucketName, target, renderer); // This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
+        const sheet = target && getStyleSheetForBucket.getStyleSheetForBucket(styleBucketName, target, renderer, options.styleElementAttributes); // This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
 
@@ -30,0 +30,0 @@ for (let i = 0, l = cssRulesForBucket.length; i < l; i++) {

renderer/createDOMRenderer.d.ts

 import { GriffelRenderer } from '../types';
 export interface CreateDOMRendererOptions {
     /**
-     * A filter run before css rule insertion to systematically remove css rules at render time.
+     * A map of attributes that's passed to the generated style elements. Is useful to set "nonce" attribute.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce
+     */
+    styleElementAttributes?: Record<string, string>;
+    /**
+     * A filter run before CSS rule insertion to systematically remove CSS rules at render time.
      * This can be used to forbid specific rules from being written to the style sheet at run time without
@@ -6,0 +12,0 @@ * affecting build time styles.

renderer/createDOMRenderer.esm.js

@@ -23,3 +23,3 @@ import { getStyleSheetForBucket } from './getStyleSheetForBucket.esm.js';
         const cssRulesForBucket = cssRules[styleBucketName];
-        const sheet = target && getStyleSheetForBucket(styleBucketName, target, renderer); // This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
+        const sheet = target && getStyleSheetForBucket(styleBucketName, target, renderer, options.styleElementAttributes); // This is a hot path in rendering styles: ".length" is cached in "l" var to avoid accesses the property
 
@@ -26,0 +26,0 @@ for (let i = 0, l = cssRulesForBucket.length; i < l; i++) {

renderer/getStyleSheetForBucket.cjs.js

@@ -25,3 +25,3 @@ 'use strict';
 
-function getStyleSheetForBucket(bucketName, target, renderer) {
+function getStyleSheetForBucket(bucketName, target, renderer, elementAttributes = {}) {
   if (!renderer.styleElements[bucketName]) {
@@ -42,2 +42,7 @@ let currentBucketIndex = styleBucketOrdering.indexOf(bucketName) + 1;
     tag.dataset['makeStylesBucket'] = bucketName;
+
+    for (const attribute in elementAttributes) {
+      tag.setAttribute(attribute, elementAttributes[attribute]);
+    }
+
     renderer.styleElements[bucketName] = tag;
@@ -44,0 +49,0 @@ target.head.insertBefore(tag, nextBucketFromCache);

renderer/getStyleSheetForBucket.d.ts

@@ -11,2 +11,2 @@ import { GriffelRenderer, StyleBucketName } from '../types';
  */
-export declare function getStyleSheetForBucket(bucketName: StyleBucketName, target: Document, renderer: GriffelRenderer): CSSStyleSheet;
+export declare function getStyleSheetForBucket(bucketName: StyleBucketName, target: Document, renderer: GriffelRenderer, elementAttributes?: Record<string, string>): CSSStyleSheet;

renderer/getStyleSheetForBucket.esm.js

@@ -21,3 +21,3 @@ /**
 
-function getStyleSheetForBucket(bucketName, target, renderer) {
+function getStyleSheetForBucket(bucketName, target, renderer, elementAttributes = {}) {
   if (!renderer.styleElements[bucketName]) {
@@ -38,2 +38,7 @@ let currentBucketIndex = styleBucketOrdering.indexOf(bucketName) + 1;
     tag.dataset['makeStylesBucket'] = bucketName;
+
+    for (const attribute in elementAttributes) {
+      tag.setAttribute(attribute, elementAttributes[attribute]);
+    }
+
     renderer.styleElements[bucketName] = tag;
@@ -40,0 +45,0 @@ target.head.insertBefore(tag, nextBucketFromCache);

runtime/compileCSS.cjs.js

@@ -46,3 +46,3 @@ 'use strict';
   const classNameSelector = `.${className}`;
-  const cssDeclaration = `{ ${hyphenateProperty.hyphenateProperty(property)}: ${value}; }`;
+  const cssDeclaration = Array.isArray(value) ? `{ ${value.map(v => `${hyphenateProperty.hyphenateProperty(property)}: ${v}`).join(';')}; }` : `{ ${hyphenateProperty.hyphenateProperty(property)}: ${value}; }`;
   let rtlClassNameSelector = null;
@@ -53,3 +53,3 @@ let rtlCSSDeclaration = null;
     rtlClassNameSelector = `.${rtlClassName}`;
-    rtlCSSDeclaration = `{ ${hyphenateProperty.hyphenateProperty(rtlProperty)}: ${rtlValue}; }`;
+    rtlCSSDeclaration = Array.isArray(rtlValue) ? `{ ${rtlValue.map(v => `${hyphenateProperty.hyphenateProperty(rtlProperty)}: ${v}`).join(';')}; }` : `{ ${hyphenateProperty.hyphenateProperty(rtlProperty)}: ${rtlValue}; }`;
   }
@@ -56,0 +56,0 @@

runtime/compileCSS.d.ts

@@ -7,6 +7,6 @@ export interface CompileCSSOptions {
     property: string;
-    value: number | string;
+    value: number | string | Array<number | string>;
     rtlClassName?: string;
     rtlProperty?: string;
-    rtlValue?: number | string;
+    rtlValue?: number | string | Array<number | string>;
 }
@@ -13,0 +13,0 @@ /**

runtime/compileCSS.esm.js

@@ -42,3 +42,3 @@ import { serialize, compile, middleware, prefixer, stringify, rulesheet } from 'stylis';
   const classNameSelector = `.${className}`;
-  const cssDeclaration = `{ ${hyphenateProperty(property)}: ${value}; }`;
+  const cssDeclaration = Array.isArray(value) ? `{ ${value.map(v => `${hyphenateProperty(property)}: ${v}`).join(';')}; }` : `{ ${hyphenateProperty(property)}: ${value}; }`;
   let rtlClassNameSelector = null;
@@ -49,3 +49,3 @@ let rtlCSSDeclaration = null;
     rtlClassNameSelector = `.${rtlClassName}`;
-    rtlCSSDeclaration = `{ ${hyphenateProperty(rtlProperty)}: ${rtlValue}; }`;
+    rtlCSSDeclaration = Array.isArray(rtlValue) ? `{ ${rtlValue.map(v => `${hyphenateProperty(rtlProperty)}: ${v}`).join(';')}; }` : `{ ${hyphenateProperty(rtlProperty)}: ${rtlValue}; }`;
   }
@@ -52,0 +52,0 @@

runtime/resolveStyleRules.cjs.js

@@ -132,2 +132,59 @@ 'use strict';
       }, pseudo, media, support, cssClassesMap, cssRulesByBucket, rtlAnimationNames.join(', '));
+    } else if (Array.isArray(value)) {
+      // not animationName property but array in the value => fallback values
+      if (value.length === 0) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.warn(`makeStyles(): An empty array was passed as input to "${property}", the property will be omitted in the styles.`);
+        }
+
+        continue;
+      }
+
+      const key = hashPropertyKey.hashPropertyKey(pseudo, media, support, property);
+      const className = hashClassName.hashClassName({
+        media,
+        value: value.map(v => (v !== null && v !== void 0 ? v : '').toString()).join(';'),
+        support,
+        pseudo,
+        property
+      });
+      const rtlDefinitions = value.map(v => core.convertProperty(property, v));
+      const rtlPropertyConsistent = !rtlDefinitions.some(v => v.key !== rtlDefinitions[0].key);
+
+      if (!rtlPropertyConsistent) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error('makeStyles(): mixing CSS fallback values which result in multiple CSS properties in RTL is not supported.');
+        }
+
+        continue;
+      }
+
+      const flippedInRtl = rtlDefinitions[0].key !== property || rtlDefinitions.some((v, i) => v.value !== value[i]);
+      const rtlClassName = flippedInRtl ? hashClassName.hashClassName({
+        value: rtlDefinitions.map(v => {
+          var _a;
+
+          return ((_a = v === null || v === void 0 ? void 0 : v.value) !== null && _a !== void 0 ? _a : '').toString();
+        }).join(';'),
+        property: rtlDefinitions[0].key,
+        pseudo,
+        media,
+        support
+      }) : undefined;
+      const rtlCompileOptions = flippedInRtl ? {
+        rtlClassName,
+        rtlProperty: rtlDefinitions[0].key,
+        rtlValue: rtlDefinitions.map(d => d.value)
+      } : undefined;
+      const styleBucketName = getStyleBucketName.getStyleBucketName(pseudo, media, support);
+      const [ltrCSS, rtlCSS] = compileCSS.compileCSS(Object.assign({
+        className,
+        media,
+        pseudo,
+        property,
+        support,
+        value: value
+      }, rtlCompileOptions));
+      pushToClassesMap(cssClassesMap, key, className, rtlClassName);
+      pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS);
     } else if (isObject.isObject(value)) {
@@ -134,0 +191,0 @@ if (isNestedSelector.isNestedSelector(property)) {

runtime/resolveStyleRules.esm.js

@@ -124,2 +124,59 @@ import hashString from '@emotion/hash';
       }, pseudo, media, support, cssClassesMap, cssRulesByBucket, rtlAnimationNames.join(', '));
+    } else if (Array.isArray(value)) {
+      // not animationName property but array in the value => fallback values
+      if (value.length === 0) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.warn(`makeStyles(): An empty array was passed as input to "${property}", the property will be omitted in the styles.`);
+        }
+
+        continue;
+      }
+
+      const key = hashPropertyKey(pseudo, media, support, property);
+      const className = hashClassName({
+        media,
+        value: value.map(v => (v !== null && v !== void 0 ? v : '').toString()).join(';'),
+        support,
+        pseudo,
+        property
+      });
+      const rtlDefinitions = value.map(v => convertProperty(property, v));
+      const rtlPropertyConsistent = !rtlDefinitions.some(v => v.key !== rtlDefinitions[0].key);
+
+      if (!rtlPropertyConsistent) {
+        if (process.env.NODE_ENV !== 'production') {
+          console.error('makeStyles(): mixing CSS fallback values which result in multiple CSS properties in RTL is not supported.');
+        }
+
+        continue;
+      }
+
+      const flippedInRtl = rtlDefinitions[0].key !== property || rtlDefinitions.some((v, i) => v.value !== value[i]);
+      const rtlClassName = flippedInRtl ? hashClassName({
+        value: rtlDefinitions.map(v => {
+          var _a;
+
+          return ((_a = v === null || v === void 0 ? void 0 : v.value) !== null && _a !== void 0 ? _a : '').toString();
+        }).join(';'),
+        property: rtlDefinitions[0].key,
+        pseudo,
+        media,
+        support
+      }) : undefined;
+      const rtlCompileOptions = flippedInRtl ? {
+        rtlClassName,
+        rtlProperty: rtlDefinitions[0].key,
+        rtlValue: rtlDefinitions.map(d => d.value)
+      } : undefined;
+      const styleBucketName = getStyleBucketName(pseudo, media, support);
+      const [ltrCSS, rtlCSS] = compileCSS(Object.assign({
+        className,
+        media,
+        pseudo,
+        property,
+        support,
+        value: value
+      }, rtlCompileOptions));
+      pushToClassesMap(cssClassesMap, key, className, rtlClassName);
+      pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS);
     } else if (isObject(value)) {
@@ -126,0 +183,0 @@ if (isNestedSelector(property)) {

shorthands/border.d.ts

@@ -1,7 +0,7 @@
-import * as CSS from 'csstype';
-import type { GriffelStylesStrictCSSObject, GriffelStylesCSSValue } from '../types';
+import type { GriffelStylesStrictCSSObject } from '../types';
+import { BorderColorInput, BorderStyleInput, BorderWidthInput } from './types';
 declare type BorderStyle = Pick<GriffelStylesStrictCSSObject, 'borderTopColor' | 'borderTopStyle' | 'borderTopWidth' | 'borderRightColor' | 'borderRightStyle' | 'borderRightWidth' | 'borderBottomColor' | 'borderBottomStyle' | 'borderBottomWidth' | 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth'>;
-export declare function border(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>): BorderStyle;
-export declare function border(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>, style: CSS.Property.BorderStyle): BorderStyle;
-export declare function border(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>, style: CSS.Property.BorderStyle, color: CSS.Property.BorderColor): BorderStyle;
+export declare function border(width: BorderWidthInput): BorderStyle;
+export declare function border(width: BorderWidthInput, style: BorderStyleInput): BorderStyle;
+export declare function border(width: BorderWidthInput, style: BorderStyleInput, color: BorderColorInput): BorderStyle;
 export {};

shorthands/borderBottom.d.ts

@@ -1,7 +0,7 @@
-import * as CSS from 'csstype';
-import type { GriffelStylesStrictCSSObject, GriffelStylesCSSValue } from '../types';
+import type { GriffelStylesStrictCSSObject } from '../types';
+import { BorderColorInput, BorderStyleInput, BorderWidthInput } from './types';
 declare type BorderBottomStyle = Pick<GriffelStylesStrictCSSObject, 'borderBottomWidth' | 'borderBottomStyle' | 'borderBottomColor'>;
-export declare function borderBottom(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>): BorderBottomStyle;
-export declare function borderBottom(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>, style: CSS.Property.BorderStyle): BorderBottomStyle;
-export declare function borderBottom(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>, style: CSS.Property.BorderStyle, color: CSS.Property.BorderColor): BorderBottomStyle;
+export declare function borderBottom(width: BorderWidthInput): BorderBottomStyle;
+export declare function borderBottom(width: BorderWidthInput, style: BorderStyleInput): BorderBottomStyle;
+export declare function borderBottom(width: BorderWidthInput, style: BorderStyleInput, color: BorderColorInput): BorderBottomStyle;
 export {};

shorthands/borderColor.d.ts

@@ -1,8 +0,8 @@
-import * as CSS from 'csstype';
 import type { GriffelStylesStrictCSSObject } from '../types';
+import { BorderColorInput } from './types';
 declare type BorderColorStyle = Pick<GriffelStylesStrictCSSObject, 'borderTopColor' | 'borderRightColor' | 'borderBottomColor' | 'borderLeftColor'>;
-export declare function borderColor(all: CSS.Property.BorderColor): BorderColorStyle;
-export declare function borderColor(vertical: CSS.Property.BorderColor, horizontal: CSS.Property.BorderColor): BorderColorStyle;
-export declare function borderColor(top: CSS.Property.BorderColor, horizontal: CSS.Property.BorderColor, bottom: CSS.Property.BorderColor): BorderColorStyle;
-export declare function borderColor(top: CSS.Property.BorderColor, right: CSS.Property.BorderColor, bottom: CSS.Property.BorderColor, left: CSS.Property.BorderColor): BorderColorStyle;
+export declare function borderColor(all: BorderColorInput): BorderColorStyle;
+export declare function borderColor(vertical: BorderColorInput, horizontal: BorderColorInput): BorderColorStyle;
+export declare function borderColor(top: BorderColorInput, horizontal: BorderColorInput, bottom: BorderColorInput): BorderColorStyle;
+export declare function borderColor(top: BorderColorInput, right: BorderColorInput, bottom: BorderColorInput, left: BorderColorInput): BorderColorStyle;
 export {};

shorthands/borderLeft.d.ts

@@ -1,7 +0,7 @@
-import * as CSS from 'csstype';
-import type { GriffelStylesStrictCSSObject, GriffelStylesCSSValue } from '../types';
+import type { GriffelStylesStrictCSSObject } from '../types';
+import { BorderColorInput, BorderStyleInput, BorderWidthInput } from './types';
 declare type BorderLeftStyle = Pick<GriffelStylesStrictCSSObject, 'borderLeftColor' | 'borderLeftStyle' | 'borderLeftWidth'>;
-export declare function borderLeft(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>): BorderLeftStyle;
-export declare function borderLeft(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>, style: CSS.Property.BorderStyle): BorderLeftStyle;
-export declare function borderLeft(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>, style: CSS.Property.BorderStyle, color: CSS.Property.BorderColor): BorderLeftStyle;
+export declare function borderLeft(width: BorderWidthInput): BorderLeftStyle;
+export declare function borderLeft(width: BorderWidthInput, style: BorderStyleInput): BorderLeftStyle;
+export declare function borderLeft(width: BorderWidthInput, style: BorderStyleInput, color: BorderColorInput): BorderLeftStyle;
 export {};

shorthands/borderRadius.d.ts

@@ -1,2 +0,3 @@
-import type { GriffelStylesStrictCSSObject, GriffelStylesCSSValue } from '../types';
+import type { GriffelStylesStrictCSSObject } from '../types';
+import { BorderRadiusInput } from './types';
 declare type BorderRadiusStyle = Pick<GriffelStylesStrictCSSObject, 'borderBottomRightRadius' | 'borderBottomLeftRadius' | 'borderTopRightRadius' | 'borderTopLeftRadius'>;
@@ -15,3 +16,3 @@ /**
  */
-export declare function borderRadius(value1: GriffelStylesCSSValue, value2?: GriffelStylesCSSValue, value3?: GriffelStylesCSSValue, value4?: GriffelStylesCSSValue): BorderRadiusStyle;
+export declare function borderRadius(value1: BorderRadiusInput, value2?: BorderRadiusInput, value3?: BorderRadiusInput, value4?: BorderRadiusInput): BorderRadiusStyle;
 export {};

shorthands/borderRight.d.ts

@@ -1,7 +0,7 @@
-import * as CSS from 'csstype';
-import type { GriffelStylesStrictCSSObject, GriffelStylesCSSValue } from '../types';
+import type { GriffelStylesStrictCSSObject } from '../types';
+import { BorderColorInput, BorderStyleInput, BorderWidthInput } from './types';
 declare type BorderRightStyle = Pick<GriffelStylesStrictCSSObject, 'borderRightWidth' | 'borderRightStyle' | 'borderRightColor'>;
-export declare function borderRight(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>): BorderRightStyle;
-export declare function borderRight(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>, style: CSS.Property.BorderStyle): BorderRightStyle;
-export declare function borderRight(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>, style: CSS.Property.BorderStyle, color: CSS.Property.BorderColor): BorderRightStyle;
+export declare function borderRight(width: BorderWidthInput): BorderRightStyle;
+export declare function borderRight(width: BorderWidthInput, style: BorderStyleInput): BorderRightStyle;
+export declare function borderRight(width: BorderWidthInput, style: BorderStyleInput, color: BorderColorInput): BorderRightStyle;
 export {};

shorthands/borderStyle.d.ts

@@ -1,8 +0,8 @@
-import * as CSS from 'csstype';
 import type { GriffelStylesStrictCSSObject } from '../types';
+import { BorderStyleInput } from './types';
 declare type BorderStyleStyle = Pick<GriffelStylesStrictCSSObject, 'borderTopStyle' | 'borderRightStyle' | 'borderBottomStyle' | 'borderLeftStyle'>;
-export declare function borderStyle(all: CSS.Property.BorderStyle): BorderStyleStyle;
-export declare function borderStyle(vertical: CSS.Property.BorderStyle, horizontal: CSS.Property.BorderStyle): BorderStyleStyle;
-export declare function borderStyle(top: CSS.Property.BorderStyle, horizontal: CSS.Property.BorderStyle, bottom: CSS.Property.BorderStyle): BorderStyleStyle;
-export declare function borderStyle(top: CSS.Property.BorderStyle, right: CSS.Property.BorderStyle, bottom: CSS.Property.BorderStyle, left: CSS.Property.BorderStyle): BorderStyleStyle;
+export declare function borderStyle(all: BorderStyleInput): BorderStyleStyle;
+export declare function borderStyle(vertical: BorderStyleInput, horizontal: BorderStyleInput): BorderStyleStyle;
+export declare function borderStyle(top: BorderStyleInput, horizontal: BorderStyleInput, bottom: BorderStyleInput): BorderStyleStyle;
+export declare function borderStyle(top: BorderStyleInput, right: BorderStyleInput, bottom: BorderStyleInput, left: BorderStyleInput): BorderStyleStyle;
 export {};

shorthands/borderTop.d.ts

@@ -1,7 +0,7 @@
-import * as CSS from 'csstype';
-import type { GriffelStylesStrictCSSObject, GriffelStylesCSSValue } from '../types';
+import type { GriffelStylesStrictCSSObject } from '../types';
+import { BorderColorInput, BorderStyleInput, BorderWidthInput } from './types';
 declare type BorderTopStyle = Pick<GriffelStylesStrictCSSObject, 'borderTopWidth' | 'borderTopStyle' | 'borderTopColor'>;
-export declare function borderTop(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>): BorderTopStyle;
-export declare function borderTop(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>, style: CSS.Property.BorderStyle): BorderTopStyle;
-export declare function borderTop(width: CSS.Property.BorderWidth<GriffelStylesCSSValue>, style: CSS.Property.BorderStyle, color: CSS.Property.BorderColor): BorderTopStyle;
+export declare function borderTop(width: BorderWidthInput): BorderTopStyle;
+export declare function borderTop(width: BorderWidthInput, style: BorderStyleInput): BorderTopStyle;
+export declare function borderTop(width: BorderWidthInput, style: BorderStyleInput, color: BorderColorInput): BorderTopStyle;
 export {};

shorthands/borderWidth.d.ts

@@ -1,8 +0,8 @@
-import * as CSS from 'csstype';
-import type { GriffelStylesStrictCSSObject, GriffelStylesCSSValue } from '../types';
+import type { GriffelStylesStrictCSSObject } from '../types';
+import { BorderWidthInput } from './types';
 declare type BorderWidthStyle = Pick<GriffelStylesStrictCSSObject, 'borderTopStyle' | 'borderRightStyle' | 'borderBottomStyle' | 'borderLeftStyle'>;
-export declare function borderWidth(all: CSS.Property.BorderWidth<GriffelStylesCSSValue>): BorderWidthStyle;
-export declare function borderWidth(vertical: CSS.Property.BorderWidth<GriffelStylesCSSValue>, horizontal: CSS.Property.BorderWidth<GriffelStylesCSSValue>): BorderWidthStyle;
-export declare function borderWidth(top: CSS.Property.BorderWidth<GriffelStylesCSSValue>, horizontal: CSS.Property.BorderWidth<GriffelStylesCSSValue>, bottom: CSS.Property.BorderWidth<GriffelStylesCSSValue>): BorderWidthStyle;
-export declare function borderWidth(top: CSS.Property.BorderWidth<GriffelStylesCSSValue>, right: CSS.Property.BorderWidth<GriffelStylesCSSValue>, bottom: CSS.Property.BorderWidth<GriffelStylesCSSValue>, left: CSS.Property.BorderWidth<GriffelStylesCSSValue>): BorderWidthStyle;
+export declare function borderWidth(all: BorderWidthInput): BorderWidthStyle;
+export declare function borderWidth(vertical: BorderWidthInput, horizontal: BorderWidthInput): BorderWidthStyle;
+export declare function borderWidth(top: BorderWidthInput, horizontal: BorderWidthInput, bottom: BorderWidthInput): BorderWidthStyle;
+export declare function borderWidth(top: BorderWidthInput, right: BorderWidthInput, bottom: BorderWidthInput, left: BorderWidthInput): BorderWidthStyle;
 export {};

shorthands/gap.d.ts

@@ -1,2 +0,3 @@
-import type { GriffelStylesStrictCSSObject, GriffelStylesCSSValue } from '../types';
+import type { GriffelStylesStrictCSSObject } from '../types';
+import { GapInput } from './types';
 declare type GapStyle = Pick<GriffelStylesStrictCSSObject, 'columnGap' | 'rowGap'>;
@@ -12,3 +13,3 @@ /**
  */
-export declare function gap(columnGap: GriffelStylesCSSValue, rowGap?: GriffelStylesCSSValue): GapStyle;
+export declare function gap(columnGap: GapInput, rowGap?: GapInput): GapStyle;
 export {};

shorthands/generateStyles.d.ts

@@ -1,4 +0,5 @@
-import { GriffelStylesCSSValue } from '../types';
+import type { GriffelStylesCSSValue, ValueOrArray } from '../types';
+import { GriffelStylesStrictCSSObject } from '../types';
 declare type DirectionalProperties = 'border' | 'padding' | 'margin';
-export declare function generateStyles<Styles extends Record<string, GriffelStylesCSSValue>>(property: DirectionalProperties, suffix: '' | 'Color' | 'Style' | 'Width', ...values: GriffelStylesCSSValue[]): Styles;
+export declare function generateStyles<Styles extends GriffelStylesStrictCSSObject>(property: DirectionalProperties, suffix: '' | 'Color' | 'Style' | 'Width', ...values: ValueOrArray<GriffelStylesCSSValue>[]): Styles;
 export {};

shorthands/margin.d.ts

@@ -1,7 +0,8 @@
-import type { GriffelStylesStrictCSSObject, GriffelStylesCSSValue } from '../types';
+import type { GriffelStylesStrictCSSObject } from '../types';
+import { MarginInput } from './types';
 declare type MarginStyle = Pick<GriffelStylesStrictCSSObject, 'marginTop' | 'marginRight' | 'marginBottom' | 'marginLeft'>;
-export declare function margin(all: GriffelStylesCSSValue): MarginStyle;
-export declare function margin(vertical: GriffelStylesCSSValue, horizontal: GriffelStylesCSSValue): MarginStyle;
-export declare function margin(top: GriffelStylesCSSValue, horizontal: GriffelStylesCSSValue, bottom: GriffelStylesCSSValue): MarginStyle;
-export declare function margin(top: GriffelStylesCSSValue, right: GriffelStylesCSSValue, bottom: GriffelStylesCSSValue, left: GriffelStylesCSSValue): MarginStyle;
+export declare function margin(all: MarginInput): MarginStyle;
+export declare function margin(vertical: MarginInput, horizontal: MarginInput): MarginStyle;
+export declare function margin(top: MarginInput, horizontal: MarginInput, bottom: MarginInput): MarginStyle;
+export declare function margin(top: MarginInput, right: MarginInput, bottom: MarginInput, left: MarginInput): MarginStyle;
 export {};

shorthands/overflow.d.ts

@@ -1,3 +0,3 @@
-import * as CSS from 'csstype';
 import type { GriffelStylesStrictCSSObject } from '../types';
+import { OverflowInput } from './types';
 declare type OverflowStyle = Pick<GriffelStylesStrictCSSObject, 'overflowX' | 'overflowY'>;
@@ -13,3 +13,3 @@ /**
  */
-export declare function overflow(overflowX: CSS.Property.Overflow, overflowY?: CSS.Property.Overflow): OverflowStyle;
+export declare function overflow(overflowX: OverflowInput, overflowY?: OverflowInput): OverflowStyle;
 export {};

shorthands/padding.d.ts

@@ -1,7 +0,8 @@
-import type { GriffelStylesStrictCSSObject, GriffelStylesCSSValue } from '../types';
+import type { GriffelStylesStrictCSSObject } from '../types';
+import { PaddingInput } from './types';
 declare type PaddingStyle = Pick<GriffelStylesStrictCSSObject, 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft'>;
-export declare function padding(all: GriffelStylesCSSValue): PaddingStyle;
-export declare function padding(vertical: GriffelStylesCSSValue, horizontal: GriffelStylesCSSValue): PaddingStyle;
-export declare function padding(top: GriffelStylesCSSValue, horizontal: GriffelStylesCSSValue, bottom: GriffelStylesCSSValue): PaddingStyle;
-export declare function padding(top: GriffelStylesCSSValue, right: GriffelStylesCSSValue, bottom: GriffelStylesCSSValue, left: GriffelStylesCSSValue): PaddingStyle;
+export declare function padding(all: PaddingInput): PaddingStyle;
+export declare function padding(vertical: PaddingInput, horizontal: PaddingInput): PaddingStyle;
+export declare function padding(top: PaddingInput, horizontal: PaddingInput, bottom: PaddingInput): PaddingStyle;
+export declare function padding(top: PaddingInput, right: PaddingInput, bottom: PaddingInput, left: PaddingInput): PaddingStyle;
 export {};

types.d.ts

@@ -5,31 +5,31 @@ import * as CSS from 'csstype';
 export declare type GriffelStylesUnsupportedCSSProperties = Record<keyof typeof UNSUPPORTED_CSS_PROPERTIES, never>;
-declare type GriffelStylesCSSProperties = Omit<CSS.Properties<GriffelStylesCSSValue>, 'animationName' | 'fontWeight'> & Partial<GriffelStylesUnsupportedCSSProperties>;
+export declare type ValueOrArray<T> = T | Array<T>;
+declare type GriffelStylesCSSProperties = Omit<CSS.PropertiesFallback<GriffelStylesCSSValue>, 'animationName'> & Partial<GriffelStylesUnsupportedCSSProperties>;
 export declare type GriffelStylesStrictCSSObject = GriffelStylesCSSProperties & GriffelStylesCSSPseudos & {
     animationName?: GriffelAnimation | GriffelAnimation[] | CSS.Property.Animation;
-    fontWeight?: CSS.Properties['fontWeight'] | string;
 };
 declare type GriffelStylesCSSPseudos = {
     [Property in CSS.Pseudos]?: (GriffelStylesStrictCSSObject & {
-        content?: string;
+        content?: string | string[];
     }) | (GriffelStylesCSSObjectCustomL1 & {
-        content?: string;
+        content?: string | string[];
     });
 };
-declare type GriffelStylesCSSObjectCustomL1 = ({
-    [Property: string]: string | undefined | GriffelStylesCSSObjectCustomL2;
-} & Partial<GriffelStylesUnsupportedCSSProperties>) | GriffelStylesStrictCSSObject;
-declare type GriffelStylesCSSObjectCustomL2 = ({
-    [Property: string]: string | undefined | GriffelStylesCSSObjectCustomL3;
-} & Partial<GriffelStylesUnsupportedCSSProperties>) | GriffelStylesStrictCSSObject;
-declare type GriffelStylesCSSObjectCustomL3 = ({
-    [Property: string]: string | undefined | GriffelStylesCSSObjectCustomL4;
-} & Partial<GriffelStylesUnsupportedCSSProperties>) | GriffelStylesStrictCSSObject;
-declare type GriffelStylesCSSObjectCustomL4 = ({
-    [Property: string]: string | undefined | GriffelStylesCSSObjectCustomL5;
-} & Partial<GriffelStylesUnsupportedCSSProperties>) | GriffelStylesStrictCSSObject;
-declare type GriffelStylesCSSObjectCustomL5 = ({
-    [Property: string]: string | undefined;
-} & Partial<GriffelStylesUnsupportedCSSProperties>) | GriffelStylesStrictCSSObject;
+declare type GriffelStylesCSSObjectCustomL1 = {
+    [Property: string]: string | number | (string | number)[] | undefined | GriffelStylesCSSObjectCustomL2;
+} & GriffelStylesStrictCSSObject;
+declare type GriffelStylesCSSObjectCustomL2 = {
+    [Property: string]: string | number | (string | number)[] | undefined | GriffelStylesCSSObjectCustomL3;
+} & GriffelStylesStrictCSSObject;
+declare type GriffelStylesCSSObjectCustomL3 = {
+    [Property: string]: string | number | (string | number)[] | undefined | GriffelStylesCSSObjectCustomL4;
+} & GriffelStylesStrictCSSObject;
+declare type GriffelStylesCSSObjectCustomL4 = {
+    [Property: string]: string | number | (string | number)[] | undefined | GriffelStylesCSSObjectCustomL5;
+} & GriffelStylesStrictCSSObject;
+declare type GriffelStylesCSSObjectCustomL5 = {
+    [Property: string]: string | number | (string | number)[] | undefined | GriffelStylesStrictCSSObject;
+} & GriffelStylesStrictCSSObject;
+export declare type GriffelStyle = GriffelStylesStrictCSSObject | GriffelStylesCSSObjectCustomL1;
 export declare type GriffelAnimation = Record<'from' | 'to' | string, GriffelStylesCSSObjectCustomL1>;
-export declare type GriffelStyle = GriffelStylesStrictCSSObject | GriffelStylesCSSObjectCustomL1;
 export interface MakeStylesOptions {
@@ -36,0 +36,0 @@ dir: 'ltr' | 'rtl';

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

333229

increased by4.4%

Number of package files

217

increased by0.46%

Lines of code

3036

increased by4.4%

Worsened metrics

Number of low supply chain risk alerts

16

increased by33.33%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes