Search code examples
office-ui-fabric

Merge styles - How to use vendor prefixes


I'm using this library @uifabric/merge-styles from office-ui-fabric. My question is how to use vendor prefixes inside mergeStyleSets?

Example -webkit-filter:

import { mergeStyleSets } from '@uifabric/merge-styles'

mergeStyleSets({ 
  webkitFilter: 'blur(5px)', // Error! No Typescript definition.
})

Is there any other way to achieve this?

Merge Styles Library

It looks like there is no Typescript definitions for it IRawStyleBase.ts

Addition to @Vitalie Braga answer:

This is temporary solution if you are using Typescript project:

const foo = mergeStyleSets({
  root: [
    {
      backgroundColor: '#f00',
      ...({ '-webkit-filter': 'blur(5px)' } as any)
    },
  ]
})

Issues Page - Git OFFICE UI FABRIC


Solution

  • @uifabric/merge-styles library has smarts about automatic vendor prefixing for you but the only issue with that is that the rules that are auto-prefixed today are limited to just one: user-select. I would advise you go and submit an issue in their github repo here and either ask if new rules can be added or ask how to handle this situation.

    From a deeper investigation looks like they have some vendor specific support but is very limited in IRawStyleBase.ts. Those rules will automatically be transformed into vendor rules.

    So to answer your questions if you are using a TS project there is no way you can specify something that is not compatible with the IRawStyleBase interface but if you are using a js script you can probably try your luck as I did in this code-sandbox and it looks like the filter get's through but nothing else.