From fcaedef6c4928649fb0ded59a7f6927d620d77f5 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Mon, 8 Nov 2021 12:17:42 +0100 Subject: [PATCH 1/9] feat(make-styles): improve types --- ...-b223402d-b9ca-485f-b891-1a373b6d8ba6.json | 7 ++ ...-98855c54-5025-454e-bd22-06dea7b0e2f3.json | 7 ++ ...-4121b063-1006-41aa-bb07-6d4535ae144d.json | 7 ++ ...-34fcd815-59f2-4832-a391-131236c47c5f.json | 7 ++ .../__fixtures__/function-mixin/mixins.ts | 4 +- .../__fixtures__/object-mixins/mixins.ts | 6 +- .../__fixtures__/shared-mixins/mixins.ts | 4 +- packages/babel-make-styles/src/plugin.ts | 6 +- packages/make-styles/etc/make-styles.api.md | 69 +++++++++---------- packages/make-styles/src/index.ts | 20 +++++- .../src/resolveStyleRulesForSlots.ts | 6 +- .../src/runtime/compileKeyframeCSS.test.ts | 6 +- .../src/runtime/compileKeyframeCSS.ts | 4 +- .../src/runtime/compileStaticCSS.ts | 4 +- .../src/runtime/expandShorthand.ts | 12 ++-- .../src/runtime/resolveStyleRules.test.ts | 4 +- .../src/runtime/resolveStyleRules.ts | 20 +++--- .../src/runtime/utils/cssifyObject.ts | 6 +- packages/make-styles/src/shorthands/border.ts | 13 ++-- .../src/shorthands/borderBottom.ts | 17 +++-- .../make-styles/src/shorthands/borderColor.ts | 12 ++-- .../make-styles/src/shorthands/borderLeft.ts | 17 +++-- .../src/shorthands/borderRadius.ts | 4 +- .../make-styles/src/shorthands/borderRight.ts | 17 +++-- .../make-styles/src/shorthands/borderStyle.ts | 12 ++-- .../make-styles/src/shorthands/borderTop.ts | 17 +++-- .../make-styles/src/shorthands/borderWidth.ts | 12 ++-- packages/make-styles/src/shorthands/gap.ts | 4 +- .../src/shorthands/generateStyles.ts | 10 +-- packages/make-styles/src/shorthands/margin.ts | 16 +++-- .../make-styles/src/shorthands/overflow.ts | 9 ++- .../make-styles/src/shorthands/padding.ts | 12 ++-- packages/make-styles/src/types.ts | 67 ++++++++++-------- .../etc/react-make-styles.api.md | 10 ++- packages/react-make-styles/src/index.ts | 3 +- .../src/typographyStyles/typographyStyles.ts | 2 +- 36 files changed, 266 insertions(+), 187 deletions(-) create mode 100644 change/@fluentui-babel-make-styles-b223402d-b9ca-485f-b891-1a373b6d8ba6.json create mode 100644 change/@fluentui-make-styles-98855c54-5025-454e-bd22-06dea7b0e2f3.json create mode 100644 change/@fluentui-react-make-styles-4121b063-1006-41aa-bb07-6d4535ae144d.json create mode 100644 change/@fluentui-react-text-34fcd815-59f2-4832-a391-131236c47c5f.json diff --git a/change/@fluentui-babel-make-styles-b223402d-b9ca-485f-b891-1a373b6d8ba6.json b/change/@fluentui-babel-make-styles-b223402d-b9ca-485f-b891-1a373b6d8ba6.json new file mode 100644 index 00000000000000..55c61b0b6e2570 --- /dev/null +++ b/change/@fluentui-babel-make-styles-b223402d-b9ca-485f-b891-1a373b6d8ba6.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "use new types from makeStyles core", + "packageName": "@fluentui/babel-make-styles", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-make-styles-98855c54-5025-454e-bd22-06dea7b0e2f3.json b/change/@fluentui-make-styles-98855c54-5025-454e-bd22-06dea7b0e2f3.json new file mode 100644 index 00000000000000..e2b170946334f2 --- /dev/null +++ b/change/@fluentui-make-styles-98855c54-5025-454e-bd22-06dea7b0e2f3.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "improve types, add new types", + "packageName": "@fluentui/make-styles", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-make-styles-4121b063-1006-41aa-bb07-6d4535ae144d.json b/change/@fluentui-react-make-styles-4121b063-1006-41aa-bb07-6d4535ae144d.json new file mode 100644 index 00000000000000..ce8c49443b6d97 --- /dev/null +++ b/change/@fluentui-react-make-styles-4121b063-1006-41aa-bb07-6d4535ae144d.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "re-export base makeStyles types", + "packageName": "@fluentui/react-make-styles", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-text-34fcd815-59f2-4832-a391-131236c47c5f.json b/change/@fluentui-react-text-34fcd815-59f2-4832-a391-131236c47c5f.json new file mode 100644 index 00000000000000..650903a9ed1a05 --- /dev/null +++ b/change/@fluentui-react-text-34fcd815-59f2-4832-a391-131236c47c5f.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "use makeStyles types from proper package", + "packageName": "@fluentui/react-text", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/babel-make-styles/__fixtures__/function-mixin/mixins.ts b/packages/babel-make-styles/__fixtures__/function-mixin/mixins.ts index d6ccad0ee3252d..bd8ce08f9575d3 100644 --- a/packages/babel-make-styles/__fixtures__/function-mixin/mixins.ts +++ b/packages/babel-make-styles/__fixtures__/function-mixin/mixins.ts @@ -1,7 +1,7 @@ -import { MakeStyles, MakeStylesStyleRule } from '@fluentui/make-styles'; +import { MakeStylesStyle, MakeStylesStyleRule } from '@fluentui/make-styles'; import { Theme } from '@fluentui/react-theme'; -export const createMixin = (rule: MakeStyles): MakeStylesStyleRule => { +export const createMixin = (rule: MakeStylesStyle): MakeStylesStyleRule => { return theme => ({ color: theme.colorBrandBackground, ...rule, diff --git a/packages/babel-make-styles/__fixtures__/object-mixins/mixins.ts b/packages/babel-make-styles/__fixtures__/object-mixins/mixins.ts index 08d31e6815a901..4178dee6cb0b9b 100644 --- a/packages/babel-make-styles/__fixtures__/object-mixins/mixins.ts +++ b/packages/babel-make-styles/__fixtures__/object-mixins/mixins.ts @@ -1,12 +1,12 @@ -import { MakeStyles, MakeStylesStyleRule } from '@fluentui/make-styles'; +import { MakeStylesStyle, MakeStylesStyleRule } from '@fluentui/make-styles'; import { Theme } from '@fluentui/react-theme'; -export const flexStyles: MakeStyles = { +export const flexStyles: MakeStylesStyle = { display: 'flex', flexDirection: 'column', }; -export const gridStyles = (gridGap: string): MakeStyles => ({ +export const gridStyles = (gridGap: string): MakeStylesStyle => ({ display: 'grid', gridRowGap: gridGap, }); diff --git a/packages/babel-make-styles/__fixtures__/shared-mixins/mixins.ts b/packages/babel-make-styles/__fixtures__/shared-mixins/mixins.ts index 0fe8eecc507e2d..2b0f4e4f169588 100644 --- a/packages/babel-make-styles/__fixtures__/shared-mixins/mixins.ts +++ b/packages/babel-make-styles/__fixtures__/shared-mixins/mixins.ts @@ -1,6 +1,6 @@ -import { MakeStyles } from '@fluentui/make-styles'; +import { MakeStylesStyle } from '@fluentui/make-styles'; -export const sharedStyles: Record = { +export const sharedStyles: Record = { root: { display: 'flex' }, container: { display: 'grid' }, }; diff --git a/packages/babel-make-styles/src/plugin.ts b/packages/babel-make-styles/src/plugin.ts index 3b904a297f45b0..c4994072f49a71 100644 --- a/packages/babel-make-styles/src/plugin.ts +++ b/packages/babel-make-styles/src/plugin.ts @@ -2,7 +2,7 @@ import { NodePath, PluginObj, PluginPass, types as t } from '@babel/core'; import { declare } from '@babel/helper-plugin-utils'; import { Module } from '@linaria/babel-preset'; import shakerEvaluator from '@linaria/shaker'; -import { resolveStyleRulesForSlots, CSSRulesByBucket, StyleBucketName, MakeStyles } from '@fluentui/make-styles'; +import { resolveStyleRulesForSlots, CSSRulesByBucket, StyleBucketName, MakeStylesStyle } from '@fluentui/make-styles'; import { astify } from './utils/astify'; import { evaluatePaths } from './utils/evaluatePaths'; @@ -536,7 +536,7 @@ export const plugin = declare, PluginObj = evaluationResult.value; + const stylesBySlots: Record = evaluationResult.value; nodePath.replaceWithMultiple((astify(stylesBySlots) as t.ObjectExpression).properties); } @@ -558,7 +558,7 @@ export const plugin = declare, PluginObj = evaluationResult.value; + const stylesBySlots: Record = evaluationResult.value; const [classnamesMapping, cssRules] = resolveStyleRulesForSlots(stylesBySlots, 0); // TODO: find a better way to replace arguments diff --git a/packages/make-styles/etc/make-styles.api.md b/packages/make-styles/etc/make-styles.api.md index 64c4adebf19243..05aefdb57307cf 100644 --- a/packages/make-styles/etc/make-styles.api.md +++ b/packages/make-styles/etc/make-styles.api.md @@ -7,8 +7,8 @@ import type { BorderColorProperty } from 'csstype'; import type { BorderStyleProperty } from 'csstype'; import type { BorderWidthProperty } from 'csstype'; +import * as CSS_2 from 'csstype'; import type { OverflowProperty } from 'csstype'; -import { Properties } from 'csstype'; // @internal export function __styles(classesMapBySlot: CSSClassesMapBySlot, cssRules: CSSRulesByBucket): (options: Pick) => Record; @@ -24,15 +24,16 @@ export function createDOMRenderer(target?: Document | undefined): MakeStylesRend // @public (undocumented) export type CSSClasses = /* ltrClassName */ string | [/* ltrClassName */ string, /* rtlClassName */ string]; -// @public (undocumented) -export type CSSClassesMap = Record; - +// Warning: (ae-forgotten-export) The symbol "CSSClassesMap" needs to be exported by the entry point index.d.ts +// // @public (undocumented) export type CSSClassesMapBySlot = Record; // @public (undocumented) export type CSSRulesByBucket = Partial>; +// Warning: (ae-forgotten-export) The symbol "SequenceHash" needs to be exported by the entry point index.d.ts +// Warning: (ae-forgotten-export) The symbol "LookupItem" needs to be exported by the entry point index.d.ts // Warning: (ae-internal-missing-underscore) The name "DEFINITION_LOOKUP_TABLE" should be prefixed with an underscore because the declaration is marked as @internal // // @internal (undocumented) @@ -54,11 +55,20 @@ export const LOOKUP_DEFINITIONS_INDEX = 0; export const LOOKUP_DIR_INDEX = 1; // @public (undocumented) -export type LookupItem = [/* definitions */ CSSClassesMap, /* dir */ /* dir */ 'rtl' | 'ltr']; +export type MakeStaticStyles = MakeStaticStylesStyle | string; + +// @public +export function makeStaticStyles(styles: MakeStaticStyles | MakeStaticStyles[]): (options: MakeStaticStylesOptions) => void; // @public (undocumented) -export type MakeStaticStyles = ({ - [key: string]: Properties & Record; +export interface MakeStaticStylesOptions { + // (undocumented) + renderer: MakeStylesRenderer; +} + +// @public (undocumented) +export type MakeStaticStylesStyle = { + [key: string]: CSS_2.Properties & Record; } & { '@font-face'?: { fontFamily: string; @@ -71,30 +81,17 @@ export type MakeStaticStyles = ({ fontWeight?: number | string; unicodeRange?: string; }; -}) | string; - -// @public -export function makeStaticStyles(styles: MakeStaticStyles | MakeStaticStyles[]): (options: MakeStaticStylesOptions) => void; - -// @public (undocumented) -export interface MakeStaticStylesOptions { - // (undocumented) - renderer: MakeStylesRenderer; -} - -// @public (undocumented) -export interface MakeStyles extends Omit, 'animationName'> { - // (undocumented) - [key: string]: any; - // (undocumented) - animationName?: object | string; -} +}; +// Warning: (ae-forgotten-export) The symbol "StylesBySlots" needs to be exported by the entry point index.d.ts +// // @public (undocumented) export function makeStyles(stylesBySlots: StylesBySlots, unstable_cssPriority?: number): (options: MakeStylesOptions) => Record; +// Warning: (ae-forgotten-export) The symbol "MakeStylesCSSObjectCustom" needs to be exported by the entry point index.d.ts +// // @public (undocumented) -export type MakeStylesCSSValue = string | 0; +export type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustom>; // @public (undocumented) export interface MakeStylesOptions { @@ -116,18 +113,20 @@ export interface MakeStylesRenderer { styleElements: Partial>; } +// Warning: (ae-forgotten-export) The symbol "MakeStylesStrictCSSObject" needs to be exported by the entry point index.d.ts +// +// @public (undocumented) +export type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustom; + // @public (undocumented) -export type MakeStylesStyleFunctionRule = (tokens: Tokens) => MakeStyles; +export type MakeStylesStyleFunctionRule = (tokens: Tokens) => MakeStylesStyle; // @public (undocumented) -export type MakeStylesStyleRule = MakeStyles | MakeStylesStyleFunctionRule; +export type MakeStylesStyleRule = MakeStylesStyle | MakeStylesStyleFunctionRule; // @public export function mergeClasses(...classNames: (string | false | undefined)[]): string; -// @public (undocumented) -export type PropertyHash = string; - // @public export function rehydrateRendererCache(renderer: MakeStylesRenderer, target?: Document | undefined): void; @@ -139,7 +138,7 @@ export function resolveProxyValues(value: T): T; // Warning: (ae-internal-missing-underscore) The name "resolveStyleRules" should be prefixed with an underscore because the declaration is marked as @internal // // @internal -export function resolveStyleRules(styles: MakeStyles, unstable_cssPriority?: number): [CSSClassesMap, CSSRulesByBucket]; +export function resolveStyleRules(styles: MakeStylesStyle, unstable_cssPriority?: number): [CSSClassesMap, CSSRulesByBucket]; // @public export function resolveStyleRulesForSlots(stylesBySlots: StylesBySlots, unstable_cssPriority: number): [CSSClassesMapBySlot, CSSRulesByBucket]; @@ -154,9 +153,6 @@ export const SEQUENCE_HASH_LENGTH = 7; // @internal (undocumented) export const SEQUENCE_PREFIX = "___"; -// @public (undocumented) -export type SequenceHash = string; - // @public (undocumented) export const shorthands: { border: typeof border; @@ -180,9 +176,6 @@ export type StyleBucketName = 'd' | 'l' | 'v' | 'w' | 'f' | 'i' | 'h' | 'a' | 'k // @public export const styleBucketOrdering: StyleBucketName[]; -// @public (undocumented) -export type StylesBySlots = Record>; - // Warnings were encountered during analysis: // // lib/index.d.ts:3:5 - (ae-forgotten-export) The symbol "border" needs to be exported by the entry point index.d.ts diff --git a/packages/make-styles/src/index.ts b/packages/make-styles/src/index.ts index 139443edb96df7..7e18e2700c3660 100644 --- a/packages/make-styles/src/index.ts +++ b/packages/make-styles/src/index.ts @@ -46,5 +46,23 @@ export { createCSSVariablesProxy, resolveProxyValues } from './runtime/createCSS export { resolveStyleRules } from './runtime/resolveStyleRules'; export { __styles } from './__styles'; -export * from './types'; export * from './constants'; +export type { + // Static styles + MakeStaticStylesStyle, + MakeStaticStyles, + // Styles + MakeStylesAnimation, + MakeStylesStyle, + MakeStylesStyleRule, + MakeStylesStyleFunctionRule, + // Internal types + CSSClasses, + CSSClassesMapBySlot, + CSSRulesByBucket, + StyleBucketName, + // Util + MakeStaticStylesOptions, + MakeStylesOptions, + MakeStylesRenderer, +} from './types'; diff --git a/packages/make-styles/src/resolveStyleRulesForSlots.ts b/packages/make-styles/src/resolveStyleRulesForSlots.ts index 549f5b1fe0745f..3ea896a65b42cf 100644 --- a/packages/make-styles/src/resolveStyleRulesForSlots.ts +++ b/packages/make-styles/src/resolveStyleRulesForSlots.ts @@ -3,7 +3,7 @@ import { resolveStyleRules } from './runtime/resolveStyleRules'; import { CSSClassesMapBySlot, CSSRulesByBucket, - MakeStyles, + MakeStylesStyle, MakeStylesStyleFunctionRule, StyleBucketName, StylesBySlots, @@ -28,10 +28,10 @@ export function resolveStyleRulesForSlots // eslint-disable-next-line guard-for-in for (const slotName in stylesBySlots) { - const slotStyles: MakeStyles = + const slotStyles: MakeStylesStyle = typeof stylesBySlots[slotName] === 'function' ? (stylesBySlots[slotName] as MakeStylesStyleFunctionRule)(tokensProxy) - : stylesBySlots[slotName]; + : (stylesBySlots[slotName] as MakeStylesStyle); const [cssClassMap, cssRulesByBucket] = resolveStyleRules(slotStyles, unstable_cssPriority); classesMapBySlot[slotName] = cssClassMap; diff --git a/packages/make-styles/src/runtime/compileKeyframeCSS.test.ts b/packages/make-styles/src/runtime/compileKeyframeCSS.test.ts index 812ff1c36b43e7..846d377f9f6dc8 100644 --- a/packages/make-styles/src/runtime/compileKeyframeCSS.test.ts +++ b/packages/make-styles/src/runtime/compileKeyframeCSS.test.ts @@ -1,9 +1,9 @@ import { compileKeyframeRule, compileKeyframesCSS } from './compileKeyframeCSS'; -import { MakeStyles } from '../types'; +import { MakeStylesAnimation } from '../types'; describe('compileKeyframeRule', () => { it('stringifies an object with keyframes', () => { - const keyframes: MakeStyles = { + const keyframes: MakeStylesAnimation = { from: { transform: 'rotate(0deg)', }, @@ -19,7 +19,7 @@ describe('compileKeyframeRule', () => { describe('compileKeyframeCSS', () => { it('creates CSS from strings with keyframes', () => { - const keyframes: MakeStyles = { + const keyframes: MakeStylesAnimation = { from: { height: '10px', }, diff --git a/packages/make-styles/src/runtime/compileKeyframeCSS.ts b/packages/make-styles/src/runtime/compileKeyframeCSS.ts index cc93f319c371ae..655737b827ca3c 100644 --- a/packages/make-styles/src/runtime/compileKeyframeCSS.ts +++ b/packages/make-styles/src/runtime/compileKeyframeCSS.ts @@ -1,8 +1,8 @@ -import { MakeStyles } from '../types'; +import { MakeStylesAnimation } from '../types'; import { compile, middleware, serialize, rulesheet, stringify, prefixer } from 'stylis'; import { cssifyObject } from './utils/cssifyObject'; -export function compileKeyframeRule(keyframeObject: MakeStyles): string { +export function compileKeyframeRule(keyframeObject: MakeStylesAnimation): string { let css: string = ''; // eslint-disable-next-line guard-for-in diff --git a/packages/make-styles/src/runtime/compileStaticCSS.ts b/packages/make-styles/src/runtime/compileStaticCSS.ts index aafab280200f59..1f7f520231ad17 100644 --- a/packages/make-styles/src/runtime/compileStaticCSS.ts +++ b/packages/make-styles/src/runtime/compileStaticCSS.ts @@ -1,8 +1,8 @@ -import { MakeStyles } from '../types'; +import { MakeStaticStylesStyle } from '../types'; import { compileCSSRules } from './compileCSS'; import { cssifyObject } from './utils/cssifyObject'; -export function compileStaticCSS(property: string, value: MakeStyles): string { +export function compileStaticCSS(property: string, value: MakeStaticStylesStyle): string { const cssRule = `${property} {${cssifyObject(value)}}`; return compileCSSRules(cssRule)[0]; } diff --git a/packages/make-styles/src/runtime/expandShorthand.ts b/packages/make-styles/src/runtime/expandShorthand.ts index 888aa1c14d9f44..8222d91fee03a4 100644 --- a/packages/make-styles/src/runtime/expandShorthand.ts +++ b/packages/make-styles/src/runtime/expandShorthand.ts @@ -1,14 +1,14 @@ import { expandProperty } from 'inline-style-expand-shorthand'; -import { MakeStyles } from '../types'; +import { MakeStylesStyle } from '../types'; /** * A function that expands longhand properties ("margin", "padding") to their shorthand versions ("margin-left", etc.). * Follows CSS-like order in expansion i.e. last defined property wins. */ -export function expandShorthand(style: MakeStyles, result: MakeStyles = {}): MakeStyles { +export function expandShorthand(style: MakeStylesStyle, result: MakeStylesStyle = {}): MakeStylesStyle { // eslint-disable-next-line guard-for-in for (const property in style) { - const value = style[property]; + const value = style[property as keyof MakeStylesStyle]; if (typeof value === 'string' || typeof value === 'number') { const expansion = expandProperty(property, value); @@ -16,15 +16,13 @@ export function expandShorthand(style: MakeStyles, result: MakeStyles = {}): Mak if (expansion) { Object.assign(result, expansion); } else { - result[property] = value; + result[property as keyof MakeStylesStyle] = value; } // eslint-disable-next-line eqeqeq } else if (value == null) { // should skip - } else if (Array.isArray(value)) { - result[property] = value; } else if (typeof value === 'object') { - result[property] = expandShorthand(value); + result[property as keyof MakeStylesStyle] = expandShorthand(value as MakeStylesStyle); } } diff --git a/packages/make-styles/src/runtime/resolveStyleRules.test.ts b/packages/make-styles/src/runtime/resolveStyleRules.test.ts index d26769f702d7fe..1412ca30624583 100644 --- a/packages/make-styles/src/runtime/resolveStyleRules.test.ts +++ b/packages/make-styles/src/runtime/resolveStyleRules.test.ts @@ -599,10 +599,10 @@ describe('resolveStyleRules', () => { }, { from: { - opacity: 0, + opacity: '0', }, to: { - opacity: 1, + opacity: '1', }, }, ], diff --git a/packages/make-styles/src/runtime/resolveStyleRules.ts b/packages/make-styles/src/runtime/resolveStyleRules.ts index c1327bea11c84a..06a26df53a551b 100644 --- a/packages/make-styles/src/runtime/resolveStyleRules.ts +++ b/packages/make-styles/src/runtime/resolveStyleRules.ts @@ -2,7 +2,7 @@ import hashString from '@emotion/hash'; import { convert, convertProperty } from 'rtl-css-js/core'; import { HASH_PREFIX } from '../constants'; -import { MakeStyles, CSSClassesMap, CSSRulesByBucket, StyleBucketName } from '../types'; +import { MakeStylesStyle, CSSClassesMap, CSSRulesByBucket, StyleBucketName, MakeStylesAnimation } from '../types'; import { compileCSS, CompileCSSOptions } from './compileCSS'; import { compileKeyframeRule, compileKeyframesCSS } from './compileKeyframeCSS'; import { expandShorthand } from './expandShorthand'; @@ -41,7 +41,7 @@ function pushToCSSRules( } function resolveStyleRulesInner( - styles: MakeStyles, + styles: MakeStylesStyle, unstable_cssPriority: number = 0, pseudo = '', media = '', @@ -52,7 +52,7 @@ function resolveStyleRulesInner( ): [CSSClassesMap, CSSRulesByBucket] { // eslint-disable-next-line guard-for-in for (const property in styles) { - const value = styles[property]; + const value = styles[property as keyof MakeStylesStyle]; // eslint-disable-next-line eqeqeq if (value == null) { @@ -107,7 +107,9 @@ function resolveStyleRulesInner( pushToClassesMap(cssClassesMap, key, className, rtlClassName); pushToCSSRules(cssRulesByBucket, styleBucketName, ltrCSS, rtlCSS); } else if (property === 'animationName') { - const animationNameValue = Array.isArray(value) ? value : [value]; + const animationNameValue = Array.isArray(value) + ? (value as MakeStylesAnimation[]) + : [value as MakeStylesAnimation]; const animationNames: string[] = []; const rtlAnimationNames: string[] = []; @@ -157,7 +159,7 @@ function resolveStyleRulesInner( } else if (isObject(value)) { if (isNestedSelector(property)) { resolveStyleRulesInner( - value, + value as MakeStylesStyle, unstable_cssPriority, pseudo + normalizeNestedProperty(property), media, @@ -169,7 +171,7 @@ function resolveStyleRulesInner( const combinedMediaQuery = generateCombinedQuery(media, property.slice(6).trim()); resolveStyleRulesInner( - value, + value as MakeStylesStyle, unstable_cssPriority, pseudo, combinedMediaQuery, @@ -181,7 +183,7 @@ function resolveStyleRulesInner( const combinedSupportQuery = generateCombinedQuery(support, property.slice(9).trim()); resolveStyleRulesInner( - value, + value as MakeStylesStyle, unstable_cssPriority, pseudo, media, @@ -207,11 +209,11 @@ function resolveStyleRulesInner( * @internal */ export function resolveStyleRules( - styles: MakeStyles, + styles: MakeStylesStyle, unstable_cssPriority: number = 0, ): [CSSClassesMap, CSSRulesByBucket] { // expandShorthand() and resolveProxyValues() are recursive functions and should be evaluated once for a style object - const expandedStyles: MakeStyles = expandShorthand(resolveProxyValues(styles)); + const expandedStyles: MakeStylesStyle = expandShorthand(resolveProxyValues(styles)); return resolveStyleRulesInner(expandedStyles, unstable_cssPriority); } diff --git a/packages/make-styles/src/runtime/utils/cssifyObject.ts b/packages/make-styles/src/runtime/utils/cssifyObject.ts index 7b9af73c89d567..c6cfe9ae1fb880 100644 --- a/packages/make-styles/src/runtime/utils/cssifyObject.ts +++ b/packages/make-styles/src/runtime/utils/cssifyObject.ts @@ -1,12 +1,12 @@ -import { MakeStyles } from '../../types'; +import { MakeStaticStylesStyle, MakeStylesStyle } from '../../types'; import { hyphenateProperty } from './hyphenateProperty'; -export function cssifyObject(style: MakeStyles) { +export function cssifyObject(style: MakeStylesStyle | MakeStaticStylesStyle) { let css = ''; // eslint-disable-next-line guard-for-in for (const property in style) { - const value = style[property]; + const value = style[property as keyof MakeStylesStyle]; if (typeof value !== 'string' && typeof value !== 'number') { continue; diff --git a/packages/make-styles/src/shorthands/border.ts b/packages/make-styles/src/shorthands/border.ts index 62b3c0765180c5..48b369ed5bb8d7 100644 --- a/packages/make-styles/src/shorthands/border.ts +++ b/packages/make-styles/src/shorthands/border.ts @@ -1,17 +1,20 @@ import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype'; -import type { MakeStyles, MakeStylesCSSValue } from '../types'; +import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types'; import { borderWidth } from './borderWidth'; import { borderStyle } from './borderStyle'; import { borderColor } from './borderColor'; -export function border(width: BorderWidthProperty): MakeStyles; -export function border(width: BorderWidthProperty, style: BorderStyleProperty): MakeStyles; +export function border(width: BorderWidthProperty): MakeStylesStrictCSSObject; +export function border( + width: BorderWidthProperty, + style: BorderStyleProperty, +): MakeStylesStrictCSSObject; export function border( width: BorderWidthProperty, style: BorderStyleProperty, color: BorderColorProperty, -): MakeStyles; +): MakeStylesStrictCSSObject; /** * A function that implements expansion for "border" to all sides of an element, it's simplified - check usage examples. @@ -25,7 +28,7 @@ export function border( */ export function border( ...values: [BorderWidthProperty, BorderStyleProperty?, BorderColorProperty?] -): MakeStyles { +): MakeStylesStrictCSSObject { return { ...borderWidth(values[0]), ...(values[1] && borderStyle(values[1])), diff --git a/packages/make-styles/src/shorthands/borderBottom.ts b/packages/make-styles/src/shorthands/borderBottom.ts index 9b6d1906b20450..e1d6b525c81d36 100644 --- a/packages/make-styles/src/shorthands/borderBottom.ts +++ b/packages/make-styles/src/shorthands/borderBottom.ts @@ -1,13 +1,16 @@ import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype'; -import type { MakeStyles, MakeStylesCSSValue } from '../types'; +import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types'; -export function borderBottom(width: BorderWidthProperty): MakeStyles; -export function borderBottom(width: BorderWidthProperty, style: BorderStyleProperty): MakeStyles; +export function borderBottom(width: BorderWidthProperty): MakeStylesStrictCSSObject; +export function borderBottom( + width: BorderWidthProperty, + style: BorderStyleProperty, +): MakeStylesStrictCSSObject; export function borderBottom( width: BorderWidthProperty, style: BorderStyleProperty, color: BorderColorProperty, -): MakeStyles; +): MakeStylesStrictCSSObject; /** * A function that implements expansion for "border-bottom", it's simplified - check usage examples. @@ -21,10 +24,10 @@ export function borderBottom( */ export function borderBottom( ...values: [BorderWidthProperty, BorderStyleProperty?, BorderColorProperty?] -): MakeStyles { +): MakeStylesStrictCSSObject { return { borderBottomWidth: values[0], - ...(values[1] && ({ borderBottomStyle: values[1] } as MakeStyles)), - ...(values[2] && ({ borderBottomColor: values[2] } as MakeStyles)), + ...(values[1] && ({ borderBottomStyle: values[1] } as MakeStylesStrictCSSObject)), + ...(values[2] && { borderBottomColor: values[2] }), }; } diff --git a/packages/make-styles/src/shorthands/borderColor.ts b/packages/make-styles/src/shorthands/borderColor.ts index 15fb10930932e9..57ce371e13cb6b 100644 --- a/packages/make-styles/src/shorthands/borderColor.ts +++ b/packages/make-styles/src/shorthands/borderColor.ts @@ -1,21 +1,21 @@ import type { BorderColorProperty } from 'csstype'; -import type { MakeStyles } from '../types'; +import type { MakeStylesStrictCSSObject } from '../types'; import { generateStyles } from './generateStyles'; -export function borderColor(all: BorderColorProperty): MakeStyles; -export function borderColor(vertical: BorderColorProperty, horizontal: BorderColorProperty): MakeStyles; +export function borderColor(all: BorderColorProperty): MakeStylesStrictCSSObject; +export function borderColor(vertical: BorderColorProperty, horizontal: BorderColorProperty): MakeStylesStrictCSSObject; export function borderColor( top: BorderColorProperty, horizontal: BorderColorProperty, bottom: BorderColorProperty, -): MakeStyles; +): MakeStylesStrictCSSObject; export function borderColor( top: BorderColorProperty, right: BorderColorProperty, bottom: BorderColorProperty, left: BorderColorProperty, -): MakeStyles; +): MakeStylesStrictCSSObject; /** * A function that implements CSS spec conformant expansion for "borderColor" @@ -28,6 +28,6 @@ export function borderColor( * * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-color */ -export function borderColor(...values: BorderColorProperty[]): MakeStyles { +export function borderColor(...values: BorderColorProperty[]): MakeStylesStrictCSSObject { return generateStyles('border', 'Color', ...values); } diff --git a/packages/make-styles/src/shorthands/borderLeft.ts b/packages/make-styles/src/shorthands/borderLeft.ts index 336daf5ffb5540..cf85a206c4fb12 100644 --- a/packages/make-styles/src/shorthands/borderLeft.ts +++ b/packages/make-styles/src/shorthands/borderLeft.ts @@ -1,13 +1,16 @@ import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype'; -import type { MakeStyles, MakeStylesCSSValue } from '../types'; +import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types'; -export function borderLeft(width: BorderWidthProperty): MakeStyles; -export function borderLeft(width: BorderWidthProperty, style: BorderStyleProperty): MakeStyles; +export function borderLeft(width: BorderWidthProperty): MakeStylesStrictCSSObject; +export function borderLeft( + width: BorderWidthProperty, + style: BorderStyleProperty, +): MakeStylesStrictCSSObject; export function borderLeft( width: BorderWidthProperty, style: BorderStyleProperty, color: BorderColorProperty, -): MakeStyles; +): MakeStylesStrictCSSObject; /** * A function that implements expansion for "border-left", it's simplified - check usage examples. @@ -21,10 +24,10 @@ export function borderLeft( */ export function borderLeft( ...values: [BorderWidthProperty, BorderStyleProperty?, BorderColorProperty?] -): MakeStyles { +): MakeStylesStrictCSSObject { return { borderLeftWidth: values[0], - ...(values[1] && ({ borderLeftStyle: values[1] } as MakeStyles)), - ...(values[2] && ({ borderLeftColor: values[2] } as MakeStyles)), + ...(values[1] && ({ borderLeftStyle: values[1] } as MakeStylesStrictCSSObject)), + ...(values[2] && { borderLeftColor: values[2] }), }; } diff --git a/packages/make-styles/src/shorthands/borderRadius.ts b/packages/make-styles/src/shorthands/borderRadius.ts index 14a0f8c97b3f95..3afeb7b7524979 100644 --- a/packages/make-styles/src/shorthands/borderRadius.ts +++ b/packages/make-styles/src/shorthands/borderRadius.ts @@ -1,4 +1,4 @@ -import type { MakeStyles, MakeStylesCSSValue } from '../types'; +import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types'; /** * A function that implements CSS spec conformant expansion for "borderRadius". "/" is not supported, please use CSS @@ -17,7 +17,7 @@ export function borderRadius( value2: MakeStylesCSSValue = value1, value3: MakeStylesCSSValue = value1, value4: MakeStylesCSSValue = value2, -): MakeStyles { +): MakeStylesStrictCSSObject { return { borderBottomRightRadius: value3, borderBottomLeftRadius: value4, diff --git a/packages/make-styles/src/shorthands/borderRight.ts b/packages/make-styles/src/shorthands/borderRight.ts index 0613c8a9c89401..074adb44ba0ceb 100644 --- a/packages/make-styles/src/shorthands/borderRight.ts +++ b/packages/make-styles/src/shorthands/borderRight.ts @@ -1,13 +1,16 @@ import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype'; -import type { MakeStyles, MakeStylesCSSValue } from '../types'; +import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types'; -export function borderRight(width: BorderWidthProperty): MakeStyles; -export function borderRight(width: BorderWidthProperty, style: BorderStyleProperty): MakeStyles; +export function borderRight(width: BorderWidthProperty): MakeStylesStrictCSSObject; +export function borderRight( + width: BorderWidthProperty, + style: BorderStyleProperty, +): MakeStylesStrictCSSObject; export function borderRight( width: BorderWidthProperty, style: BorderStyleProperty, color: BorderColorProperty, -): MakeStyles; +): MakeStylesStrictCSSObject; /** * A function that implements expansion for "border-right", it's simplified - check usage examples. @@ -21,10 +24,10 @@ export function borderRight( */ export function borderRight( ...values: [BorderWidthProperty, BorderStyleProperty?, BorderColorProperty?] -): MakeStyles { +): MakeStylesStrictCSSObject { return { borderRightWidth: values[0], - ...(values[1] && ({ borderRightStyle: values[1] } as MakeStyles)), - ...(values[2] && ({ borderRightColor: values[2] } as MakeStyles)), + ...(values[1] && ({ borderRightStyle: values[1] } as MakeStylesStrictCSSObject)), + ...(values[2] && { borderRightColor: values[2] }), }; } diff --git a/packages/make-styles/src/shorthands/borderStyle.ts b/packages/make-styles/src/shorthands/borderStyle.ts index 0da436476a39ff..caa549f4616b97 100644 --- a/packages/make-styles/src/shorthands/borderStyle.ts +++ b/packages/make-styles/src/shorthands/borderStyle.ts @@ -1,21 +1,21 @@ import type { BorderStyleProperty } from 'csstype'; -import type { MakeStyles } from '../types'; +import type { MakeStylesStrictCSSObject } from '../types'; import { generateStyles } from './generateStyles'; -export function borderStyle(all: BorderStyleProperty): MakeStyles; -export function borderStyle(vertical: BorderStyleProperty, horizontal: BorderStyleProperty): MakeStyles; +export function borderStyle(all: BorderStyleProperty): MakeStylesStrictCSSObject; +export function borderStyle(vertical: BorderStyleProperty, horizontal: BorderStyleProperty): MakeStylesStrictCSSObject; export function borderStyle( top: BorderStyleProperty, horizontal: BorderStyleProperty, bottom: BorderStyleProperty, -): MakeStyles; +): MakeStylesStrictCSSObject; export function borderStyle( top: BorderStyleProperty, right: BorderStyleProperty, bottom: BorderStyleProperty, left: BorderStyleProperty, -): MakeStyles; +): MakeStylesStrictCSSObject; /** * A function that implements CSS spec conformant expansion for "borderStyle" @@ -28,6 +28,6 @@ export function borderStyle( * * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-style */ -export function borderStyle(...values: BorderStyleProperty[]): MakeStyles { +export function borderStyle(...values: BorderStyleProperty[]): MakeStylesStrictCSSObject { return generateStyles('border', 'Style', ...values); } diff --git a/packages/make-styles/src/shorthands/borderTop.ts b/packages/make-styles/src/shorthands/borderTop.ts index 2a68a010391ae1..11bd1e26aa79b6 100644 --- a/packages/make-styles/src/shorthands/borderTop.ts +++ b/packages/make-styles/src/shorthands/borderTop.ts @@ -1,13 +1,16 @@ import type { BorderColorProperty, BorderStyleProperty, BorderWidthProperty } from 'csstype'; -import type { MakeStyles, MakeStylesCSSValue } from '../types'; +import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types'; -export function borderTop(width: BorderWidthProperty): MakeStyles; -export function borderTop(width: BorderWidthProperty, style: BorderStyleProperty): MakeStyles; +export function borderTop(width: BorderWidthProperty): MakeStylesStrictCSSObject; +export function borderTop( + width: BorderWidthProperty, + style: BorderStyleProperty, +): MakeStylesStrictCSSObject; export function borderTop( width: BorderWidthProperty, style: BorderStyleProperty, color: BorderColorProperty, -): MakeStyles; +): MakeStylesStrictCSSObject; /** * A function that implements expansion for "border-top", it's simplified - check usage examples. @@ -21,10 +24,10 @@ export function borderTop( */ export function borderTop( ...values: [BorderWidthProperty, BorderStyleProperty?, BorderColorProperty?] -): MakeStyles { +): MakeStylesStrictCSSObject { return { borderTopWidth: values[0], - ...(values[1] && ({ borderTopStyle: values[1] } as MakeStyles)), - ...(values[2] && ({ borderTopColor: values[2] } as MakeStyles)), + ...(values[1] && ({ borderTopStyle: values[1] } as MakeStylesStrictCSSObject)), + ...(values[2] && { borderTopColor: values[2] }), }; } diff --git a/packages/make-styles/src/shorthands/borderWidth.ts b/packages/make-styles/src/shorthands/borderWidth.ts index 67c35415211110..e6553fef7f4ea7 100644 --- a/packages/make-styles/src/shorthands/borderWidth.ts +++ b/packages/make-styles/src/shorthands/borderWidth.ts @@ -1,24 +1,24 @@ import type { BorderWidthProperty } from 'csstype'; -import type { MakeStyles, MakeStylesCSSValue } from '../types'; +import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types'; import { generateStyles } from './generateStyles'; -export function borderWidth(all: BorderWidthProperty): MakeStyles; +export function borderWidth(all: BorderWidthProperty): MakeStylesStrictCSSObject; export function borderWidth( vertical: BorderWidthProperty, horizontal: BorderWidthProperty, -): MakeStyles; +): MakeStylesStrictCSSObject; export function borderWidth( top: BorderWidthProperty, horizontal: BorderWidthProperty, bottom: BorderWidthProperty, -): MakeStyles; +): MakeStylesStrictCSSObject; export function borderWidth( top: BorderWidthProperty, right: BorderWidthProperty, bottom: BorderWidthProperty, left: BorderWidthProperty, -): MakeStyles; +): MakeStylesStrictCSSObject; /** * A function that implements CSS spec conformant expansion for "borderWidth" @@ -31,6 +31,6 @@ export function borderWidth( * * See https://developer.mozilla.org/en-US/docs/Web/CSS/border-width */ -export function borderWidth(...values: BorderWidthProperty[]): MakeStyles { +export function borderWidth(...values: BorderWidthProperty[]): MakeStylesStrictCSSObject { return generateStyles('border', 'Width', ...values); } diff --git a/packages/make-styles/src/shorthands/gap.ts b/packages/make-styles/src/shorthands/gap.ts index 0f31b417bbaef9..94d8d4ae01ae1f 100644 --- a/packages/make-styles/src/shorthands/gap.ts +++ b/packages/make-styles/src/shorthands/gap.ts @@ -1,4 +1,4 @@ -import type { MakeStyles, MakeStylesCSSValue } from '../types'; +import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types'; /** * A function that implements CSS spec conformant expansion for "gap" @@ -9,7 +9,7 @@ import type { MakeStyles, MakeStylesCSSValue } from '../types'; * * See https://developer.mozilla.org/en-US/docs/Web/CSS/gap */ -export function gap(columnGap: MakeStylesCSSValue, rowGap: MakeStylesCSSValue = columnGap): MakeStyles { +export function gap(columnGap: MakeStylesCSSValue, rowGap: MakeStylesCSSValue = columnGap): MakeStylesStrictCSSObject { return { columnGap, rowGap, diff --git a/packages/make-styles/src/shorthands/generateStyles.ts b/packages/make-styles/src/shorthands/generateStyles.ts index 00ab4047ac2935..2e6d0dcfac6b1f 100644 --- a/packages/make-styles/src/shorthands/generateStyles.ts +++ b/packages/make-styles/src/shorthands/generateStyles.ts @@ -1,4 +1,4 @@ -import { MakeStylesCSSValue, MakeStyles } from '../types'; +import { MakeStylesCSSValue, MakeStylesStrictCSSObject } from '../types'; type DirectionalProperties = 'border' | 'padding' | 'margin'; @@ -8,15 +8,17 @@ export function generateStyles( property: DirectionalProperties, suffix: '' | 'Color' | 'Style' | 'Width', ...values: MakeStylesCSSValue[] -): MakeStyles { +): MakeStylesStrictCSSObject { const [firstValue, secondValue = firstValue, thirdValue = firstValue, fourthValue = secondValue] = values; const valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue]; - const styles: MakeStyles = {}; + const styles: MakeStylesStrictCSSObject = {}; for (let i = 0; i < valuesWithDefaults.length; i += 1) { if (valuesWithDefaults[i] || valuesWithDefaults[i] === 0) { - styles[(property + positionMap[i] + suffix) as keyof MakeStyles] = valuesWithDefaults[i]; + const newKey = (property + positionMap[i] + suffix) as keyof MakeStylesStrictCSSObject; + + styles[newKey] = (valuesWithDefaults[i] as unknown) as undefined; } } diff --git a/packages/make-styles/src/shorthands/margin.ts b/packages/make-styles/src/shorthands/margin.ts index bdd94869a3aafe..cd6f71de1acb4a 100644 --- a/packages/make-styles/src/shorthands/margin.ts +++ b/packages/make-styles/src/shorthands/margin.ts @@ -1,15 +1,19 @@ -import type { MakeStyles, MakeStylesCSSValue } from '../types'; +import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types'; import { generateStyles } from './generateStyles'; -export function margin(all: MakeStylesCSSValue): MakeStyles; -export function margin(vertical: MakeStylesCSSValue, horizontal: MakeStylesCSSValue): MakeStyles; -export function margin(top: MakeStylesCSSValue, horizontal: MakeStylesCSSValue, bottom: MakeStylesCSSValue): MakeStyles; +export function margin(all: MakeStylesCSSValue): MakeStylesStrictCSSObject; +export function margin(vertical: MakeStylesCSSValue, horizontal: MakeStylesCSSValue): MakeStylesStrictCSSObject; +export function margin( + top: MakeStylesCSSValue, + horizontal: MakeStylesCSSValue, + bottom: MakeStylesCSSValue, +): MakeStylesStrictCSSObject; export function margin( top: MakeStylesCSSValue, right: MakeStylesCSSValue, bottom: MakeStylesCSSValue, left: MakeStylesCSSValue, -): MakeStyles; +): MakeStylesStrictCSSObject; /** * A function that implements CSS spec conformant expansion for "margin" @@ -22,6 +26,6 @@ export function margin( * * See https://developer.mozilla.org/en-US/docs/Web/CSS/margin */ -export function margin(...values: MakeStylesCSSValue[]): MakeStyles { +export function margin(...values: MakeStylesCSSValue[]): MakeStylesStrictCSSObject { return generateStyles('margin', '', ...values); } diff --git a/packages/make-styles/src/shorthands/overflow.ts b/packages/make-styles/src/shorthands/overflow.ts index d2e87e2eddfd72..48f65bc705db9c 100644 --- a/packages/make-styles/src/shorthands/overflow.ts +++ b/packages/make-styles/src/shorthands/overflow.ts @@ -1,5 +1,5 @@ import type { OverflowProperty } from 'csstype'; -import type { MakeStyles } from '../types'; +import type { MakeStylesStrictCSSObject } from '../types'; /** * A function that implements CSS spec conformant expansion for "overflow" @@ -10,9 +10,12 @@ import type { MakeStyles } from '../types'; * * See https://developer.mozilla.org/en-US/docs/Web/CSS/overflow */ -export function overflow(overflowX: OverflowProperty, overflowY: OverflowProperty = overflowX): MakeStyles { +export function overflow( + overflowX: OverflowProperty, + overflowY: OverflowProperty = overflowX, +): MakeStylesStrictCSSObject { return { overflowX, overflowY, - } as MakeStyles; + } as MakeStylesStrictCSSObject; } diff --git a/packages/make-styles/src/shorthands/padding.ts b/packages/make-styles/src/shorthands/padding.ts index 961eb412285c6f..a3b9c8bc1c67f1 100644 --- a/packages/make-styles/src/shorthands/padding.ts +++ b/packages/make-styles/src/shorthands/padding.ts @@ -1,19 +1,19 @@ -import type { MakeStyles, MakeStylesCSSValue } from '../types'; +import type { MakeStylesStrictCSSObject, MakeStylesCSSValue } from '../types'; import { generateStyles } from './generateStyles'; -export function padding(all: MakeStylesCSSValue): MakeStyles; -export function padding(vertical: MakeStylesCSSValue, horizontal: MakeStylesCSSValue): MakeStyles; +export function padding(all: MakeStylesCSSValue): MakeStylesStrictCSSObject; +export function padding(vertical: MakeStylesCSSValue, horizontal: MakeStylesCSSValue): MakeStylesStrictCSSObject; export function padding( top: MakeStylesCSSValue, horizontal: MakeStylesCSSValue, bottom: MakeStylesCSSValue, -): MakeStyles; +): MakeStylesStrictCSSObject; export function padding( top: MakeStylesCSSValue, right: MakeStylesCSSValue, bottom: MakeStylesCSSValue, left: MakeStylesCSSValue, -): MakeStyles; +): MakeStylesStrictCSSObject; /** * A function that implements CSS spec conformant expansion for "padding" @@ -26,6 +26,6 @@ export function padding( * * See https://developer.mozilla.org/en-US/docs/Web/CSS/padding */ -export function padding(...values: MakeStylesCSSValue[]): MakeStyles { +export function padding(...values: MakeStylesCSSValue[]): MakeStylesStrictCSSObject { return generateStyles('padding', '', ...values); } diff --git a/packages/make-styles/src/types.ts b/packages/make-styles/src/types.ts index f2bad3170f86b5..ff10976bb404d0 100644 --- a/packages/make-styles/src/types.ts +++ b/packages/make-styles/src/types.ts @@ -1,43 +1,52 @@ -import { Properties as CSSProperties } from 'csstype'; +import * as CSS from 'csstype'; export type MakeStylesCSSValue = string | 0; -export interface MakeStyles extends Omit, 'animationName'> { - // TODO Questionable: how else would users target their own children? - [key: string]: any; // eslint-disable-line @typescript-eslint/no-explicit-any +type MakeStylesCSSProperties = Omit< + CSS.Properties, + // We have custom definition for "animationName" + 'animationName' +>; - animationName?: object | string; -} +export type MakeStylesStrictCSSObject = MakeStylesCSSProperties & + MakeStylesCSSPseudos & { animationName?: MakeStylesAnimation | MakeStylesAnimation[] | CSS.AnimationProperty }; + +type MakeStylesCSSObjectCustom = { + [Property: string]: MakeStylesStyle | string | 0; +}; +type MakeStylesCSSPseudos = { [Property in CSS.Pseudos]?: MakeStylesStrictCSSObject & { content?: string } }; + +export type MakeStylesAnimation = Record<'from' | 'to' | string, MakeStylesCSSObjectCustom>; +export type MakeStylesStyle = MakeStylesStrictCSSObject | MakeStylesCSSObjectCustom; -export type MakeStylesStyleFunctionRule = (tokens: Tokens) => MakeStyles; -export type MakeStylesStyleRule = MakeStyles | MakeStylesStyleFunctionRule; +export type MakeStylesStyleFunctionRule = (tokens: Tokens) => MakeStylesStyle; +export type MakeStylesStyleRule = MakeStylesStyle | MakeStylesStyleFunctionRule; export interface MakeStylesOptions { dir: 'ltr' | 'rtl'; renderer: MakeStylesRenderer; } -export type MakeStaticStyles = - | ({ - [key: string]: CSSProperties & - // TODO Questionable: how else would users target their own children? - Record; // eslint-disable-line @typescript-eslint/no-explicit-any - } & { - '@font-face'?: { - fontFamily: string; - src: string; - - fontFeatureSettings?: string; - fontStretch?: string; - fontStyle?: string; - fontVariant?: string; - fontVariationSettings?: string; - fontWeight?: number | string; - - unicodeRange?: string; - }; - }) - | string; +export type MakeStaticStylesStyle = { + [key: string]: CSS.Properties & + // TODO Questionable: how else would users target their own children? + Record; // eslint-disable-line @typescript-eslint/no-explicit-any +} & { + '@font-face'?: { + fontFamily: string; + src: string; + + fontFeatureSettings?: string; + fontStretch?: string; + fontStyle?: string; + fontVariant?: string; + fontVariationSettings?: string; + fontWeight?: number | string; + + unicodeRange?: string; + }; +}; +export type MakeStaticStyles = MakeStaticStylesStyle | string; export interface MakeStaticStylesOptions { renderer: MakeStylesRenderer; diff --git a/packages/react-make-styles/etc/react-make-styles.api.md b/packages/react-make-styles/etc/react-make-styles.api.md index 6e6097727f3d3e..359a451e9ae182 100644 --- a/packages/react-make-styles/etc/react-make-styles.api.md +++ b/packages/react-make-styles/etc/react-make-styles.api.md @@ -9,7 +9,9 @@ import type { CSSClassesMapBySlot } from '@fluentui/make-styles'; import type { CSSRulesByBucket } from '@fluentui/make-styles'; import type { MakeStaticStyles } from '@fluentui/make-styles'; import type { MakeStylesRenderer } from '@fluentui/make-styles'; -import type { MakeStylesStyleRule } from '@fluentui/make-styles'; +import { MakeStylesStyle } from '@fluentui/make-styles'; +import { MakeStylesStyleFunctionRule } from '@fluentui/make-styles'; +import { MakeStylesStyleRule } from '@fluentui/make-styles'; import { mergeClasses } from '@fluentui/make-styles'; import * as React_2 from 'react'; import { shorthands } from '@fluentui/make-styles'; @@ -26,6 +28,12 @@ export function makeStaticStyles(styles: MakeStaticStyles | MakeStati // @public (undocumented) export function makeStyles(stylesBySlots: Record>): () => Record; +export { MakeStylesStyle } + +export { MakeStylesStyleFunctionRule } + +export { MakeStylesStyleRule } + export { mergeClasses } // @public (undocumented) diff --git a/packages/react-make-styles/src/index.ts b/packages/react-make-styles/src/index.ts index ba258d9fd9ca49..48503da5de77b1 100644 --- a/packages/react-make-styles/src/index.ts +++ b/packages/react-make-styles/src/index.ts @@ -1,4 +1,5 @@ export { shorthands, mergeClasses, createDOMRenderer } from '@fluentui/make-styles'; +export type { MakeStylesStyle, MakeStylesStyleRule, MakeStylesStyleFunctionRule } from '@fluentui/make-styles'; export { makeStyles } from './makeStyles'; export { makeStaticStyles } from './makeStaticStyles'; @@ -8,5 +9,3 @@ export { renderToStyleElements } from './renderToStyleElements'; // Private exports, are used by build time transforms export { __styles } from './__styles'; - -// TODO: we should re-export some of types from "@fluentui/make-styles" once we will get update to TS4 diff --git a/packages/react-text/src/typographyStyles/typographyStyles.ts b/packages/react-text/src/typographyStyles/typographyStyles.ts index cd15d9f329471f..2f2bf242c04f1c 100644 --- a/packages/react-text/src/typographyStyles/typographyStyles.ts +++ b/packages/react-text/src/typographyStyles/typographyStyles.ts @@ -1,4 +1,4 @@ -import type { MakeStylesStyleFunctionRule } from '@fluentui/make-styles'; +import type { MakeStylesStyleFunctionRule } from '@fluentui/react-make-styles'; import type { Theme } from '@fluentui/react-theme'; /** From 36f7ce483272bcf1f710e725c127c621a75ac373 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 25 Nov 2021 16:00:43 +0100 Subject: [PATCH 2/9] fix type --- packages/react-tabster/src/hooks/useFocusIndicatorStyle.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-tabster/src/hooks/useFocusIndicatorStyle.ts b/packages/react-tabster/src/hooks/useFocusIndicatorStyle.ts index 6e1ac9be511c68..602bd8544145fa 100644 --- a/packages/react-tabster/src/hooks/useFocusIndicatorStyle.ts +++ b/packages/react-tabster/src/hooks/useFocusIndicatorStyle.ts @@ -1,5 +1,5 @@ import type { Theme } from '@fluentui/react-theme'; -import type { MakeStyles, MakeStylesStyleRule } from '@fluentui/make-styles'; +import type { MakeStylesStyle, MakeStylesStyleRule } from '@fluentui/make-styles'; import { KEYBOARD_NAV_SELECTOR } from '../symbols'; export type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>; @@ -72,7 +72,7 @@ export const createFocusOutlineStyle = ( options: { style: Partial; } & CreateFocusIndicatorStyleRuleOptions = { style: {}, ...defaultOptions }, -): MakeStyles => ({ +): MakeStylesStyle => ({ ':focus-visible': { outline: 'none', }, From 0097375aec64e23dd1264e5b3116bc13ca23f451 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 25 Nov 2021 16:01:46 +0100 Subject: [PATCH 3/9] Change files --- ...react-tabster-87f8b5ec-e885-4a6a-ad98-28e0296e33c3.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-tabster-87f8b5ec-e885-4a6a-ad98-28e0296e33c3.json diff --git a/change/@fluentui-react-tabster-87f8b5ec-e885-4a6a-ad98-28e0296e33c3.json b/change/@fluentui-react-tabster-87f8b5ec-e885-4a6a-ad98-28e0296e33c3.json new file mode 100644 index 00000000000000..2ef184e3dffc8a --- /dev/null +++ b/change/@fluentui-react-tabster-87f8b5ec-e885-4a6a-ad98-28e0296e33c3.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "use new types from makeStyles core", + "packageName": "@fluentui/react-tabster", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} From 9577177de4a25852b177e05fb8683194692b9678 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 25 Nov 2021 16:01:53 +0100 Subject: [PATCH 4/9] fix type --- packages/react-tabster/src/hooks/useFocusIndicatorStyle.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-tabster/src/hooks/useFocusIndicatorStyle.ts b/packages/react-tabster/src/hooks/useFocusIndicatorStyle.ts index 602bd8544145fa..acb56e2c94b4c1 100644 --- a/packages/react-tabster/src/hooks/useFocusIndicatorStyle.ts +++ b/packages/react-tabster/src/hooks/useFocusIndicatorStyle.ts @@ -1,5 +1,5 @@ import type { Theme } from '@fluentui/react-theme'; -import type { MakeStylesStyle, MakeStylesStyleRule } from '@fluentui/make-styles'; +import type { MakeStylesStyle, MakeStylesStyleRule } from '@fluentui/react-make-styles'; import { KEYBOARD_NAV_SELECTOR } from '../symbols'; export type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>; From be02a0cc7751d21e56959fd177609a33d360271e Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 25 Nov 2021 16:05:07 +0100 Subject: [PATCH 5/9] fix type --- packages/react-tabster/etc/react-tabster.api.md | 6 +++--- packages/react-tabster/package.json | 1 - 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/react-tabster/etc/react-tabster.api.md b/packages/react-tabster/etc/react-tabster.api.md index 1193b71ade8fd4..ed07075871600a 100644 --- a/packages/react-tabster/etc/react-tabster.api.md +++ b/packages/react-tabster/etc/react-tabster.api.md @@ -4,8 +4,8 @@ ```ts -import type { MakeStyles } from '@fluentui/make-styles'; -import type { MakeStylesStyleRule } from '@fluentui/make-styles'; +import type { MakeStylesStyle } from '@fluentui/react-make-styles'; +import type { MakeStylesStyleRule } from '@fluentui/react-make-styles'; import type { RefObject } from 'react'; import type { Theme } from '@fluentui/react-theme'; import { Types } from 'tabster'; @@ -22,7 +22,7 @@ export interface CreateFocusIndicatorStyleRuleOptions { // @public export const createFocusOutlineStyle: (theme: Theme, options?: { style: Partial; -} & CreateFocusIndicatorStyleRuleOptions) => MakeStyles; +} & CreateFocusIndicatorStyleRuleOptions) => MakeStylesStyle; // @public (undocumented) export type FocusOutlineOffset = Record<'top' | 'bottom' | 'left' | 'right', string>; diff --git a/packages/react-tabster/package.json b/packages/react-tabster/package.json index b7f55c84cce15b..91f9ba746c5730 100644 --- a/packages/react-tabster/package.json +++ b/packages/react-tabster/package.json @@ -36,7 +36,6 @@ "@fluentui/babel-make-styles": "9.0.0-beta.4" }, "dependencies": { - "@fluentui/make-styles": "9.0.0-beta.3", "@fluentui/react-make-styles": "9.0.0-beta.4", "@fluentui/react-shared-contexts": "9.0.0-beta.4", "@fluentui/react-utilities": "9.0.0-beta.4", From afef195f99b3ee9ae20d9a148f68c126383e9a5b Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 25 Nov 2021 16:12:39 +0100 Subject: [PATCH 6/9] fix type --- packages/react-positioning/src/createArrowStyles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-positioning/src/createArrowStyles.ts b/packages/react-positioning/src/createArrowStyles.ts index 059cae0ccc4d9a..ec5ecbaf8cb7c4 100644 --- a/packages/react-positioning/src/createArrowStyles.ts +++ b/packages/react-positioning/src/createArrowStyles.ts @@ -1,4 +1,4 @@ -import type { MakeStylesStyleRule } from '@fluentui/make-styles'; +import type { MakeStylesStyleRule } from '@fluentui/react-make-styles'; import type { Theme } from '@fluentui/react-theme'; /** @@ -40,7 +40,7 @@ export function createArrowStyles(size?: number): MakeStylesStyleRule { zIndex: -1, ...(size && { - aspectRatio: 1, + aspectRatio: '1', width: `${size}px`, }), From 507f4c8c6e7f8ee7cdc59dfe5f5f7c44ff599ce7 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 25 Nov 2021 16:13:00 +0100 Subject: [PATCH 7/9] Change files --- ...t-positioning-0866793c-b9cd-42ff-833e-33fddc7eb07b.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-positioning-0866793c-b9cd-42ff-833e-33fddc7eb07b.json diff --git a/change/@fluentui-react-positioning-0866793c-b9cd-42ff-833e-33fddc7eb07b.json b/change/@fluentui-react-positioning-0866793c-b9cd-42ff-833e-33fddc7eb07b.json new file mode 100644 index 00000000000000..f54efa98d337f5 --- /dev/null +++ b/change/@fluentui-react-positioning-0866793c-b9cd-42ff-833e-33fddc7eb07b.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "use new types from makeStyles core", + "packageName": "@fluentui/react-positioning", + "email": "olfedias@microsoft.com", + "dependentChangeType": "patch" +} From 99a01db2b03cca95b0760811f7badbf5b6a16c7b Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 25 Nov 2021 16:39:31 +0100 Subject: [PATCH 8/9] fix typos, API file --- packages/react-positioning/etc/react-positioning.api.md | 2 +- packages/react-positioning/src/createArrowStyles.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-positioning/etc/react-positioning.api.md b/packages/react-positioning/etc/react-positioning.api.md index aa15d5a2ee2457..07a84787400e9e 100644 --- a/packages/react-positioning/etc/react-positioning.api.md +++ b/packages/react-positioning/etc/react-positioning.api.md @@ -4,7 +4,7 @@ ```ts -import type { MakeStylesStyleRule } from '@fluentui/make-styles'; +import type { MakeStylesStyleRule } from '@fluentui/react-make-styles'; import * as PopperJs from '@popperjs/core'; import * as React_2 from 'react'; import type { Theme } from '@fluentui/react-theme'; diff --git a/packages/react-positioning/src/createArrowStyles.ts b/packages/react-positioning/src/createArrowStyles.ts index ec5ecbaf8cb7c4..6c194921c596ca 100644 --- a/packages/react-positioning/src/createArrowStyles.ts +++ b/packages/react-positioning/src/createArrowStyles.ts @@ -15,8 +15,8 @@ import type { Theme } from '@fluentui/react-theme'; * }) * ... * - * state.arrowWithSize.clasName = styles.arrowWithSize - * state.arrowWithoutSize.className = mergeClases( + * state.arrowWithSize.className = styles.arrowWithSize + * state.arrowWithoutSize.className = mergeClasses( * styles.arrowWithoutSize, * state.smallArrow && styles.smallArrow, * state.mediumArrow && styles.mediumArrow, From 38dec8430d2a9474d892f84e4b31e8f88a355671 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 25 Nov 2021 16:50:00 +0100 Subject: [PATCH 9/9] fix expand --- packages/make-styles/src/runtime/expandShorthand.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/make-styles/src/runtime/expandShorthand.ts b/packages/make-styles/src/runtime/expandShorthand.ts index 8222d91fee03a4..c454a756929642 100644 --- a/packages/make-styles/src/runtime/expandShorthand.ts +++ b/packages/make-styles/src/runtime/expandShorthand.ts @@ -21,6 +21,8 @@ export function expandShorthand(style: MakeStylesStyle, result: MakeStylesStyle // eslint-disable-next-line eqeqeq } else if (value == null) { // should skip + } else if (Array.isArray(value)) { + result[property as 'animationName'] = value; } else if (typeof value === 'object') { result[property as keyof MakeStylesStyle] = expandShorthand(value as MakeStylesStyle); }