Tutorial on activating Stylus URL rewrites

Is there a way to convert stylus URLs into base64 encoded form? I want to change url('/path/to/img.png') to its base64 encoded version.

I have been referencing the documentation here, but it's not providing much help.

I attempted to include the necessary bits and example functions, importing url, but I am unsure how to activate this feature.

Any suggestions on how to make this work?

UPDATE:

I am considering using the grunt-image-embed plugin.

Here is my Grunt configuration:

imageEmbed: {
  dist: {
    src: [ "./public/local/css/images.css" ],
    dest: "./public/prod/css/images.css",
    options: {
      deleteAfterEncoding : false
    }
  }
},

The CSS file includes:

#footer-social .youtube {
  width: 18px;
  background-image: url('/img/youtube-icon.png');
}

This results in the error message:

Warning: File C:\path\...\grunt-image-embed\tasks\lib\img\youtube-icon.png
does not exist Use --force to continue.

If I remove the background-image line, everything progresses smoothly. Unfortunately, I cannot alter the paths in the CSS as we rely on relative paths for images in the local environment.

javascriptcssgruntjsstylus

Answer №1

Check out this snippet:

function compileStyle(str, path) {
  return stylus(str)
            .define('url', stylus.url({
              paths : [__dirname + '/public'],
              limit : 10000
            }));
}

You can find more information on how to use Stylus at:

http://bengourley.co.uk/using-stylus

This code was successfully implemented in a project available at:

https://github.com/MichaelJCole/wintersmith-stylus/blob/master/plugin.coffee

If you're interested, here is the relevant section in CoffeeScript:

      stylus(@_text, options)
      .use(nib())
      .define('url', stylus.url(
        paths : [__dirname + '/public']
        limit : locals.inlineSpriteMaxBytes || 0 ) )
      .render (err, css) ->
        if err
          callback err
        else
          callback null, new Buffer css

Answer №2

If you're looking for a useful grunt plugin, check out this one: grunt image embed. It supports both images and fonts. Here's an excerpt from the documentation:

grunt.initConfig({
  imageEmbed: {
    dist: {
      src: [ "css/styles.css" ],
      dest: "css/output.css",
      options: {
        deleteAfterEncoding : false
      }
    }
  }
});

Answer №3

Although I'm not certain of the method, it is possible to create a stylus using this resource [1]:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using a React component to import a module for publishing on NPM

Creating my first React component for NPM publication has been quite the learning experience. I decided to use the react-webpack-component package from Yeoman to kickstart my project. However, upon installing and importing my component into a React app, I ...

javascriptreactjsnpm

How does the next() function work within the context of express.js middleware?

I'm really struggling to understand the purpose of "next" in this Express.js example and why it's being used in this context. This is the file where all my routing logic is being handled. const express = require('express'); const co ...

javascriptnode.jsexpress

Unable to retrieve information from the PHP file

I am currently attempting to retrieve data from a website, but instead of the desired result after submitting all necessary information using the 'POST' method, it is returning a PHP file as text. Below is the code I have been using to fetch the ...

javascriptphphtml

Reduce the amount of code in conditional statements

