shutterstock / postcss-copy-assets Goto Github PK

PostCSS plugin to copy assets referenced by relative url()s into a build directory.

License: MIT License

JavaScript 100.00%

postcss-copy-assets's Introduction

PostCSS Copy Assets

PostCSS plugin to copy assets referenced by relative url()s into a build directory, while keeping their sub-directory hierarchy.

Installation

$ npm install postcss-copy-assets

Example

Usage

var copyAssets = require('postcss-copy-assets');
postcss(
    [
        copyAssets({ base: 'dist'})
    ],
    {
        to: 'dist/css/foo.css'
    }
);

Input

/* src/css/page/home.css */
.icon {
    background: url("../../images/icons/icon.jpg");
}
@font-face {
    src: url("../../fonts/sans.woff") format("woff"), url("../../fonts/sans.ttf") format("truetype");
}

src/
|-- css/
|   `-- page/
|       `-- home.css
|-- images/
|   `-- icons/
|       `-- icon.jpg
`-- fonts/
    |-- sans.woff
    `-- sans.ttf

Output

/* dist/css/home.min.css */
.icon {
    background: url("../images/icons/icon.jpg");
}
@font-face {
    src: url("../fonts/sans.woff") format("woff"), url("../fonts/sans.ttf") format("truetype");
}

