TODO: Figure out why skipLibCheck is needed to resolve correct imported 3rd party alias types

[JoshRosenstein]

Using @styleaux/tools boxshadow as example:

tsconfig

{
  "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"],
}

@styleaux/tools/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(',')
  }

)

With SkipLibcheck:FALSE

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;
};

With SkipLibcheck:true

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

BoxShadowProperty AnimationNameProperty in @styleaux/csstype

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;

[JoshRosenstein]

follow issue here