postcss-assets-rebase

PostCSS plugin to rebase assets used in project

Copies all assets used in .css to specified folder and rebases all paths.

Features:

• absolute/relative rebasing path
• saving/flattening assets folder structure
• assets renaming in case of duplication

If you have any questions of think that some additional options are needed – feel free to create an issue.

Installation

1$ npm install postcss-assets-rebase

Usage

Plugin throws warnings when asset can't be found or duplicate is renamed. Warnings are thrown using postcss.messages. To output warnings in console you can use postcss-reporter.

1// dependencies
2var fs = require("fs")
3var postcss = require("postcss")
4var rebaser = require("postcss-assets-rebase")
5var reporter = require('postcss-reporter');
6
7// css to be processed
8var css = fs.readFileSync("input.css", "utf8")
9
10// process css
11postcss()
12  .use(rebaser({
13    assetsPath: "assets/imported", // new path for all assets
14    relative: true // is assetsPath relative to .css position.
15                   //By default its relative to process.cwd()
16  }))
17  .use(reporter)
18  .process(css, {
19    from: "src/stylesheet/index.css"
20    to: "dist/index.css"
21  })
22  .then(function (result) {
23    var output = result.css;
24  });

Input src/stylesheet/index.css:

1body {
2  background: url("../../assets/img.jpg");
3  background: url(another-assets/another-img.jpg);
4  background: url("../../assets/not-existing-image.jpg");
5  background: url("http://goo.gl/VR2dL6");
6}

Output

1body {
2  background: url(assets/imported/img.jpg);
3  background: url(assets/imported/another-img.jpg);
4  background: url(../../assets/not-existing-image.jpg);
5  background: url(http://goo.gl/VR2dL6);
6}

|-- dist
    |-- index.css
    |-- assets
        |-- imported
            |-- another-img.jpg
            |-- img.jpg
 

Checkout tests for more usage examples.

Options

assetsPath (required)

Type: String

Path to place assets to

relative (optional)

Type: Boolean
Default: False

Is assetsPath relative to .css position. By default its relative to process.cwd()

keepStructure (optional)

Type: Boolean Default: False

To keep folder structure or not. By default all assets paths are collected flatly in assetsPath folder. If you set this flag to true, folder structure relative to process.cwd() would be saved.

So then example above would generate following files:

|-- dist
    |-- index.css
    |-- assets
        |-- imported
          |-- assets
              |-- img.jpg
          |-- src
              |-- stylesheet
                  |-- another-assets
                      |-- another-img.jpg

renameDuplicates (optional)

Type: Boolean
Default: False

If there are assets with different paths but same name, they would be renamed using name_% pattern.

By default only first asset would be copied.

License

Changelog