Is there a way to streamline the following code- <div className="App"> <Checkbox parameter={parameter1} setParameter={setParameter1}></Checkbox> { parameter1.country && parameter1.category ? < ...

javascriptreactjs

Struggling to connect CSS and JS files in an HTML document

I'm encountering issues while trying to connect CSS and JS files to my HTML file's head section. Below is the HTML code snippet: <!DOCTYPE html> <html lang="en"> <head> <title>title</title> <link rel=" ...

htmlcssexpress

Is there a way to transform these buttons into a sidebar menu instead?

I'm working on an admin home page in HTML that currently displays buttons like "View Personal Information" and "View Expense Claims". I'd like to transform these buttons into a sidebar menu. Can someone guide me on what CSS code I need to add? Yo ...

htmlcss

Parameter for Ajax URL

As a beginner in the world of Ajax, I'm on a mission to grasp the inner workings of this technology. I came across a tutorial on w3schools that sparked my curiosity. In the code snippet below, the 'url' is defined as demo_ajax_load.txt. Wil ...

javascriptjqueryajax

Can you please explain the function of this JavaScript code for the Isotope filter?

I am struggling to grasp the functionality of a section of vanilla JS code related to the Isotope filter. You can find the original code here. var buttonGroups = document.querySelectorAll('.button-group'); for (var i = 0; i < buttonGroups.le ...

javascript

Improving user experience through real-time form validation in CodeIgniter with the

As I am working on a form with fields such as Fullname, Password, and Mobile no, each field is initially displayed individually on the page. When a user clicks on a button, the next field should be displayed while setting AJAX validation on it. The goal is ...

javascriptphpjqueryajaxcodeigniter

Retrieving the final object from an express query

Sorry if this question sounds silly, but I'm new to working on the "backend" of things. I have this code snippet below and I'm facing an issue where calling fetchSum() successfully sends data to the server, but upon returning to the client, it th ...

javascriptnode.jsvue.jsnuxt.js

"Present a continuous sequence of images in HTML to create a dynamic video-like experience

A PHP file has been created to extract images from a MySQL database and display them as a sequence of images that update every half second. Using the setInterval method in JavaScript, the page is refreshed every half second to display a new picture. $(doc ...

javascriptphphtmlcssvideo-streaming

Struggles with eliminating Mix from a Laravel-Vue hybrid project

My goal is to streamline the process of adopting new features or releases by removing Laravel Mix from my project. I want to avoid using Mix's syntax or plugins and eliminate the need to contain everything within the webpackConfig method. I have succ ...

javascriptlaravelvue.jswebpacklaravel-mix

The JSON file gets emptied every time I refresh the page repeatedly

I am encountering an issue where my JSON file gets cleared if I restart the page quickly after using the fs module to read/write it. The JSON data is read at the beginning of the page like this: let preferencesJSON; try { preferencesJSON = fs.readFile ...

javascriptnode.jsjson

Tips for implementing a wait time for individual items in bee-queue

I've encountered an issue with the delayUntil function in the bee-queue library when creating a queue. await queue .createJob(process) .timeout(60 * 1000 * 2) .retries(2) .backoff('fixed', 60 * 1000) ...

javascriptnode.js

Re-establishing Scroll Functionality Post Ajax Request Disruption caused by prettyLoader

I have created a jQuery infinite scroll function that follows the infinite scroll design pattern. After the ajax server call is completed, I am trying to rebind the scroll event. Although everything works fine for the first ajax call, the scroll event is ...

javascriptjquery

Active Arrow Link

I'm currently working on customizing the appearance of my WordPress site's categories sidebar by adding an arrow to the left side of the active link. After tweaking the CSS to achieve the desired behavior and making some color adjustments for te ...

phpcsswordpresshtml-listsnav

How to handle a POST request with an empty body in Node.js express routing, utilizing body-parser

I'm facing an issue where my submission form's post requests are returning an empty body, regardless of the body parser settings I apply. All my dependencies in package.json are up to date, and a previous application I created (using the deprecat ...

javascriptnode.jsrestexpresspost

What is the process for updating the package-lock.json file in Laravel?

GateLab's security feature has identified some known vulnerabilities in the package-lock.json file that need to be updated. The message states: Known security vulnerabilities detected Dependency object-path Version < 0.11.5 Upgrade to ~> 0.11. ...

javascriptlaravelnpm

Position the flex item adjacent to the initial flex item using wrap mode only if there is extra space

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl ...

htmlcssflexbox

Creating a stylish web page with smooth, rounded corners using CSS styling techniques

Looking for some inspiration? Check out this free CSS sample template called Black Coffe. After downloading and opening it in Visual Studio, I noticed that the design time HTML appears as blocks. However, once compiled, it renders with aesthetically plea ...

asp.nethtmlcss