Security News
JavaScript Leaders Demand Oracle Release the JavaScript Trademark
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
postcss-url
Advanced tools
The postcss-url npm package is a PostCSS plugin used to process URLs in CSS. It allows developers to adjust asset URLs, inline images, or copy assets to a different location during the build process.
Rebasing URLs
This feature allows you to adjust URLs based on the output directory, ensuring that they are correct in the built CSS.
postcss([ require('postcss-url')({ url: 'rebase' }) ]) // This will rebase all URLs according to the destination directory
Inlining images
This feature enables the inlining of images into your CSS, reducing the number of HTTP requests needed for loading assets.
postcss([ require('postcss-url')({ url: 'inline' }) ]) // This will inline images as base64 data URIs
Copying assets
This feature allows you to copy assets from your source CSS to a specified directory, which can be useful for organizing your build output.
postcss([ require('postcss-url')({ url: 'copy', assetsPath: 'img' }) ]) // This will copy referenced assets to a specified directory
cssnano is a modular minifier for CSS that includes functionalities for optimizing and transforming values, which can include URL rebasing. It differs from postcss-url in that it is more focused on overall CSS optimization rather than just URL processing.
gulp-rev is a gulp plugin for asset revisioning by appending content hash to filenames. It can rewrite asset references in CSS, which is similar to some of the functionalities of postcss-url, but it is designed to work within the gulp ecosystem.
PostCSS plugin to rebase or inline on url().
$ npm install postcss-url
// dependencies
var fs = require("fs")
var postcss = require("postcss")
var url = require("postcss-url")
// css to be processed
var css = fs.readFileSync("input.css", "utf8")
// process css
var output = postcss()
.use(url({
url: "rebase" // or "inline"
}))
.process(css, {
// "rebase" mode need at least one of those options
// "inline" mode might need `from` option only
from: "src/stylesheet/index.css"
to: "dist/index.css"
})
.css
Checkout tests for examples.
url
(default: "rebase"
)url: "rebase"
Allow you to fix url()
according to postcss to
and/or from
options (rebase to to
first if available, otherwise from
or process.cwd()
).
url: "inline"
Allow you to inline assets using base64 syntax. Can use postcss from
option to find ressources.
Work on a branch, install dev-dependencies, respect coding style & run tests before submitting a bug fix or a feature.
$ git clone https://github.com/postcss/postcss-url.git
$ git checkout -b patch-1
$ npm install
$ npm test
1.0.0 - 2014-08-24
First release
FAQs
PostCSS plugin to rebase or inline on url().
The npm package postcss-url receives a total of 1,032,001 weekly downloads. As such, postcss-url popularity was classified as popular.
We found that postcss-url demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In an open letter, JavaScript community leaders urge Oracle to give up the JavaScript trademark, arguing that it has been effectively abandoned through nonuse.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.