No quotes around strings

[IngwiePhoenix]

No quotes around strings

[EdwardIrby]

Sorry I don't understand your issue. Are you trying to pass your email address as a sass variable?

Also the links in my readme are for attribution purposes only. There are bugs with the code so I had to make changes in my loader.

If you could share a sample of the code and the error I should be able to better understand your problem.

[IngwiePhoenix]

Alright, I'll try to elaborate more:

I am passing my package.json to SASS using this loader. But what happens is that the author field does troubble. So, as you know, an E-Mail address containts an @-sign. This sign obviously conflicts with SASS.

JSON snippet:

{
    "author": "Ingwie Phoenix <[email protected]>"
}

SASS output:

$author: Ingwie Phoenix <[email protected]>;

So obviously this'd break, right? Well, it does indeed.

Now comes the next problem. Once the sass-loader picks up that there is an error, it naturally tries to explain an error message AND the line in which the error was found. But guess what: The sass-loader loads that snippet off the disk. So, when the modified SASS source is passed to the next loader - modified, as in the variables are prepended - that loader may fail. In order to display the error message using the real line of code, off the file system. So what we might end up is: a wrong output.

If the prepended SASS source was 4 lines tall, we'd have to calculate the outputted line number plus 4. But how does one know, how long the output truely is? This is why I have actually modified the source code.

The modification:

• Does quotes.
• Does no new lines. It wraps everything up.

Code, modified and straight off my working directory:

"use strict";

var loaderUtils = require("loader-utils");

module.exports = function(content) {



    function jsonToSassVars (obj, indent) {
        // Make object root properties into sass variables
        var sass = "";
        for (var key in obj) {
            sass += "$" + key + ":" + JSON.stringify(obj[key], null, indent) + ";";
        }

        // Store string values (so they remain unaffected)
        var storedStrings = [];
        sass = sass.replace(/(["'])(?:(?=(\\?))\2.)*?\1/g, function (str) {
            var id = "___JTS" + storedStrings.length;
            storedStrings.push({id: id, value: str});
            return id;
        });

        // Convert js lists and objects into sass lists and maps
        sass = sass.replace(/[{\[]/g, "(").replace(/[}\]]/g, ")");

        // Put string values back (now that we're done converting)
        storedStrings.forEach(function (str) {
            sass = sass.replace(str.id, str.value);
        });

        return sass;
    }

    var query = loaderUtils.parseQuery(this.query);
    var sass = jsonToSassVars(query).replace("\n"," ");

    var out = sass ? '/*Begin generate*/' + sass + '/*End generate*/' + content : content;
    return out;
}

Maybe you'll understand what i mean now. :)

[EdwardIrby]

I tested your code, unfortunately it doesn't appear to work with the webpack sass-loader. In order to allow @ character I'm going to have to find another solution. The return in my original code is unquoted because in the majority of use cases with sass variables and maps you do not want the variable value quoted. Otherwise it will output quoted values which are invalid css values.

When I use your modification I get the following output which is not usable.

Input

{
"breakpoints":{
    "portraitS": "320px",
    "portraitM": "360px",
    "portraitL": "414px",
  },
  "localNavHeight":"50px",
}

Output

$breakpoints:("portraitS":"320px","portraitM":"360px","portraitL":"414px");
$localNavHeight:"50px";

Desired Output

From the current jsontosass-loader is displayed below.
Input

{
"breakpoints":{
    "portraitS": "320px",
    "portraitM": "360px",
    "portraitL": "414px",
  },
  "localNavHeight":"50px",
}

Output

$breakpoints:(portraitS:320px,portraitM:360px,portraitL:414px);
$localNavHeight:50px;

Passing the package.json or another json file with variables containing the @ character is honestly not a use case I every expected. I'll see if I can find time this weekend for a solution.

[IngwiePhoenix]

Ohh I get what you mean! Hm...

I pass a configuration to my SASS since it has stuff like URL paths and such - which are derived from a configuration script. That is why my whole config ends up being stored. :)

There is a possibility that I can see: a switch.

• quotes -> Boolean: Quote the outputted keys/values
  Config: { test: /\.scss$/, loader: "style!css!sass!jsontosass?quotes=true&"+jsonString }
  By default, it should be false.

That is at least a partial solution... What you could also do is to check if the value contains a unit and write it out plain without JSON.stringify(...).

if(/[\d][\.\d]?(px|em|...some others...)/.test($value)) {
    // Is a unit'ed number
} else {
    // Anything but a number
}

My Regexp experience is not the best, but maybe you get what I was trying to match here.