Exploring the potential synergy between the compass and blessings

Currently working on a Compass project and facing the issue of my final CSS output being too large, requiring it to be blessed. I am using Codekit to compile SCSS files but unfortunately, the bless option is not available for Compass projects as mentioned in this Github issue. Is there an alternative method to automatically bless the compiled CSS file after the process? Can nodejs be used to watch the CSS file and then bless it?

====================================================

UPDATE

I have switched from Codekit to Grunt for building project assets which is working perfectly now.

cssnode.jscompass-sass

Answer №1

It appears that with the help of this particular guide, you can easily implement the following:

on_stylesheet_saved do |filename|
    system('blessc ' + File.basename(filename))
end

Once you have Bless installed from here, this action will be executed after compiling your Compass file. Enjoy!

Answer №2

While this code functions properly with the standard compile command, it fails to operate correctly when running in watch mode. The watch process prematurely terminates after Bless has finished executing.

Answer №3

Encountered issues with executing blessc, leading to the display of one of two error messages:

Error: config.rb: No such file or directory - blessc (specific filename)

or

Error: env: node: No such file or directory

The problem was identified as blessc/node.js being located in /usr/local/bin, which is not included in the PATH variable for ruby exec (/usr/bin:/bin:/usr/sbin:/sbin). The solution involved the following code snippet:

on_stylesheet_saved do |filename|
  exec('PATH=$PATH:/usr/local/bin; blessc ' + filename + ' -f')
end

Additional note: If errors persist indicating that the files are not CSS accepted by bless, consider checking for white spaces in the absolute file path. White space can be escaped using the following method:

on_stylesheet_saved do |filename|
  exec('PATH=$PATH:/usr/local/bin; blessc ' + (filename.gsub! ' ', '\ ') + ' -f')
end

Answer №4

Here is a modified version of the code block with some changes inspired by the response from Julian Xhokaxhiu:

on_stylesheet_saved do |file|
  begin
    puts "Checking number of selectors in file: " + file
    output = system('blessc',file,'-f')

    if not output
      Kernel.exit(false)
    else
      puts "File blessed for compatibility with older versions of IE."
    end

  rescue Exception => e
    puts "Please ensure bless is installed.\nRun 'sudo npm install -g bless'."
    Kernel.exit(false)
  end
end

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

Ways to deduce or implement intellisense for parameter types in overloaded functions

Currently, I am developing an Electron application where numerous events are being passed around with specific listeners assigned to each event. One example is BrowserWindow.on: Electron.BrowserWindow.on(event, listener) The event can take on values such ...

node.jstypescripteventselectron

Steps for Deactivating HTML Links

