The functionality of bootstrap.styl malfunctions during the parsing process in stylus

I am attempting to incorporate stylus, a css preprocessor, with twitter bootstrap version 2.04. Upon downloading boostrap, I execute the command "stylus --css < bootstrap.css > bootstrap.styl" to generate a bootstrap.styl file. However, upon trying to parse bootstrap.styl in my browser, I encounter the following error:

ParseError: /Users/user/Projects/node_tutorials/project/static/css/bootstrap.styl:1835
   1831|   background-position: -313px -119px
   1832| 
   1833| .icon-retweet
   1834|   background-position: -336px -120px
 > 1835| 
   1836| .icon-shopping-cart
   1837|   background-position: -360px -120px
   1838| 

expected "indent", got "outdent"

at Parser.error (/Users/user/Projects/node_tutorials/project/node_modules/stylus/lib/parser.js:166:11)
at Parser.expect (/Users/user/Projects/node_tutorials/project/node_modules/stylus/lib/parser.js:194:12)
at Parser.block (/Users/user/Projects/node_tutorials/project/node_modules/stylus/lib/parser.js:597:12)
at Parser.selector (/Users/user/Projects/node_tutorials/project/node_modules/stylus/lib/parser.js:1099:24)
at Parser.property (/Users/user/Projects/node_tutorials/project/node_modules/stylus/lib/parser.js:1013:47)
at Parser.ident (/Users//Projects/node_tutorials/project/node_modules/stylus/lib/parser.js:970:25)
at Parser.stmt (/Users/user/Projects/node_tutorials/project/node_modules/stylus/lib/parser.js:546:25)
at Parser.statement (/Users/user/Projects/node_tutorials/project/node_modules/stylus/lib/parser.js:458:21)
at Parser.block (/Users/user/Projects/node_tutorials/project/node_modules/stylus/lib/parser.js:609:21)
at Parser.selector (/Users/user/Projects/node_tutorials/project/node_modules/stylus/lib/parser.js:1099:24)

Despite thoroughly checking for additional whitespace and even hexdumping the file, I can't seem to identify any issues. Can someone point out where the problem lies?

cssnode.jstwitter-bootstrapexpressstylus

Answer №1

Jonathan's observation is spot on - the issue stems from the filter

To address this, I came up with a clever solution involving the stylus function unquote

All you need to do is perform a regex replacement of filter: (.+)$ with filter: unquote("\1") in bootstrap.styl

Answer №2

Have you reviewed the formatting of the entire document? Issues like this can often stem from mistakes made long before the parser detects any errors.

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

Enhance text by hovering over it

I am currently working on implementing a unique feature using jQuery and CSS. Rather than just inheriting the width, I want to create a magic line that extends to the next index item. Scenario: 1: Hover over Element one ELEMENT ONE ELEMENT TWO ELEM ...

javascriptjqueryhtmlcss

npm installation of prerender failed due to inability to locate: CL.exe

Having some trouble getting PreRender.Io set up on my local machine for testing. I've already installed Python 2.7.10. However, when I try to run: npm install prerender I encounter an error: C:\PreRender\node_modules\prerender\n ...

node.jsnpmprerender

What is the process for incorporating linear-gradient coloring into the background of a Material UI Chip component?

Is it possible to incorporate a linear-gradient below color as a background for Material UI Chip? linear-gradient(to right bottom, #430089, #82ffa1) The version of Material UI I am working with is v0.18.7. <Chip backgroundColor={indigo400} style={{widt ...

cssreactjsmaterial-ui

Keeping node and npm current: Leveraging nodesource ppa for updates

I am currently running Ubuntu 15.04 and recently added nodejs using the following ppa link: . The installation instructions can be found here: . npm was included as part of this installation from the ppa, so I'm wondering if simply updating and upgrad ...

linuxnode.jsubuntunpm

Encountered a problem while trying to install the hyperledger composer generator on MAC

I'm encountering an issue while attempting to set up the Hyperledger Composer development environment on my Mac. When I enter the command: npm install -g composer-cli I receive the following error message. I've attempted to revert the node vers ...

node.jsmacosnpmhyperledgerhyperledger-composer

Guide on connecting to MEAN stack REST api with Swift 3 on iOS devices

I am currently in the process of developing a basic login application for iOS, utilizing a MEAN stack server that exposes a REST API for communication between the iOS app and the server. On the server side, I have successfully implemented an API that enab ...

iosnode.jsswiftmongodbrest

Node.js program encounters issue when uploading photos

I am looking to create an application in node.js where I can upload videos to my page and save their links in a MongoDB database. When I click on the link, the video should be displayed. Additionally, I want to be able to see all the uploaded videos on the ...

node.js

Innovative HTML5 Video Canvas Shapes

I'm currently working on creating a circular frame or canvas for live HTML5 Video. While I am able to round the corners using keyframes radius property, it results in an oval shape rather than a circle. My preference would be to utilize a div object ...

javascriptcsshtmlvideocanvas

When attempting to reference a custom module within a React application, the error message "moment is not a function" may appear

I am facing an issue while trying to integrate a custom module I developed into a basic React application using react-boilerplate. Upon importing the module, I encountered an error stating that the moment function within the module is undefined. Here is t ...

javascriptnode.jsreactjsnpmmomentjs

CSS — The flexbox layout does not support the use of margin-left and margin-right properties

My index.html layout in a desktop window screen involves using flexbox to have two div elements in one row, a long div element in the second row, and two div elements in the third row, with one containing a list. I want spacing between the div elements in ...

htmlcssflexboxmargins

What is the process of integrating the fetch API with Express to successfully transmit a JSON object?

In my current setup, I have a nodejs app configured as follows: app.post('/action', (req, res) => { ... const option = req.body.option ... switch (option) { case 'getinfo': objectToSend = {"foo": "bar&quo ...

node.jsexpressfetch-api

Validation with Javascript can trigger the display of a hidden element

Hello there, I could really use some assistance with the JavaScript part of this code. I have two JavaScript functions: one for validating if a radio checkbox is selected, and another for revealing the "answer". Currently, an alert pops up if no selections ...

javascripthtmlcss

The Material-UI TextField is placed in the Header section of the page

As I scroll down the page, I noticed that the TextField in the header area remains visible. This header is styled using CSS and includes a TextField from the material-ui library. This is my first time creating a header with CSS. Are there any specific cod ...

cssreactjstypescriptmaterial-ui

One efficient way to handle multiple concurrent tasks in NodeJs is by using the forEach method to iterate

Having trouble getting the promises to return any values, as they are coming back empty. Despite following suggestions on Stack Overflow, I am still unable to resolve this issue. Frustration levels are high and I'm feeling lost; Can anyone help me pi ...

javascriptnode.jsgetpromise

HTML min-width is not being considered by the media query breakpoint

After resizing the browser window to less than 480px, my site reverts back to its original style (the css not defined inside the mixins). I attempted to limit the html with min-width, but despite the browser displaying a horizontal scrollbar, the css still ...

htmlcssmedia-queriescontainer-queries

JS/Electron Insert items individually

Apologies if my explanation is unclear. I have a function (shown below) that parses a JSON file and creates a grid of 1550 items. How can I add them one by one instead of all at once? Loading all 1500 items together is taking too long. function addItem () ...

javascripthtmlcssnode.jselectron

When attempting to establish a connection via HTTPS, an error is displayed indicating that

Within the options, I have included the pem, key, and password. https.createServer(options, app).listen(443,function(error) { console.log(error) }); When establishing this connection, it is returning "undefined". How can one determine the error details ...

node.jsexpress

``Advanced Web Development: Dealing with HTML5, CSS3, and

I am facing an issue while implementing a design from the CSS and HTML login form templates on my project. Below is the snippet of my HTML: <p id="firstname_line"> <label>First Name:</label> <input type="text" name="firstnam ...

htmlcss

NestJS endpoint throwing a 500 error after submitting a post request

Struggling with sending post requests in NestJS as they are returning an error message: ERROR: An error occurred in POST /api/fraud-rules in 8ms... { "isError": true, "status": 500, "name": "InternalError", & ...

node.jstypescriptnestjs

There appears to be an issue with the error handling function within React

I am facing an issue with my error function while checking the browser error, and I am unsure why adding a console.log with the error is causing trouble. I need some assistance in troubleshooting this problem which seems to be occurring at line 29 of my im ...

javascriptnode.jsreactjsfirebasefirebase-storage