Open JoshRosenstein opened 5 years ago
Using @styleaux/tools boxshadow as example:
{ "compilerOptions": { "module": "commonjs", "moduleResolution": "node", "strict": true, "target": "es5", "declaration": true, "declarationDir": "dist-debug/", "skipLibCheck": true, /// Needs to be true to fix wrong alias types being used }, "files": ["src/boxShadow.ts"], }
import {ColorProperty,BoxShadowProperty} from '@styleaux/csstype' import {arrayWrapper} from './arrayWrapper' import {isDefined} from 'typed-is' export interface BoxShadowOptions { inset?: boolean offsetX: string | 0 offsetY: string | 0 blurRadius?: string | 0 spreadRadius?: string | 0 color?: ColorProperty } export const boxShadow = arrayWrapper( function shadowInner( ...shadows: BoxShadowOptions[] ): BoxShadowProperty { return shadows .map(shadow => { return [ shadow.inset && 'inset', shadow.offsetX, shadow.offsetY, shadow.blurRadius, shadow.spreadRadius, shadow.color, ] .filter(isDefined) .join(' ') }) .filter(s => s !== '') .join(',') } )
import { ColorProperty } from '@styleaux/csstype'; export interface BoxShadowOptions { inset?: boolean offsetX: string | 0 offsetY: string | 0 blurRadius?: string | 0 spreadRadius?: string | 0 color?: ColorProperty } export declare const boxShadow: { (...values: BoxShadowOptions[]): import("@styleaux/csstype").AnimationNameProperty; (values: BoxShadowOptions[]): import("@styleaux/csstype").AnimationNameProperty; };
import { ColorProperty, BoxShadowProperty } from '@styleaux/csstype'; export interface BoxShadowOptions { inset?: boolean offsetX: string | 0 offsetY: string | 0 blurRadius?: string | 0 spreadRadius?: string | 0 color?: ColorProperty } export declare const boxShadow: { (...values: BoxShadowOptions[]): BoxShadowProperty; (values: BoxShadowOptions[]): BoxShadowProperty; };
BoxShadowProperty & AnimationNameProperty do have the same types- so there wont be any error thrown, however the jsdoc comments become misleading
export type Globals = "-moz-initial" | "inherit" | "initial" | "revert" | "unset"; export type StringHack = string & { zz_IGNORE_ME?: never }; /** * The **`animation-name`** CSS property sets one or more animations to apply to an element. Each name is an `@keyframes` at-rule that sets the property values for the animation sequence. * * **Initial value**: `none` * * | Chrome | Firefox | Safari | Edge | IE | * | :----: | :-----: | :---------: | :----: | :----: | * | **43** | **16** | **4** _-x-_ | **12** | **10** | * | | 5 _-x-_ | | | | * * @see https://developer.mozilla.org/docs/Web/CSS/animation-name */ export type AnimationNameProperty = Globals | "none" | StringHack; /** * The **`box-shadow`** CSS property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color. * * **Initial value**: `none` * * | Chrome | Firefox | Safari | Edge | IE | * | :-----: | :-----: | :-----: | :----: | :---: | * | **10** | **4** | **5.1** | **12** | **9** | * | 1 _-x-_ | | 3 _-x-_ | | | * * @see https://developer.mozilla.org/docs/Web/CSS/box-shadow */ export type BoxShadowProperty = Globals | "none" | StringHack;
follow issue here
Using @styleaux/tools boxshadow as example:
tsconfig
@styleaux/tools/src/boxShadow.ts
With SkipLibcheck:FALSE
With SkipLibcheck:true
BoxShadowProperty & AnimationNameProperty do have the same types- so there wont be any error thrown, however the jsdoc comments become misleading
BoxShadowProperty AnimationNameProperty in @styleaux/csstype