https://github.com/celiolatorraca/autoprefixer-tv

PostCSS plugin to split only duplicated prefixed property declarations into multiple rules.
https://github.com/celiolatorraca/autoprefixer-tv

postcss postcss-plugin react-tv webos

Last synced: about 1 month ago
JSON representation

PostCSS plugin to split only duplicated prefixed property declarations into multiple rules.

• Host: GitHub
• URL: https://github.com/celiolatorraca/autoprefixer-tv
• Owner: celiolatorraca
• License: mit
• Created: 2018-01-09T16:52:24.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-11-05T23:45:14.000Z (about 6 years ago)
• Last Synced: 2024-11-08T19:20:03.422Z (about 2 months ago)
• Topics: postcss, postcss-plugin, react-tv, webos
• Language: JavaScript
• Size: 29.3 KB
• Stars: 11
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PostCSS Autoprefixer Tv [![Build Status][ci-img]][ci]

[PostCSS] plugin to split **only** duplicated prefixed property declarations into multiple rules.

## Why should I use this plugin?

Some of the TV manufacturers use custom webkit distributions as the engine in their applications.

Especially the WebOS TVs. The webpack distribution they use has a bug that invalidates the overwriting declarations in a same CSS definition.

So, as you can see in the example below, the property `display: flex` invalidates the previous one (`display: -webkit-flex`) which is accepted by this distribution.

This is an example of the splitting this plugin is intended to do:

Before:

```css

.foo {

    display: -webkit-flex;

    display: flex;

    color: red;

    height: 50px;

    height: 100px;

}

```

After:

```css

.foo {

    display: -webkit-flex;

}

.foo {

    display: flex;

    color: red;

    height: 50px;

    height: 100px;

}

```

## Usage

```js

postcss([ require('autoprefixer-tv') ])

```

### [PostCSS] - [Autoprefixer]

You can use this plugin separately, but it is well integrated with [Autoprefixer] plugin. You just need to require it after the `autoprefixer` postcss plugin.

```js

postcss([ require('autoprefixer'), require('autoprefixer-tv') ])

```

[PostCSS]: https://github.com/postcss/postcss

[Autoprefixer]: https://github.com/postcss/autoprefixer

[ci-img]:  https://circleci.com/gh/celiolatorraca/autoprefixer-tv.svg?style=svg

[ci]:      https://circleci.com/gh/celiolatorraca/autoprefixer-tv