PostCSS Import Url

The Import Url processor uses the postcss-import-url plugin to inline CSS files from external URLs or npm packages directly into your stylesheet.

Usage

Import Url is a CSS processor that can be enabled from the style editor menu, or configured via the processors property of the configuration object.

When enabled, @import statements that reference external URLs or npm packages are resolved and their contents are inlined into the stylesheet.

Imported content is cached to avoid multiple requests for the same file.

Demo

show code

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Import Url Demo</h1>\n  <p>This page imports and inlines an external CSS stylesheet. Check the <strong>Compiled</strong> tab to see the inlined output.</p>\n  <button class=\"button\">A styled button</button>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": "@import url(\"https://cdn.jsdelivr.net/npm/[email protected]/modern-normalize.css\");\n\n.button {\n  background: #4a90d9;\n  color: white;\n  border: none;\n  padding: 10px 20px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n"
    },
    "processors": [
      "postcssImportUrl"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
createPlayground('#container', options);

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Import Url Demo</h1>\n  <p>This page imports and inlines an external CSS stylesheet. Check the <strong>Compiled</strong> tab to see the inlined output.</p>\n  <button class=\"button\">A styled button</button>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": "@import url(\"https://cdn.jsdelivr.net/npm/[email protected]/modern-normalize.css\");\n\n.button {\n  background: #4a90d9;\n  color: white;\n  border: none;\n  padding: 10px 20px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n"
    },
    "processors": [
      "postcssImportUrl"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
createPlayground('#container', options);

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Import Url Demo</h1>\n  <p>This page imports and inlines an external CSS stylesheet. Check the <strong>Compiled</strong> tab to see the inlined output.</p>\n  <button class=\"button\">A styled button</button>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": "@import url(\"https://cdn.jsdelivr.net/npm/[email protected]/modern-normalize.css\");\n\n.button {\n  background: #4a90d9;\n  color: white;\n  border: none;\n  padding: 10px 20px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n"
    },
    "processors": [
      "postcssImportUrl"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
  return (<LiveCodes {...options} />);
}

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Import Url Demo</h1>\n  <p>This page imports and inlines an external CSS stylesheet. Check the <strong>Compiled</strong> tab to see the inlined output.</p>\n  <button class=\"button\">A styled button</button>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": "@import url(\"https://cdn.jsdelivr.net/npm/[email protected]/modern-normalize.css\");\n\n.button {\n  background: #4a90d9;\n  color: white;\n  border: none;\n  padding: 10px 20px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n"
    },
    "processors": [
      "postcssImportUrl"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Import Url Demo</h1>\n  <p>This page imports and inlines an external CSS stylesheet. Check the <strong>Compiled</strong> tab to see the inlined output.</p>\n  <button class=\"button\">A styled button</button>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": "@import url(\"https://cdn.jsdelivr.net/npm/[email protected]/modern-normalize.css\");\n\n.button {\n  background: #4a90d9;\n  color: white;\n  border: none;\n  padding: 10px 20px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n"
    },
    "processors": [
      "postcssImportUrl"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
</script>

<LiveCodes {...options} />

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Import Url Demo</h1>\n  <p>This page imports and inlines an external CSS stylesheet. Check the <strong>Compiled</strong> tab to see the inlined output.</p>\n  <button class=\"button\">A styled button</button>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": "@import url(\"https://cdn.jsdelivr.net/npm/[email protected]/modern-normalize.css\");\n\n.button {\n  background: #4a90d9;\n  color: white;\n  border: none;\n  padding: 10px 20px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n"
    },
    "processors": [
      "postcssImportUrl"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
  return (<LiveCodes {...options} />);
}

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Import Url Demo</h1>\n  <p>This page imports and inlines an external CSS stylesheet. Check the <strong>Compiled</strong> tab to see the inlined output.</p>\n  <button class=\"button\">A styled button</button>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": "@import url(\"https://cdn.jsdelivr.net/npm/[email protected]/modern-normalize.css\");\n\n.button {\n  background: #4a90d9;\n  color: white;\n  border: none;\n  padding: 10px 20px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n"
    },
    "processors": [
      "postcssImportUrl"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  }
};
  return (<LiveCodes {...options} />);
}

<live-codes></live-codes>

<script type="module">
  import "livecodes/web-components";

  const playground = document.querySelector("live-codes");
  playground.config = {
    "activeEditor": "style",
    "markup": {
      "language": "html",
      "content": "<div class=\"container\">\n  <h1>Import Url Demo</h1>\n  <p>This page imports and inlines an external CSS stylesheet. Check the <strong>Compiled</strong> tab to see the inlined output.</p>\n  <button class=\"button\">A styled button</button>\n</div>\n"
    },
    "style": {
      "language": "css",
      "content": "@import url(\"https://cdn.jsdelivr.net/npm/[email protected]/modern-normalize.css\");\n\n.button {\n  background: #4a90d9;\n  color: white;\n  border: none;\n  padding: 10px 20px;\n  border-radius: 4px;\n  cursor: pointer;\n}\n"
    },
    "processors": [
      "postcssImportUrl"
    ],
    "tools": {
      "active": "compiled",
      "status": "open"
    }
  };
</script>

Processor Info

Name

postcssImportUrl

Editor

style

Processor

postcss-import-url

Version

postcss-import-url: v7.0.0

Custom Settings

Custom settings added to the property postcssImportUrl are passed as options to the plugin. Please check the documentation for full reference.

Please note that custom settings should be valid JSON (i.e. functions are not allowed).

Example:

Custom Settings
{
  "postcssImportUrl": {
    "modernBrowser": true
  }
}

Usage​

Demo​

Processor Info​

Name​

Editor​

Processor​

Version​

Custom Settings​

Links​