# postcss-helpers

> Some general purpose helpers for PostCSS, created to make working with url() and @import values more easy.

Latest version **0.3.3** (published 2023-05-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install postcss-helpers
pnpm add postcss-helpers
yarn add postcss-helpers
bun add postcss-helpers
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 0.3.3 |
| Published | 2023-05-18 |
| First published | 2014-08-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=0.12.9 |
| Dependencies | 1 |
| Unpacked size | 23.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Maintainers | iadramelk |
| Keywords | postcss |

## Links

- npm: https://www.npmjs.com/package/postcss-helpers
- Repository: https://github.com/iAdramelk/postcss-helpers
- Homepage: https://github.com/iAdramelk/postcss-helpers#readme
- Issues: https://github.com/iAdramelk/postcss-helpers/issues
- npm.io page: https://npm.io/package/postcss-helpers

## Dependencies (1)

- [urijs](https://npm.io/package/urijs.md) ^1.18.12

## Recent versions

- 0.3.3 (latest) — 2023-05-18
- 0.3.2 — 2017-08-30
- 0.3.1 — 2015-12-20
- 0.3.0 — 2015-12-20
- 0.2.0 — 2014-08-13

## README

## postcss-helpers [![Build Status](https://secure.travis-ci.org/iAdramelk/postcss-helpers.png)](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.

---
_Source: https://npm.io/package/postcss-helpers · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._