https://github.com/unlight/postcss-import-url

PostCSS plugin inlines remote files.
https://github.com/unlight/postcss-import-url

postcss postcss-plugin

Last synced: about 2 months ago
JSON representation

PostCSS plugin inlines remote files.

• Host: GitHub
• URL: https://github.com/unlight/postcss-import-url
• Owner: unlight
• License: mit
• Created: 2015-10-31T19:58:08.000Z (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2023-05-06T23:05:15.000Z (over 1 year ago)
• Last Synced: 2024-07-18T08:45:43.397Z (2 months ago)
• Topics: postcss, postcss-plugin
• Language: JavaScript
• Size: 176 KB
• Stars: 50
• Watchers: 3
• Forks: 10
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# postcss-import-url

[PostCSS](https://github.com/postcss/postcss) plugin inlines remote files.

```css

/* Input example */

@import 'https://fonts.googleapis.com/css?family=Tangerine';

body {

  font-size: 13px;

}

```

```css

/* 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

```js

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](https://github.com/postcss/postcss#usage) 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](https://github.com/unlight/postcss-import-url/pull/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.