material-motion-js icon indicating copy to clipboard operation
material-motion-js copied to clipboard

Make combineStyleStreams accept streams of arbitrary CSS

Open appsforartists opened this issue 6 years ago • 1 comments

StyleStreams is currently a whitelist of values that combineStyleStreams can transform into CSS rules. Thus, even though combineStyleStreams will pass through streams of standard CSS rules, TypeScript will reject them:

pointerEvents$ does not exist in type "Partial<StyleStreams>"

Fixing this probably involves falling back to csstype, and either removing the $ suffices from stream arguments, or writing a script that generates rule$: Observable<typeof rule> for every rule in csstype.

appsforartists avatar Nov 26 '18 18:11 appsforartists

combineStyleStreams was using csstype in its internals, which caused a conflict for transformOrigin. I worked around it using Exclude, but that's not until TS2.8, and there are other changes that needs to happen before we can upgrade.

Archiving what I had here:

/**
 * The types that `combineStyleStreams` can convert to CSS rules.
 */
export type PrimitiveStyleDict = {
  opacity: number,
  translate: Partial<Point2D>,
  rotate: number,
  scale: number,
  transformOrigin: Partial<Point2D>,
  dimensions: Partial<Dimensions>,
};

/**
 * The CSS rules that aren't explicitly handled by `combineStyleStreams`.  They
 * will be passed through unchanged.
 */
export type PropertiesFallback = {
  [K in Exclude<keyof CSS.Properties, keyof PrimitiveStyleDict>]: CSS.Properties[K]
}

export type StyleDict = Partial<PrimitiveStyleDict> & PropertiesFallback;

appsforartists avatar Nov 26 '18 18:11 appsforartists