Repository files navigation

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;}

constimportUrl=require('postcss-import-url');constoptions={};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',});

SeePostCSS docs for examples for your environment.

• 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 checkuser-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)

• 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 optionmodernBrowser to explicitly load woff2 fonts.