stylus / stylus

Expressive, robust, feature-rich CSS language built for nodejs
https://stylus-lang.com
MIT License
11.2k stars 1.12k forks source link

Stylus resolves JSON values that seem to be a path #2365

Open billymcintosh opened 6 years ago

billymcintosh commented 6 years ago

I'm generating json which I then include to a .styl file.

For instance;

{
    "flags": {
        "height": "198px",
        "uri": "src/images/sprites/flags.png",
        "width": "200px",
        "sprites": [
            {
                "height": "66px",
                "name": "br",
                "offsetX": "0px",
                "offsetY": "0px",
                "width": "67px"
            },
...

Then

flags = json(path-to-wherever + '/flags.json', { hash: true }).flags

$bgImage = flags.uri

I know src/images/sprites/wherever doesn't exist . Stylus overrules me and checks if it exists and crashes out with an error.

In fairness, src/images/sprites/wherever does exist but in a relative way.

What I want to happen is for stylus to not do this. It should ignore path resolution. (I've already done it elsewhere with slightly more sophistication). Stylus should treat a json file like a text. It should not GAF about the contents.

It's a huge security risk and it may cause other people time and money by debugging less.

billymcintosh commented 6 years ago

For more insight, the horrible error message is cannot perform src / images

Why perform anything on a text file.

pakastin commented 6 years ago

What are you trying to do? I don’t quite follow..

billymcintosh commented 6 years ago

1) I generate json files with sprite definitions 2) I import this from stylus with json(...) 3) Stylus bombs while reading the json file because one of the properties is apparently a filesystem path... yes - so what? Stylus doesn't need to know - it's a json file.

{
    "flags": {
        "height": "198px",
        "uri": "src/images/sprites/flags.png",
        "width": "200px",
...
}

The above doesn't work.

{
    "flags": {
        "height": "198px",
        "uri": "/src/images/sprites/flags.png",
        "width": "200px",
...
}

That works.

We're using a css-preprocessor, this shouldn't be the behaviour when interpreting a text file.

vendethiel commented 6 years ago

Seems like it's trying to evaluate "src/images/sprites/flags.png"

billymcintosh commented 6 years ago

Exactly @vendethiel - flummoxed would be an understatement. I love the power in Stylus but please allow me to sort paths out :) One size rarely fits all.

vendethiel commented 6 years ago

You can use "'...'" as a workaround for now I suppose...

billymcintosh commented 6 years ago

Thanks. I don't know if I should laugh or cry. It nearly works but my output is very literal. I have in my url(...) - "'...''".

Thanks again - I'm on the right track. I will dive into stylus over the weekend and see if I can do a PR for this and have it resolved without any hackery.