unlight/postcss-import-url

PostCSS plugin inlines remote files.

postcss-import-url

PostCSS plugin inlines remote files.

/* Input example */
@import 'https://fonts.googleapis.com/css?family=Tangerine';
body {
  font-size: 13px;
}

/* Output example */
@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/tangerine/v12/IurY6Y5j_oScZZow4VOxCZZM.woff2)
    format('woff2');
}
body {
  font-size: 13px;
}

Usage

const importUrl = require('postcss-import-url');
const options = {};
postcss([importUrl(options)]).process(css, {
  // Define a `from` option to resolve relative @imports in the initial css to a url.
  from: 'https://example.com/styles.css',
});

See PostCSS docs for examples for your environment.

Options

• recursive (boolean) To import URLs recursively (default: true)
• resolveUrls (boolean) To transform relative URLs found in remote stylesheets into fully qualified URLs (see #18) (default: false)
• modernBrowser (boolean) Set user-agent string to 'Mozilla/5.0 AppleWebKit/537.36 Chrome/80.0.0.0 Safari/537.36', this option maybe useful for importing fonts from Google. Google check user-agent header string and respond can be different (default: false)
• userAgent (string) Custom user-agent header (default: null)
• dataUrls (boolean) Store fetched CSS as base64 encoded data URLs (default: false)

Known Issues

• Google fonts returns different file types per the user agent. Because postcss runs in a shell, Google returns truetype fonts rather than the better woff2 format. Use option modernBrowser to explicitly load woff2 fonts.

postcss-import-url's Issues

Inline remote files

I've been searching for a PostCSS plugin that can optionally inline remote files, such as woff and woff2 fonts, images and svgs.

This one already inlines styles. Would it be possible to extend it to handle other file types?

postcss should be listed as a dep not a peer dep?

a lot of users just use something like gulp-postcss and in turn this causes this error when installing this package:

warning " > [email protected]" has unmet peer dependency "postcss@^6.0.13".

I suggest to either put a version range for postcss in peer deps or strictly put a version of postcss as a dep

Version 2.0.0 breaks under node < 4 due a missing Object.assign-polyfill

Example: https://travis-ci.org/proux/www/builds/143155506

`@import "https://something-remote.css" layer(third-party);` isn't transformed correctly

Given

@import "https://unpkg.com/open-props" layer(design.system);

The output currently is unvalid CSS:

@media layer(design.system){
  // styles
}

The expected output is

@layer design.system {
  // styles
}

maybe it's this L37?

Variable typo

postcss-import-url/index.js

Line 9 in a296e4b

resolveURLs: false,

This should be resolveUrls.

Update url regex to allow for no quotes

postcss-import-url/index.js

Line 15 in a296e4b

var urlRegexp = /url\(["'].+?['"]\)/;

Can quotes be made optional by updating the regex to:

var urlRegexp = /url\(["']?.+?['"]?\)/;

This would allow for:

background-image: url(../../image.jpg);

as quotes are not compulsory.

Vulnerable dependency lodash.trim

We recently got a dependabot alert about a vulnerability in lodash.trim. It hasn't been released in 7 years so I don't know if we should expect to see a new release? A better alternative might be to drop lodash.trim. I'll take a peak and see how reasonable that would be.

Edit: it seems like likely replacing trim ends up doing regular expression stuff in this repo, possibly exposing a similar regex dos type vulnerability. So maybe wait and see and upgrade.

Recursive @imports

At the current time, postcss-import-url only inlines the top-level @imports. For example, given these files:

my.css

@import url("https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/lumen/bootstrap.min.css");
// My custom css:
...

https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/lumen/bootstrap.min.css

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic");/*!
 * bootswatch v3.3.6
 * Homepage: http://bootswatch.com
 * Copyright 2012-2015 Thomas Park
 * Licensed under MIT
 * Based on Bootstrap
*/
...

https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic

/* vietnamese */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(https://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGD_j0nMiB9fPhg_k1wdK2h0.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
...

I would expect the following output:

/* vietnamese */
@font-face {
  font-family: 'Source Sans Pro';
  font-style: normal;
  font-weight: 300;
  src: local('Source Sans Pro Light'), local('SourceSansPro-Light'), url(https://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGD_j0nMiB9fPhg_k1wdK2h0.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
}
...
/*!
 * bootswatch v3.3.6
 * Homepage: http://bootswatch.com
 * Copyright 2012-2015 Thomas Park
 * Licensed under MIT
 * Based on Bootstrap
*/
...
// My custom css:
...

Instead I get this:

@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic");/*!
 * bootswatch v3.3.6
 * Homepage: http://bootswatch.com
 * Copyright 2012-2015 Thomas Park
 * Licensed under MIT
 * Based on Bootstrap
*/
...
// My custom css:
...

Changing the default functionality would be a breaking change.

It's up to you weather you want to change the default behavior or just add a recurse option.

I might be able to submit a PR.

Consider deprecating this package for the official postcss-url package

I'm not sure if it covers all use cases that postcss-import-url supports, but the official postcss/postcss-url package might be a better option for most use cases.

Google Fonts

Great plugin. One thing I noticed while testing is Google fonts returns different file types per the user agent. Because this tool runs in a shell, Google returns truetype fonts rather than the better woff2 format. I'm not sure this can be easily resolved by the tool since Google attempts to return the best font file type based on user agent. However, it might be worth posting a warning in the README.md.

For example, I have a file which has:
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");/*!

The output includes:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfaCWcynf_cDxXwCLxiixG1c.ttf) format('truetype');
}
...

If you go to https://fonts.googleapis.com/css?family=Roboto:300,400,500,700 in Chrome, you should see output that includes:

/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v15/Hgo13k-tfSpn0qi1SFdUfZBw1xU1rKptJj_0jans920.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
...

Support multiple url resolves

@font-face {
  font-display: swap;
  font-family: source_sans_prolight;
  font-style: normal;
  font-weight: 400;
  src: url(https://path/to/sourcesanspro-light-webfont-latin.woff2) format("woff2"), url(https://path/to/sourcesanspro-light-webfont-latin.woff) format("woff");
}

In this scenario, if resolveUrls is true, then only the first url( is resolved. But converting the regex into a global solves this issue.

'Unknown word' error with myfonts counter import

I get the following error:

Error: postcss-import-url: <css input>:1:1: Unknown word

when this import is in my source:

@import url("//hello.myfonts.net/count/3022f1");

Any advice on getting around this issue?

Upgrade postcss dependency to ^6.0.0

Opening this issue to discuss adding support for postcss@6.

Breaking changes

1. The behavior of Node#append has changed, but only when passing a node that already has a parent.

   This package uses append but it only appends new nodes, so this should not be a concern

2. The move, moveAfter & moveBefore functions are deprecated.

   Not used by this package.

3. The clone function has changed.

   Not used by this package.

4. Support for Node 0.12 was dropped.

   Should this package support postcss@5 and postcss@6?

Release notes for postcss: https://github.com/postcss/postcss/releases/tag/6.0.0

Setting element's `source` property

Hi, handy plugin, love this. 😄

I created a postcss plugin: postcss-font-grabber. @FTWinston use it with postcss-import-url, found an issue: AaronJan/postcss-font-grabber#20.

According to the postcss docs:

If you create a node manually (e.g., with postcss.decl()), that node will not have a source property and will be absent from the source map. For this reason, the plugin developer should consider cloning nodes to create new ones (in which case the new node’s source will reference the original, cloned node) or setting the source property manually.

I think we could set the source property for imported elements (as the same as the @import statement is in), to improve the compatibility, so postcss-import-url can works with some other plugins.

What do you think? Thanks! 🤝