rlapoele / json-to-scss Goto Github PK

View Code? Open in Web Editor NEW

66.0 66.0 4.0 469 KB

A small utility to convert JSON file(s) into SASS/SCSS files.

License: MIT License

JavaScript 100.00%

json-to-scss's People

Contributors

Stargazers

Watchers

Forkers

michaelzaporozhets smrt1-tech area17 gaofei88

json-to-scss's Issues

Feature request: flattened output

I'd really like a flag that put all the variables into the top level of the .scss output, instead of nested under maps. SCSS maps are verbose to use, and if all my variables have different names anyway, there won't be any issues. There'd be a design decision to make around name conflicts, of course -- probably just throw an error.

Thanks for this cool & helpful lib!

Feature request: no map root (prefix)

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"
);

It doesn't work at all in linux

I'm intending to generate a aa.scss from a.json and b.json.

Font families list are not converted as string

With this JSON data:

{
  "sans": {
    "family": "Roboto, Helvetica, Arial, sans-serif",
    "styles": {
      "paragraph" : {
        "default": {
          "font-size": "16px",
          "line-height": "24px",
          "font-weight": "300"
        },
        "tablet": {
          "font-size": "15px",
          "line-height": "24px",
          "font-weight": "300"
        },
        "mobile": {
          "font-size": "14px",
          "line-height": "24px",
          "font-weight": "300"
        }
      },
      "input" : {
        "default": {
          "font-size": "14px",
          "line-height": "14px",
          "font-weight": "400"
        }
      }
    }
  }
}

The module export an invlid map at family value wich should be wrapped in a string:

$font-families: (
  sans: (
    family: Roboto, Helvetica, Arial, sans-serif,
    styles: (
      paragraph: (
        default: (
          font-size: 16px,
          line-height: 24px,
          font-weight: 300
        ),
        tablet: (
          font-size: 15px,
          line-height: 24px,
          font-weight: 300
        ),
        mobile: (
          font-size: 14px,
          line-height: 24px,
          font-weight: 300
        )
      ),
      input: (
        default: (
          font-size: 14px,
          line-height: 14px,
          font-weight: 400
        )
      )
    )
  )
);

I can easily fix the problem by wrapping single quotes in the JSON file like this:

{
  "family": "'Roboto, Helvetica, Arial, sans-serif'"
}

But maybe it can be fixed by the module for all.

command not found: json-to-css

I've installed the plugin, but when I run the command, this is not recognized.

You should probably explain how to install the command.

Not working for objects with keys containing spaces?

I was trying to convert a simple JSON file from
which converts to

using json-to-scss, which isn't a valid map. It would be nice if there was an option to use ' ' or " " around the keys and values. Possible future enhancement? 🤞

Feature request. Error handling

Thanks for that useful tool! So surprised that there is not so much out there in area of importing JSON into Sass...
The json-to-scss works great, but... I have a one minor problem
I don’t seem to grasp the error handling thingy...

	/usr/local/bin/json-to-scss ./_localnav.json --source-map --stop-on-error
	json-to-scss v1.6.2
	⚙️ /blah/layout/_localnav.json:
	👎 /blah/layout/_localnav.json: error(s) found while parsing; content skipped. File skipped!


	Process finished with exit code 0

Technically it's failed to generate correctly so I thought it should return non-zero....
A nice thing about non-zero code is it can trigger e. g. your IDE's console to pop-up on error only.

import error,"error(s) found while parsing; content skipped. File skipped! "

hi,my program is in es6 not commonjs.i have a config like

app.config.ts

const APP_CONFIG = {
  MOCK: {
    port: "1000", 
    apiPrefix: "/api", 
  },
  THEME: {
    scssVariable: {
      uni: {
        "color-primary": "#4cd961",
        "color-success": "#4cd964",
        "color-warning": "#f0ad4e",
        "color-error": "#dd524d"
      }
    }
  },
  ...
};
export default APP_CONFIG;

theme.js

const  config = require("../app.config.ts");
module.exports = config.THEME.scssVariable;

i want get theme.scss like this

$uni-color-primary: #4cd961;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;

when i use export default APP_CONFIG, it error error(s) found while parsing; content skipped. File skipped!
when i use module.exports = APP_CONFIG;,it's commonjs!so it work !
but i want use es6,because my program is in es6,use commonjs make error many place.....

Add on option to quote keys

It would be nice to add an option to wrap key name between quotes:

What the module does now:

$colors: (
  brand: (
    primary: #0044d7,
    secondary: #b40038
  ),
  grey-scale: (
    black: rgb(0, 0, 0),
    abbey: rgb(77, 77, 77),
    boulder: rgb(121, 121, 121),
    star-dust: rgb(153, 154, 156),
    silver: rgb(187, 189, 191),
    mercury: rgb(230, 230, 230),
    haze: rgb(246, 246, 246),
    white: rgb(250, 250, 250)
  ),
  status: (
    disabled: rgb(187, 189, 191),
    error: rgb(230, 32, 68),
    info: rgb(0, 181, 184),
    neutral: rgb(77, 77, 77),
    success: rgb(133, 195, 61),
    warning: rgb(230, 169, 53)
  )
);