dist/
|-- css/
|   `-- home.min.css
|-- images/
|   `-- icons/
|       `-- icon.jpg
`-- fonts/
    |-- sans.woff
    `-- sans.ttf

Options

Plugin options

`base`

Type: string
Default: PostCSS to option

Optional base path where the plugin will copy images, fonts, and other assets it finds in CSS url() declarations. Only url() declarations with relative paths are processed. Each asset's sub-directory hierarchy will be maintained under the base path. Basically, sub-directories after the last ../ in the path will be kept (or the whole path if no ../ exists). For example, if the plugin is called with { base: 'dist' }, the image referred to by url("../../images/icons/icon.jpg") will be copied to dist/images/icons/icon.jpg.

By using a single base path, a build pipeline can output several built CSS files (each with its own PostCSS to destination) while organizing all their assets under one directory (e.g. under dist/ in dist/images/, dist/fonts/, etc.).

If base is not specified assets will be copied by default to the base directory given to the PostCSS to option while still maintaining the assets' sub-directory hierarchy. For example, if PostCSS is told to ouput to dist/css/foo.css and base is not specified the image referred to by url("../../images/icons/icon.jpg") will be copied to dist/css/images/icons/icon.jpg.

`pathTransform`

Type: function
Default: undefined

Optional function that returns a transformed absolute filesystem path to an asset file. Useful for adding revision hashes to filenames for cachebusting (e.g. image-a7f234e8d4.jpg), or handling special cases. The function is expected to be of the form given below:

/**
 * Transforms the paths to which asset files will be copied
 *
 * @param {string} newPath - Absolute filesystem path to which asset would be copied by default
 * @param {string} origPath - Absolute filesystem path to original asset file
 * @param {object} contents - Buffer containing asset file contents
 * @returns {string} - Transformed absolute filesystem path to which asset will be copied
 */
pathTransform: function(newPath, origPath, contents) {
    // ... transform newPath ...
    return newPath;
}

PostCSS options

`to`

This plugin requires the to option to be passed to postcss itself. This specifies where the transformed CSS will be written to.

var copyAssets = require('postcss-copy-assets');
postcss(
    [
        copyAssets({ base: 'base/dir/to/copy/assets'})
    ],
    {
        to: 'path/to/transformed/file.css'
    }
);

See PostCSS docs for examples for your environment.

License

postcss-copy-assets's People

Contributors

Stargazers

Watchers

Forkers

kvnneff jerexyz soubok alexmchardy osdevisnot

postcss-copy-assets's Issues

The problem with the calculation of the path to the fonts

I have a problem with file paths.

Gulp task:

gulp.task("css", function () {
    let src = ["bower_components/bootswatch/united/bootstrap.css"];
    gulp.src(src)
        .pipe(postcss([copyAssets({ base: "public/build" })], { to: "public/build/css/all.css" }))
        .pipe(concatCss("all.css"))
        .pipe(gulp.dest("public/build/css"));
});

At the entrance to the file:

bower_components/bootswatch/united/bootstrap.css:

@font-face {
    src: url('../fonts/glyphicons-halflings-regular.eot');
}

The output is a file with an error (wrong path):

public/build/all.css:

@font-face {
    src: url("../../bootswatch/fonts/glyphicons-halflings-regular.eot");
}

And here I should get the file:

@font-face {
    src: url("../../fonts/glyphicons-halflings-regular.eot");
}

How do I configure a task so that the path to the font correctly calculated?

Paths should always have the format url(../folder1/folder2)

Hello!

I have encountered a mission critical error with your PostCSS Plugin.
Because of your use of path.relative, the path that results from your plugin in my css-files under windows is something like: url('folder1\folder2') which is not allowed, neither working in CSS-Files. The correct syntax, under any circumstance, would be: url('folder1/folder2')

I hope that you can reproduce this, and to hear a reponse from you.

replace css file

Hello,
I wondering why you do not allow to process-and-overwrite the source file :
postCssOpts.to === postCssOpts.from (index.js#168)
In my build process, the source file is already copied in a dest directory and I want to use postcss-copy-assets on the latter.

Error using Webpack - relative modules were not found

I cannot understand how to setup postcss-copy-assets inside webpack config file to make it work.

In my app.css I have @import 'lightgallery.js'; which imports plugin css from node_modules.
But after npm run dev I got errors that relative modules were not found.

98% after emitting SizeLimitsPlugin

 ERROR  Failed to compile with 7 errors                               8:33:23 PM

These relative modules were not found:

* ../fonts/lg.svg?22t19m in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../fonts/lg.ttf?22t19m in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../fonts/lg.woff?22t19m in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../img/loading.gif in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../img/video-play.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../img/vimeo-play.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
* ../img/youtube-play.png in ./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css
     Asset     Size   Chunks             Chunk Names
/js/app.js  730 KiB  /js/app  [emitted]  /js/app

WARNING in ./resources/css/app.css (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./resources/css/app.css)
Module Warning (from ./node_modules/postcss-loader/src/index.js):
Warning

postcss-copy-assets requires postcss "to" option.
 @ ./resources/css/app.css 2:14-142

Here is my webpack

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
   .scripts([
    	  'public/js/app.js',
    	  'resources/js/includes/script.js'
	  ],  'public/js/app.js')
   .postCss('resources/css/app.css', 'public/css', [
      require('postcss-import'), 
      require('postcss-copy-assets') 
        (
          [copyAssets({ base: 'public'})],
          {to: 'public/css/app.css'}
        ),
      require('tailwindcss'),
      require('postcss-extend'), 
      require('postcss-nested'),
      require('autoprefixer'),
    ]);

in resources/css/app.css I have string @import 'lightgallery.js'; which gives me this error.
Lightgallery.js should be imported from \node_modules\lightgallery.js\dist\css\lightgallery.css

Inside lightgallery.css there are urls like that

src: url("../fonts/lg.ttf?22t19m") format("truetype"), url("../fonts/lg.woff?22t19m") format("woff"), url("../fonts/lg.svg?22t19m#lg") format("svg");
background: url("../img/vimeo-play.png") no-repeat scroll 0 -58px transparent;

url() path separator should be system agnostic

Hello,
on windows, the following url() path:
url("../src/components/bootstrap/fonts/glyphicons-halflings-regular.eot")
is transformed into:
url("src\components\bootstrap\fonts\glyphicons-halflings-regular.eot")
this is not expected.

Plugin duplication

Hello!
I've found this repo while googling something completely different.
I've got a question – there are already two plugins doing the same thing as yours:
https://github.com/devex-web-frontend/postcss-assets-rebase and
https://github.com/postcss/postcss-url
And second one does completely what you need

Why did you decide to develop your own?
I'm just interested, because i've developed postcss-assets-rebase mostly because we needed full control of our plugins