I am facing an issue with a link button inside a <td> that needs to be disabled. It is working fine on Internet Explorer but not functioning properly in Firefox and Chrome. I have tried various methods, but nothing seems to work on Firefox (using ve ...

javascriptjqueryhtmlcss

I've encountered an issue when attempting to use innerHTML for DOM manipulation

I've been attempting to remove a specific list item <li> from the inner HTML by assigning them proper IDs. However, I'm encountering difficulties in deleting it. How can I delete these list items after clicking on the cross button? Feel fr ...

javascripthtmlcssinnerhtml

Integrating a footer into the enhanced search tab slider

I'm struggling to create a sticky footer like the one on w3schools. Even though I used the same code in my material UI demo, it's not functioning properly. I tried debugging by changing the position from fixed to absolute, but it still isn&apos ...

javascripthtmlcssreactjsmaterial-ui

Stack three DIVs vertically on the entire screen with a fixed page margin, ensuring no need for a scroll bar

I need help creating a layout with 3 DIVs stacked vertically, each taking up one third of the screen without causing a scroll-bar to appear. I also want an 8px margin around all three of them. Here's an image for reference... example image Ultimatel ...

htmlcssfrontendweb-deployment

Error 403 detected in Node.js Express

My Node App has a page where users can submit their email address to login. When I deploy the app to production, it works fine initially. However, after some time, I start receiving a 403 Forbidden error like the following: Express 403 Error: Forbidden at ...

node.jsexpress

Tips for setting up a Mongo Atlas connection string in a Node.js server.js file?

Thinking of developing a user-friendly web app specifically for my local dog park. The concept behind this web app is to provide users with the opportunity to enter their name, their furry friend's name, and the time they intend to visit. These submi ...

node.jsexpressamazon-elastic-beanstalkmongodb-atlas

Send information from Node.js to the webpage and populate designated elements (search by either ID or class) on the webpage

After successfully retrieving data from the mongo database using nodejs, my goal is to display this data on a webpage. function requireUser(req, res, next){ //console.log(req.session.username); if (!req.session.username) { res.redirect('/user_un ...

node.jshtmlmongodbexpress

The issue with keystonejs redirect not functioning properly after signin when using a function as the second parameter

Scenario I have a specific form on the frontend that requires the user to be logged in. To achieve this, I am using keystone.js' "requireUser" middleware. Once the user logs in, by default they are redirected to the admin UI at "/keystone". However, ...

node.jsexpressauthenticationhttp-redirectkeystonejs

``The success of `npm publish` and `npm install` may vary based on the syntax utilized in the `.npmrc

Issue With Configuring Project Dependencies I am currently facing an issue while setting up a project to install dependencies from NPM. The plan is to eventually publish the project to GitHub Packages as a private package. There seems to be a conflict wit ...

node.jsnpm

Connect-Domain fails to detect errors in the scenario described below:

I have chosen to implement the connect-domain module (https://github.com/baryshev/connect-domain) in order to streamline error handling within my Express application. Although it generally functions as expected, there is a peculiar issue that arises when ...

javascriptnode.jsexpress

Transform this color matching game into an image matching game using JavaScript and jQuery

I have a color matching game that I would like to enhance by matching background-images instead of just background-colors. However, I am facing difficulties in making this change. For instance, instead of matching the color red with the text "red," I wan ...

javascriptjqueryhtmlcss

Separate the string by commas, excluding any commas that are within quotation marks - javascript

While similar questions have been asked in this forum before, my specific requirement differs slightly. Apologies if this causes any confusion. The string I am working with is as follows - myString = " "123","ABC", "ABC,DEF", "GHI" " My goal is to spli ...

javascriptarraysnode.jsregextypescript

Can one bypass route middleware in node express?

Consider the following POST request function in express (express version 3.5.1): app.post('/example', someFunctionOne, someFunctionTwo, function(req, res){ if(!req.someVar){ return res.send(400, { message: 'error'}); } ...

node.jsexpressmiddleware

"Border-radius becomes less prominent on pointer interaction in Chrome and Safari due to WebKit's behavior

Having an issue with a list inside a div. The problem arises when there is a div containing a list, which limits the visibility of items for users. If the limit is exceeded, a scroll bar appears inside the div to allow users to see more items. Additionally ...

google-chromesafariwebkitcss

How can I position a div in the center of a fullpage.js slide?

I'm currently utilizing the fullPage.js plugin sourced from this link: . I have successfully implemented vertical slides by using the following HTML code: <div class="section" id="section2"> <div class="slide" id="slide1"> ...

javascriptjqueryhtmlcssfullpage.js

What is the technique for integrating a required file into an Angular module using Browserify?

My Angular SPA build is set up to use NPM for calling the browserify script to bundle it. To execute the build process from the terminal, you can run npm run build:js, which triggers the following script in the package.json file: "build:js": "browserify - ...

javascriptangularjsnode.jsnpmbrowserify

Slow auto page refresh in local development for Angular2 on Windows can be quite frustrating

Recently diving into angular2 and following the heros tutorial from docs. Struggling with a sluggish development experience while working with angular2. It's taking approximately 5 seconds for angular2 to recognize changes in files, followed by anothe ...

javascriptnode.jstypescriptangular

The challenge of applying flex property in React Native JSX

I'm facing a challenge while trying to implement form field validation in various forms within a React Native mobile application. The problem arises when the error message, which should appear below the text input field, ends up occupying half of the ...

cssreact-nativemobile

Designing rows and columns using Angular CSS within an ngFor loop

Is there a way to align items in a row or column based on conditions within an *ngFor loop? I want the input type to display on the next line if it is textarea, and on the same line otherwise. Check out this Stackblitz Demo for dynamically generated HTML ...

cssangular6ngfor