[REQUEST] Support for nested maps

[fuhlig]

Hello,

I am using sass-export for design-systems to have the sass-variables as "single source of truth" and use the data to render styleguides.

An issue I came across is that nested maps are not supported.
Is it possible to get support? : )

Input:

// @sass-export-section="brandColors"
$color-red: #f00;
$color-green: #0f0;
// @end-sass-export-section

// @sass-export-section="semanticColors"
$color-primary: $color-red;
$color-secondary: $color-green;

$color-black: #000;
$color-white: #fff;
// @end-sass-export-section

$colors: (
    primary: (
        base:   $color-primary,
        light:  lighten($color-primary, 10%),
        dark:   darken($color-primary, 10%)
    ),
    secondary: (
        base:   $color-secondary,
        light:  lighten($color-secondary, 10%),
        dark:   darken($color-secondary, 10%)
    black: (
        base:   $color-black,
        light:  lighten($color-black, 10%)
    ),
    white: (
        base:   $color-white
    )
);

Output:

{
  "variables": [
    {
      "name": "$colors",
      "value": "(primary: (base:   $color-primary,light:  lighten($color-primary, 10%),dark:   darken($color-primary, 10%)),secondary: (base:   $color-secondary,light:  lighten($color-secondary, 10%),dark:   darken($color-secondary, 10%)black: (base:   $color-black,light:  lighten($color-black, 10%)),white: (base:   $color-white))",
      "mapValue": [
        {
          "name": "primary",
          "value": "(base:   $color-primary",
          "compiledValue": ""
        },
        {
          "name": "light",
          "value": "lighten($color-primary",
          "compiledValue": ""
        },
        {
          "name": "dark",
          "value": "darken($color-primary",
          "compiledValue": ""
        },
        {
          "name": "secondary",
          "value": "(base:   $color-secondary",
          "compiledValue": ""
        },
        {
          "name": "light",
          "value": "lighten($color-secondary",
          "compiledValue": ""
        },
        {
          "name": "dark",
          "value": "darken($color-secondary",
          "compiledValue": ""
        },
        {
          "name": "black",
          "value": "(base:   $color-black",
          "compiledValue": ""
        },
        {
          "name": "light",
          "value": "lighten($color-black",
          "compiledValue": ""
        },
        {
          "name": "white",
          "value": "(base:   $color-white",
          "compiledValue": ""
        }
      ],
      "compiledValue": ""
    }
  ],
  "brandColors": [
    {
      "name": "$color-red",
      "value": "#f00",
      "compiledValue": ""
    },
    {
      "name": "$color-green",
      "value": "#0f0",
      "compiledValue": ""
    }
  ],
  "semanticColors": [
    {
      "name": "$color-primary",
      "value": "$color-red",
      "compiledValue": ""
    },
    {
      "name": "$color-secondary",
      "value": "$color-green",
      "compiledValue": ""
    },
    {
      "name": "$color-black",
      "value": "#000",
      "compiledValue": ""
    },
    {
      "name": "$color-white",
      "value": "#fff",
      "compiledValue": ""
    }
  ]
}

Error:

{ Error: unclosed parenthesis
    at Object.module.exports.renderSync (PROJECT\node_modules\node-sass\lib\index.js:439:16)
    at Converter.renderPropertyValue (PROJECT\node_modules\sass-export\dist\app\converter\converter.js:79:33)
    at declaration.mapValue.map (PROJECT\node_modules\sass-export\dist\app\converter\converter.js:44:61)
    at Array.map (native)
    at structuredDeclaration.(anonymous function).map (PROJECT\node_modules\sass-export\dist\app\converter\converter.js:43:42)
    at Array.map (native)
    at groups.forEach (PROJECT\node_modules\sass-export\dist\app\converter\converter.js:39:62)
    at Array.forEach (native)
    at Converter.compileStructure (PROJECT\node_modules\sass-export\dist\app\converter\converter.js:37:16)
    at Converter.getStructured (PROJECT\node_modules\sass-export\dist\app\converter\converter.js:32:38)
  status: 1,
  file: 'stdin',
  line: 60,
  column: 38,
  message: 'unclosed parenthesis',
  formatted: 'Error: unclosed parenthesis\n        on line 60 of stdin\n>> #sass-export-id.nested{content:"#{(one: 1}";}\n   -------------------------------------^\n' }

[civan]

Hello there, thanks for reporting this, I will take a look.

[fuhlig]

Thanks for considering and your quick reply!

[fuhlig]

@civan
Any update on this?

[joelschou]

Just chiming to say this would be an excellent feature addition. I've been fighting with sass-extract for a few days now and tried this one out, only to discover the same parenthesis issue (regex is fun!).

Once you do have maps working better, I'm curious if you'll encounter the same problem I did w/r/t using get-function(...) in a variable of any type.

[ryanjwilke]

Just hopping in to say I would love this feature as well. Without it, this library is unfortunately unusable for me. It's very close though. I love the CLI tool already. This is definitely what I'm looking for.

[tonysmithswisslog]

Yeah this is a bit disappointing. In order to get this to work I would have to restructure my CSS. However, it is in "Google Material" format so that really isn't an option.

$mat-blue-grey: (
50: #eceff1,
100: #cfd8dc,
200: #b0bec5,
300: #90a4ae,
400: #78909c,
500: #607d8b,
600: #546e7a,
700: #455a64,
800: #37474f,
900: #263238,
A100: #cfd8dc,
A200: #b0bec5,
A400: #78909c,
A700: #455a64,

contrast: (
50: $dark-primary-text,
100: $dark-primary-text,
200: $dark-primary-text,
300: $dark-primary-text,
400: $light-primary-text,
500: $light-primary-text,
600: $light-primary-text,
700: $light-primary-text,
800: $light-primary-text,
900: $light-primary-text,
A100: $dark-primary-text,
A200: $dark-primary-text,
A400: $light-primary-text,
A700: $light-primary-text,
)
);

[jakobwarrer]

I would really love this feature as well.

edit: I made a PR #70 that has been merged that adds nested map functionality.