What it could do:

$colors: (
  "brand": (
    "primary": #0044d7,
    "secondary": #b40038
  ),
  "grey-scale": (
    "black": rgb(0, 0, 0),
    "abbey": rgb(77, 77, 77),
    "boulder": rgb(121, 121, 121),
    "star-dust": rgb(153, 154, 156),
    "silver": rgb(187, 189, 191),
    "mercury": rgb(230, 230, 230),
    "haze": rgb(246, 246, 246),
    "white": rgb(250, 250, 250)
  ),
  "status": (
    "disabled": rgb(187, 189, 191),
    "error": rgb(230, 32, 68),
    "info": rgb(0, 181, 184),
    "neutral": rgb(77, 77, 77),
    "success": rgb(133, 195, 61),
    "warning": rgb(230, 169, 53)
  )
);

Without quotes, the maps seems to work properly until I try to get quoted keys like 'black', 'silver' or 'white':

.selector {
  background-color: map-get($grey-scale, black); // returns #000
}

.selector {
  background-color: map-get($grey-scale, 'black'); // returns null
}

For choosen coding standard and choosen linting reasons, I cannot change all the files by removing the quotes, so I ask you if you could add the option to export maps with it's SASS quotes standard, would it be possible?

The problem is also listed on SASS site ⚠️Heads up! paragraph.

Usage with Gulp

How can I execute with Gulp? Thanks in advice.

Feature request: support theme-ui spec

https://github.com/system-ui/theme-ui
https://theme-ui.com/theming

I've been using a lot the above spec and would love to see conversion support in json-to-scss for the above spec.

I assume things like:

fontSizes: [12, 14, 16]

should be converted to SASS list:

$fontSizes: 12px, 14px, 16px;

I have written regarding this here as well

--mo parameter problem occurs with more than 2 files

There are 3 files:
darkTheme.json

{
  "dark": {
    "bg-body": "#000000",
    "color-main": "#ffffff"
  }
}

lightTheme.json

{
  "light": {
    "bg-body": "#000000",
    "color-main": "#ffffff"
  }
}

redTheme.json

{
  "red": {
    "bg-body": "#000000",
    "color-main": "#ffffff"
  }
}

After launch:
json-to-scss './src/assets/scss/tokens/theme/*.json' ./src/assets/scss/variables/theme.scss --mo
A damaged file is collected:

$theme: (
  dark: (
    bg-body: #000000,
    color-main: #ffffff
  ),
  light: (
    bg-body: #ffffff,
    color-main: #000000
  )
),
  red: (
    bg-body: #ffffff,
    color-main: #000000
  )
);

Generate scss variables with no $tokens scope

Hey there!

Great library and thanks for the work.
It would be nice to generate the root-level keys in the json or js file as variable names. Is there a way to do this with the current lib?

Imagine the following example:

module.exports = {
  colors: {
    primary: 'blue',
    secondary: 'green',
  },
  grid-gaps: {
    sm: '2px',
    md: '4px',
  },
}

I would like to generate the scss like so:

$colors: (
   primary: 'blue',
   secondary: 'green'
)

$grid-gaps: (
   sm: '2px',
   md: '4px'
)

As far as I have seen this is only possible if i separate the js file into multiple files?

Thanks in advance!

Formatting from figma valid json fails to remove quotes prior to adding quotes

