149 lines
3.9 KiB
Markdown
149 lines
3.9 KiB
Markdown
## postcss-helpers [](https://travis-ci.org/iAdramelk/postcss-helpers)
|
||
|
||
> Some general purpose helpers for PostCSS, created to make working with url() and @import values more easy. Can be used without PostCSS.
|
||
|
||
### Getting Started
|
||
|
||
|
||
```shell
|
||
npm install postcss-helpers
|
||
```
|
||
|
||
|
||
### Helpers
|
||
|
||
#### #createUrlsHelper( rule )
|
||
|
||
Returns new UrlsHelper object from the rule string with one or more url() (see description below).
|
||
|
||
#### #createImportHelper( rule )
|
||
|
||
Returns new ImportHelper object from the @import value string (see description below).
|
||
|
||
|
||
### new UrlsHelper( rule )
|
||
|
||
Object for manipulating values of rules with one or multiple url().
|
||
|
||
#### #getOriginalRule
|
||
|
||
Returns original rule that it was created with.
|
||
|
||
#### #getOriginalURIS
|
||
|
||
Returns Array of all original URI in string. NOT mutated URIs.
|
||
|
||
#### #URIS
|
||
|
||
Array of one or more [urijs](http://medialize.github.io/URI.js/) objects that can be used for URI manipulations. If there is no url() in the rule returns false.
|
||
|
||
For example you can use UrlsHelper.URIS[0].href() to get value for the first url() and UrlsHelper.URIS[0].href('new_uri') to set new URI value. See [full documentation](http://medialize.github.io/URI.js/docs.html).
|
||
|
||
#### #getModifiedRule
|
||
|
||
After you finished changing values of the URIS you can get modified rule text with this command.
|
||
|
||
|
||
### new ImportHelper( rule )
|
||
|
||
Object for manipulating values of @import at-rules.
|
||
|
||
#### #getOriginalRule
|
||
|
||
Returns original rule that it was created with.
|
||
|
||
#### #getOriginalURI
|
||
|
||
Returns original URI from string. NOT mutated URI.
|
||
|
||
#### #URI
|
||
|
||
[urijs](http://medialize.github.io/URI.js/) objects that can be used for URI manipulations. If there is no url() in the rule returns false.
|
||
|
||
For example you can use ImportHelper.URI.href() to get import value and ImportHelper.URI.href('new_uri') to set new URI value. See [full documentation](http://medialize.github.io/URI.js/docs.html).
|
||
|
||
#### #getModifiedRule
|
||
|
||
After you finished changing values of the URI you can get modified rule text with this command.
|
||
|
||
#### #getOriginalMediaQuery
|
||
|
||
Returns media query from original string.
|
||
|
||
#### #setMediaQuery( query )
|
||
|
||
Replace old media query or creates new one.
|
||
|
||
#### #getMediaQuery
|
||
|
||
Returns current media query from string.
|
||
|
||
|
||
### Other
|
||
|
||
#### #regexp
|
||
|
||
Collection of some useful RegExps based on CSS specification grammar rules: http://www.w3.org/TR/CSS21/grammar.html
|
||
|
||
- STRINGS – RegExp for css <string> with 'ig' flags.
|
||
- URLS – RegExp for css <uri> with 'ig' flags.
|
||
|
||
|
||
### Examples
|
||
|
||
Modify string with multiple url() fragments:
|
||
|
||
```javascript
|
||
var helpers = require( 'postcss-helpers' );
|
||
|
||
var rule = 'url(logo1.png)', url( 'logo2.png' ), url( "logo3.png");
|
||
|
||
var helper = helpers.createUrlsHelper( rule );
|
||
|
||
helper.URIS.forEach( function( uri ) {
|
||
uri.suffix( 'jpeg' );
|
||
} );
|
||
|
||
var modifiedRule = helper.getModifiedRule(); // url(logo1.jpeg)', url( 'logo2.jpeg' ), url( "logo3.jpeg")
|
||
```
|
||
|
||
Modify @import value:
|
||
|
||
```javascript
|
||
var helpers = require( 'postcss-helpers' );
|
||
|
||
var rule = '"src/print.css" print';
|
||
|
||
var helper = helpers.createImportHelper( rule );
|
||
|
||
helper.URI.directory( 'dist' );
|
||
helper.getMediaQuery(); // print
|
||
helper.setMediaQuery( 'screen' );
|
||
|
||
var modifiedRule = helper.getModifiedRule(); // "dist/print.css" screen
|
||
```
|
||
|
||
Test if string contains url() fragments:
|
||
|
||
```javascript
|
||
var helpers = require( 'postcss-helpers' );
|
||
|
||
var rule = 'url(logo1.png)', url( 'logo2.png' ), url( "logo3.png");
|
||
|
||
helpers.regexp.URIS.test( rule ); // true
|
||
```
|
||
|
||
|
||
### Known problems
|
||
|
||
UrlsHelper() and ImportHelper() will not escape quotes in the new URI values so escape them yourself.
|
||
|
||
|
||
### Release History
|
||
|
||
See [CHANGELOG](/CHANGELOG) for detailed changes.
|
||
|
||
* 2014-08-08 0.1.0 Initial release.
|
||
* 2014-08-11 0.1.1 Make RegExps public. Fixed ?#iefix bug.
|
||
* 2014-08-12 0.2.0 Added methods for getting original url() values and for media query manipulations.
|