rlapoele / json-to-scss

A small utility to convert JSON file(s) into SASS/SCSS files.
MIT License
67 stars 5 forks source link

Feature request: no map root (prefix) #8

Open cojaco opened 4 years ago

cojaco commented 4 years ago

Hi,

I'm looking for a way to have multiple scss maps in one json file instead of one big one.

right now: json:

{
  "size-scale": {
    "300": "0.8rem",
    "500": "1.25rem",
  },
  "colors": {
    "primary": "#173854",
    "highlight": "#fedb8b",
  },
  "fonts": {
    "base": "\"-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'\"",
    "serif": "\"'Lora', serif\""
  }
}

gives me (scss)

$toolbox: (
  size-scale: (
    300: 0.8rem,
    500: 1.25rem
  ),
  colors: (
    primary: #173854,
    highlight: #fedb8b
  ),
  fonts: (
    base: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
    serif: "'Lora', serif"
  )
);

but I would like it like this (scss):

$size-scale: (
    300: 0.8rem,
    500: 1.25rem
);
$colors: (
    primary: #173854,
    highlight: #fedb8b
);

$fonts: (
    base: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'",
    serif: "'Lora', serif"
);
mulder21c commented 4 years ago

@cojaco Have you solved this problem? I have the same concerns.

rlapoele commented 4 years ago

Hi,

The possibility to split (root) keys (or keep them separated) as mentioned above is not an available option yet. Currently, in order to obtain several sass variables in the output, you must split the js/json object provided as input (so create multiple files manually).

Alternatively, if you can work with "flat" sass variables instead of maps, you can leverage the --fk option; this will flatten the js/json object(s) provided as input and therefore produce separated flatten sass variables.

I will try to add a split keys (--sk) option in version 1.7.0. Depending on workload and life, this version could be available in October/November timeframe.

cojaco commented 4 years ago

Hi,

cool, if you consider this for the future!

Right now I play around with different JSON token libraries, but I have to say I like your simplistic approach.

olofens commented 4 years ago

I need this as well and will go about this by generating n .scss files for n scss variables, and then reading the text from the generated files and concatenating them into a final resulting file. I will also be adding .css classes into the .scss file by this method.

thisischrisj commented 3 years ago

As a quick fix you can just replace:

let _flattenObject = flattenObject(_jsObject, flattenedKeyCase);

with

let _flattenObject = _jsObject;

in jsJsonFilesToSassScssFiles.js on line 278. You can then use the -fk flag which will flatten the root but not all the nested keys. I've only tested the validity of this when there is only one input file but it sound like you all have the same need case as me anyway.

13twelve commented 1 year ago

I've made a PR with a --kv (keyvalue) option for this - https://github.com/rlapoele/json-to-scss/pull/16