postcss-import-url

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.