Noteworthy Puppy Movies

    snowpack-plugin-relative-css-urls

    1.2.0 • Public • Published

    snowpack-plugin-relative-css-urls

    A plugin for Snowpack that lets you use relative URLs in your CSS, like this:

    .button {
      background-image: url(./icon.png);
    }

    The above CSS assumes your directory structure looks something like this:

    PROJECT ROOT
    +-src
      +-components
        +-Button
          +-index.js
          +-button.css
          +-icon.png
    

    If you like to keep your assets together with your components, this makes it possible to reference them within your CSS.

    This has also been tested with Svelte via @snowpack/plugin-svelte.

    Usage

    Requires Snowpack v2.15.0+

    Install

    yarn add -D snowpack-plugin-relative-css-urls

    Configuration

    Add this plugin to your Snowpack config:

    snowpack.config.json

    {
      "plugins": ["snowpack-plugin-relative-css-urls"]
    }

    Why is this necessary?

    CSS normally allows relative images. It does so through a "baseURI" property--a read-only property that is set when CSS files are loaded by the browser. This allows a CSS file's internal url() references to refer to assets relative to the CSS file, NOT the path of the current page (i.e. the HTML file).

    When snowpack adds *.css.proxy.js files in place of *.css files, it injects a style tag with the CSS corresponding to the .css file into the page. Everything works EXCEPT relative url() paths, because there is no way to set the style tag's baseURI.

    See also:

    Other resources:

    Install

    npm i snowpack-plugin-relative-css-urls

    DownloadsWeekly Downloads

    392

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    4.93 kB

    Total Files

    5

    Last publish

    Collaborators

    • canadaduane