Git Product home page Git Product logo

less-plugin-inline-urls's Introduction

NPM version Dependencies devDependency Status optionalDependency Status

less-plugin-inline-urls

Converts url("image.png") to data-uri's automatically, without having to write data-uri("image.png") in your less

lessc usage

npm install -g less-plugin-inline-urls

and then on the command line,

lessc file.less --inline-urls

Programmatic usage

var inline-urls-plugin = require('less-plugin-inline-urls');
less.render(lessString, { plugins: [inline-urls-plugin] })
  .then(

Browser usage

Browser usage is not supported at this time and is blocked on data-uri which does not work in the browser (not sure why you would want it to).

less-plugin-inline-urls's People

Contributors

lukeapage avatar thet avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

less-plugin-inline-urls's Issues

Document auto-prefixer?

I just came across this repo while researching mixins to do prefixing..
Maybe this is better than what I found?
It would be cool to see this doc'd.

Size exceeds IE8-safe 32768 characters

I have problems with a 50.1 KB file:
Skipped data-uri embedding of ../node_modules/world-flags-sprite/images/flags16.png because its size (68430 characters) exceeds IE8-safe 32768 characters!

It would be nice to have an option to turn off this safety-check!

browser version

The readme tells me: "Browser usage is not supported at this time, but could be added very easily." As far as i understand this plugin uses the "data-uri()" function that not work in browser.

Ignore or properly resolve remote URLs

Remote urls should be ignored or properly resolved. Right now, they are being searched as a path, ignoring the fact that they are on a fully-qualified domain:

RuntimeError: error evaluating function `data-uri`: ENOENT, no such file or directory '/var/www/https:/fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlNHq-FFgoDNV3GTKpHwuvtI.woff' in /var/www/less/common/fonts.less on line 28, column 66:
27   font-weight: 400;
28   src: local('Source Sans Pro'), local('SourceSansPro-Regular'), url(https://fonts.gstatic.com/s/sourcesanspro/v9/ODelI1aHBYDBqgeIAH2zlNHq-FFgoDNV3GTKpHwuvtI.woff) format('woff');
29 }

Not working for fonts?

@font-face {
  font-family: Raleway;
  src: url("@{css-framework-fonts}raleway-light.woff2") format("woff2"),
       url("@{css-framework-fonts}raleway-light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

I've tried isolating both formats with no difference in output.

I understand the excessive bloat that this will produce, but it is necessary for local access to my CSS documentation in Firefox, where the same-origin policy is different from other browsers.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.