Seems complex json from figma that already has declared variable in quotes breaks. Added to line 83 on jsValueToSassString.js
value = value.replace(/'/g, '').replace(/"/g, ''); to remove all quotes prior to adding if single or double quotes. Totally unsure and would like your input as to if i'm doing this wrong. Please see Example json below. H1.value.fontFamily gets two double quotes with --v='dq' flag in the command

{
  "global": {
    "primaryColours": {
      "AABlack2B2929": {
        "value": "#2b2929",
        "type": "color"
      },
      "AAYellowFFD300": {
        "value": "#ffd300",
        "type": "color"
      },
      "AAWhiteFFFFFF": {
        "value": "#ffffff",
        "type": "color"
      }
    },
    "functionalColours": {
      "AAAqua06757F": {
        "value": "#06757f",
        "type": "color"
      },
      "AARubineDA0076": {
        "value": "#da0076",
        "type": "color"
      }
    },
    "scaleOfGrey": {
      "AAAccentGreyF6F6F6": {
        "value": "#f6f6f6",
        "type": "color"
      },
      "AALightGreyDCDDDE": {
        "value": "#dcddde",
        "type": "color"
      },
      "AADarkGrey626366": {
        "value": "#626366",
        "type": "color"
      }
    },
    "accentColours": {
      "AAYellow30FFF2B3": {
        "value": "#fff2b3",
        "type": "color"
      },
      "AABlack30BFBFBF": {
        "value": "#bfbfbf",
        "type": "color"
      },
      "AAYellow30TransparentFFD300": {
        "value": "#ffd3004d",
        "type": "color"
      },
      "AABlack30Transparent2B2929": {
        "value": "#2b29294d",
        "type": "color"
      },
      "AAAqua30B4D6D9": {
        "value": "#b4d6d9",
        "type": "color"
      },
      "AAAqua30Transparent06757F": {
        "value": "#06757f4d",
        "type": "color"
      },
      "AARubine30F4B3D6": {
        "value": "#f4b3d6",
        "type": "color"
      },
      "AARubine30TransparentDA0076": {
        "value": "#da00764d",
        "type": "color"
      },
      "blueFocus126EB3": {
        "value": "#126eb3",
        "type": "color"
      }
    },
    "elevationSmall": {
      "value": [
        {
          "color": "#00000029",
          "type": "dropShadow",
          "x": "0",
          "y": "1",
          "blur": "4",
          "spread": "0"
        },
        {
          "color": "#00000014",
          "type": "dropShadow",
          "x": "0",
          "y": "0",
          "blur": "2",
          "spread": "0"
        }
      ],
      "type": "boxShadow"
    },
    "elevationMedium": {
      "value": [
        {
          "color": "#00000029",
          "type": "dropShadow",
          "x": "0",
          "y": "2",
          "blur": "8",
          "spread": "0"
        },
        {
          "color": "#00000014",
          "type": "dropShadow",
          "x": "0",
          "y": "0",
          "blur": "2",
          "spread": "0"
        }
      ],
      "type": "boxShadow"
    },
    "elevationLarge": {
      "value": [
        {
          "color": "#00000029",
          "type": "dropShadow",
          "x": "0",
          "y": "4",
          "blur": "16",
          "spread": "0"
        },
        {
          "color": "#00000014",
          "type": "dropShadow",
          "x": "0",
          "y": "0",
          "blur": "2",
          "spread": "0"
        }
      ],
      "type": "boxShadow"
    },
    "fontFamiliesNewTransportAA": {
      "value": "New Transport AA",
      "type": "fontFamilies"
    },
    "lineHeight0": {
      "value": "28",
      "type": "lineHeights"
    },
    "lineHeights1": {
      "value": "24",
      "type": "lineHeights"
    },
    "lineHeights2": {
      "value": "20",
      "type": "lineHeights"
    },
    "lineHeights3": {
      "value": "48",
      "type": "lineHeights"
    },
    "fontWeightsNewTransportAA0": {
      "value": "Bold",
      "type": "fontWeights"
    },
    "fontWeightsNewTransportAA1": {
      "value": "Regular",
      "type": "fontWeights"
    },
    "fontSize0": {
      "value": "14",
      "type": "fontSizes"
    },
    "fontSize1": {
      "value": "16",
      "type": "fontSizes"
    },
    "fontSize2": {
      "value": "18",
      "type": "fontSizes"
    },
    "fontSize3": {
      "value": "20",
      "type": "fontSizes"
    },
    "fontSize4": {
      "value": "22",
      "type": "fontSizes"
    },
    "letterSpacing0": {
      "value": "0%",
      "type": "letterSpacing"
    },
    "letterSpacing1": {
      "value": "0.3%",
      "type": "letterSpacing"
    },
    "paragraphSpacing0": {
      "value": "0",
      "type": "paragraphSpacing"
    },
    "paragraphSpacing1": {
      "value": "8",
      "type": "paragraphSpacing"
    },
    "paragraphSpacing2": {
      "value": "16",
      "type": "paragraphSpacing"
    },
    "H1": {
      "value": {
        "fontFamily": "{fontFamiliesNewTransportAA}",
        "fontWeight": "{fontWeightsNewTransportAA0}",
        "lineHeight": "{baseFontSize} * 1.5",
        "fontSize": "{baseFontSize} * 1.375",
        "letterSpacing": "{letterSpacing0}",
        "paragraphSpacing": "{paragraphSpacing0}",
        "textCase": "{textCaseNone}",
        "textDecoration": "{textDecorationNone}"
      },
      "type": "typography"
    },
    "bodyParagraphRegular": {
      "value": {
        "fontFamily": "{fontFamiliesNewTransportAA}",
        "fontWeight": "{fontWeightsNewTransportAA1}",
        "lineHeight": "{baseFontSize} * 1.5",
        "fontSize": "{baseFontSize}",
        "letterSpacing": "{letterSpacing0}",
        "paragraphSpacing": "{paragraphSpacing2}",
        "textCase": "{textCaseNone}",
        "textDecoration": "{textDecorationNone}"
      },
      "type": "typography"
    }
  },
  "$themes": []
}

rlapoele / json-to-scss Goto Github PK

json-to-scss's People

Contributors

Stargazers

Watchers

Forkers

json-to-scss's Issues

Recommend Projects

Recommend Topics

Recommend Org

Jobs