https://github.com/johno/rework-image-set

Rework CSS plugin to add future-proofed support for W3C-style image-set notation.
https://github.com/johno/rework-image-set

Last synced: 9 days ago
JSON representation

Rework CSS plugin to add future-proofed support for W3C-style image-set notation.

• Host: GitHub
• URL: https://github.com/johno/rework-image-set
• Owner: johno
• License: mit
• Created: 2014-11-04T17:30:57.000Z (about 10 years ago)
• Default Branch: master
• Last Pushed: 2015-10-17T18:21:22.000Z (over 9 years ago)
• Last Synced: 2024-10-19T17:31:20.877Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 195 KB
• Stars: 0
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# rework-image-set [![Build Status](https://travis-ci.org/johnotander/rework-image-set.svg?branch=master)](https://travis-ci.org/johnotander/rework-image-set) [![js-standard-style](https://img.shields.io/badge/code%20style-standard-brightgreen.svg?style=flat)](https://github.com/feross/standard)

[Rework](https://github.com/reworkcss/rework) plugin to add future-proofed support for

[W3C-style image set](http://www.w3.org/TR/css4-images/) notation. This provides a `backround-image`

fallback for browsers that don't support `image-set`.

## Installation

```

npm install --save rework-image-set

```

## Usage

```javascript

var fs = require('fs')

var rework = require('rework')

var imageSet = require('rework-image-set')

var css = fs.readFileSync('css/my-file.css', 'utf8').toString()

var out = rework(css).use(imageSet()).toString()

```

### Input

```css

.bg-img {

  background-image: image-set('my-img.png' 1x,

                              'my-img-2x.png' 2x,

                              'my-img-print.png' 600dpi);

}

```

### Output

```css

.bg-img {

  background-image: url('my-img.png');

  background-image: image-set('my-img.png' 1x,

                              'my-img-2x.png' 2x,

                              'my-img-print.png' 600dpi);

}

```

_Note:_ This functionality currently requires CSS prefixing, it's recommended to use

[autoprefixer](https://github.com/postcss/autoprefixer).

## License

MIT

## Contributing

1. Fork it

2. Create your feature branch (`git checkout -b my-new-feature`)

3. Commit your changes (`git commit -am 'Add some feature'`)

4. Push to the branch (`git push origin my-new-feature`)

5. Create new Pull Request

Crafted with <3 by [John Otander](http://johnotander.com) ([@4lpine](https://twitter.com/4lpine)).