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

What is the best way to showcase a full-screen overlay directly inside an iFrame?

As I work in HTML, I'm faced with a challenge - my iFrame is only taking up a small section of the screen (referred to as 'World' in the example below). What I want to achieve is creating a full-screen div overlay from that iFrame, but curr ...

htmlcssoverlay

Step-by-step guide to implementing a month and year date-picker in Mozilla Firefox

I'm looking to create input fields where users can add the month and year. I tried using the code below, but unfortunately Mozilla Firefox doesn't support it. <input type="month" id="start" name="start"> Does ...

javascripthtmlcss

What is the best way to vertically align the second row in a carousel using Tailwind CSS?

Currently, I am working on developing an up-and-down carousel with Tailwind CSS. However, I am encountering a challenge in aligning the elements in the second row of my grid. My main objective is to have these elements centered vertically within the grid. ...

cssreactjstailwind-css

Tips for stopping the loading of background images on an image slider

I am utilizing unslider to showcase an image slider on the landing page of my website. The slides are designed with background images in the CSS, and they adjust based on the media query. My concern is that I don't want all the slider images to load a ...

jquerycssimageoptimization

Vuetify's v-badge showcasing an exceptionally large number in style

Encountering an issue with using v-badge and v-tab when dealing with large numbers in a v-badge. Managed to find a CSS workaround by setting width: auto; for adjusting the size of v-badge to accommodate huge numbers, but now facing an overlap with my v-ta ...

javascripthtmlcssvue.jsvuetify.js

What is the best way to style the header of a table when scrolling in CSS?

Currently, I am facing an issue with applying the top CSS property to the thead element of a table while scrolling. I have attempted various methods but have been unsuccessful in achieving the desired outcome. Initially, I used the scroll event, however, ...

javascriptjqueryhtmlcss

What is the reason for the presence of the `@` symbol in node module names?

Upon discovering the latest version of material-ui, I couldn't help but notice the new addition of an @ symbol preceding the library name, such as @material-ui/core. This led me to explore my node modules, where I found other instances like @babel and ...

node.jsnpmnode-modules

The scrolling function of the jQuery UI select menu is not working properly on the Android browser

I am currently developing a mobile application that utilizes the jQuery UI select menu. The functionality works well, but I have encountered an issue with certain drop downs being too long to display properly. While my PC shows scrollable floating divs as ...

androidcssjquery-uihtmloverflow

Position the label to the left of the form-switch using Bootstrap

I have been struggling to align the label to the left of my switchbox. Despite searching through stackoverflow and other websites, I haven't been successful in achieving the desired alignment. Here is a trimmed down version of the code for reference: ...

htmlcsscheckboxalignment

What is the best way to create a responsive navigation bar design?

I'm trying to create a unique navigation bar that features a hexagon-shaped logo and 3 buttons aligned in a specific way. Check out the screenshot for reference here. Although I've managed to align everything perfectly on a fullscreen (1920x1080 ...

htmlcssnavbarresponsivepositioning

To prevent the background image (blue border) from shifting, I need to extract the list item element without causing the image to

Having trouble with the side borders on my navbar. I've used a background image for the border (blue line) in the list item of the navbar. Is there a way to move down two specific list items slightly, like shown in my screenshot? I need to bring down ...

htmlcss

Guide on extracting FormData from a POST request in Node.js using Multer

I have a specific challenge where I need to store formData on a mongodb schema, using nodejs and express for the backend, along with multer as middleware. This particular formData consists of both a string and a blob. My main issue is capturing and saving ...

node.jsangularexpressmulter

The issue with the background-size: contain property not functioning properly across different browsers is causing

Hey there! I have created a gallery using a DIV element with a changing background image depending on the preview image or text that is clicked on. Since the pictures in the gallery are of different sizes, I decided to use "background-size: contain". The ...

cssbackgroundswitch-statementcontain

Constructing a query in Oriento using the "like" clause

I'm having trouble implementing autocomplete with an Oriento DB interface. The web server running on NodeJS with the Express framework has the following server code: express.get("/piatti", function(req, res) { var tipo = req.query.tipo; var ...

node.jsexpressautocompleteorientdboriento

Integrating blade code within blade code

Struggling to craft a button using the Form builder. {!! Form::button('<span style="color: {!! $colour[$i] !!}" class..') !!} The specific details of the button don't matter, all I wanted was to adjust the font color to $colour[$id]. Th ...

phphtmlcsslaravel-blade

Express Producing Empty Axios Post Request Body

I am facing an issue with sending two text data pieces from my React frontend to an Express backend. Whenever I use the post command with Axios, the body appears as {} in the backend and becomes unusable. Below is the code that I am using. Client (App.js) ...

javascriptnode.jsreactjsexpressaxios

Cross-Origin Resource Sharing (CORS) issue: The Same Origin Policy prevents accessing the external content from http://api.com. (Cause: Failed CORS request). Error code: (null)

An error occurred due to the Cross-Origin Request being Blocked by the Same Origin Policy. The remote resource at http://bayut-api-v1:4000/properties/list?purpose=for-sale&locationExternalIDs=5002&sort=city-level-score&location=dubai&page=1 ...

dockerexpressnext.jscors

Extracting textual information from Wikipedia through iframes?

Currently, I am working on a website project utilizing Squarespace. This site will feature multiple pages dedicated to individuals who have reached a level of notability worthy of having their own Wikipedia page. With over 150 pages planned, manually writi ...

javascripthtmlcssiframewikipedia

The Design of DynamoDB Applications

Utilizing DynamoDB in conjunction with node.js and Express for developing REST APIs has been a beneficial choice for us. We have opted for Dynamo on the backend due to its operational simplicity. To streamline our usage of DynamoDB, we have incorporated t ...

node.jsamazon-web-servicesexpressamazon-dynamodb

Is it feasible to display two slides simultaneously in the carousel?

I have recently delved into learning about Angular.js and am currently utilizing the Carousel control in Angular-ui. I am curious to know if it is feasible to showcase two slides simultaneously instead of just one? My intention is to present the images in ...

twitter-bootstrapangularjscarouselangular-uiangular-ui-bootstrap