Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
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.
maxSize: "size in kbytes"
Specify the maximum file size to inline
basePath: "basePath for images to inline"
Specify the basePath from where to search images
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.1.3 - 2014-12-04
FAQs
PostCSS plugin to rebase or inline on url().
The npm package postcss-url receives a total of 827,184 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
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.