https://github.com/email-types/stylis-plugin-mso
A Stylis plugin that adds support for the `mso-` CSS vendor prefix
https://github.com/email-types/stylis-plugin-mso
Last synced: 8 months ago
JSON representation
A Stylis plugin that adds support for the `mso-` CSS vendor prefix
- Host: GitHub
- URL: https://github.com/email-types/stylis-plugin-mso
- Owner: email-types
- Created: 2019-12-01T03:13:53.000Z (over 6 years ago)
- Default Branch: canary
- Last Pushed: 2019-12-23T07:24:06.000Z (over 6 years ago)
- Last Synced: 2025-09-03T14:45:15.274Z (10 months ago)
- Language: TypeScript
- Size: 25.4 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
[emotion]: https://github.com/emotion-js/emotion
[stylis]: https://github.com/thysultan/stylis.js
[msotype]:
https://github.com/email-types/email-types/tree/master/packages/msotype
# MSO Stylis Plugin
A [Stylis][stylis] plugin that adds support for the `mso-` CSS vendor prefix. It
automatically adds the `mso-` prefix and `-alt` postfix for all Microsoft Office
alternative CSS properties (see [msotype][msotype]). It also prevents a leading
`-` from being added. So you'll get `mso-` instead of `-mso-`.
[](https://www.npmjs.com/package/stylis-plugin-mso)
[](https://codecov.io/gh/email-types/stylis-plugin-mso)
[](https://bundlephobia.com/result?p=stylis-plugin-mso)
[](https://bundlephobia.com/result?p=stylis-plugin-mso)
Install with yarn
```sh
yarn add stylis-plugin-mso
```
Or install with npm:
```sh
npm install stylis-plugin-mso
```
## Using with Stylis
```ts
import stylis from 'stylis';
import plugin from 'stylis-plugin-mso';
stylis.use(plugin);
stylis('.foobar', `{ color: tomato; }`);
// => .foobar { mso-color-alt:tomato; color:tomato; }
```
## Using with EmotionJs
To use with [EmotionJs][emotion], you'll need to add a ``. Note
that when multiple `` are used, all of your styles will be
parsed twice. So make sure to add this at the top of your app. See more at
[@emotion/cache](https://github.com/emotion-js/emotion/tree/master/packages/cache).
```tsx
import { CacheProvider } from '@emotion/core';
import plugin from 'stylis-plugin-mso';
const cache = createCache({
stylisPlugins: [plugin],
});
const App = () => (
);
```
## Automatic Vendor Prefix
By default, the `mso-` prefix and `-alt` postfix are automatically applied to
all Microsoft Office alternative CSS properties. You can disable this by
creating an instance of the plugin and setting the `prefix` option to `false`.
```ts
import stylis from 'stylis';
import { createPlugin } from 'stylis-plugin-mso';
const plugin = createPlugin({ prefix: false });
stylis.set({ prefix: false });
stylis.use(plugin);
stylis('.foobar', `{ color: tomato; }`);
// => .foobar { color:tomato; }
```
## API
### createPlugin
```tsx
createPlugin(options?: object): StylisPlugin
```
**options**
- `prefix?: boolean`: Toggles automatic `mso` vendor prefixing. Default: `true`.