plentycode/sass-export

Issue when using comments in Sass Map

lramel opened this issue · 3 comments

Hi,

I've noticed when trying to run the sass-export against our typography variables, I'm getting an error as our Sass maps include comments which give the expected pixel values based on the browsers default font-size.

Example Input:

// Default font-size - 16px
$font-size: (
    small: 0.5rem, // 8px
    medium: 1rem, // 16px
    large: 1.5rem // 24px
);

Output:
Error: Invalid CSS after "...(small: 0.5rem,": expected expression (e.g. 1px, bold), was "// 8pxmedium: 1rem,"

It looks like it's possibly including the comments when parsing the values rather than ignoring them?

It's not a huge deal as I can move the comments to a different location but it would be nice if we could still have them inline.

Thanks for the package, it's been a great help!

Thank you for the fix!

civan commented

thank you for reporting it!

@civan hey I'm actually getting this error with inline comments in v 1.0.6. did something change ? Thanks for your work on this package !
my-file.scss

$spacer: 1rem;

// custom spacing scale (inspired by Tailwind, more granular than default Bootstrap)
$spacers: (
  0: 0,
  1: .25rem,  // 4px
  2: .5rem,   // 8px
  3: .75rem,  // 12px
  4: 1rem,    // 16px
  5: 1.25rem, // 20px
  6: 1.5rem,  // 24px
  8: 2rem,    // 32px
  10: 2.5rem, // 40px
  12: 3rem,   // 48px
  16: 4rem,   // 64px
  20: 5rem,   // 80px
  24: 6rem,   // 96px
  32: 8rem,   // 128px
  40: 10rem,  // 160px
  48: 12rem,  // 192px
  56: 14rem,  // 224px
  64: 16rem   // 256px
);

// width/height utility class values
$sizes: (
  25: 25%,
  33: 33%,
  50: 50%,
  66: 66%,
  75: 75%,
  100: 100%,
  auto: auto
);

Command I ran:
sass-export src/settings/my-file.scss -o test.json

Error: Invalid CSS after "...: 0, 1: .25rem,": expected expression (e.g. 1px, bold), was "// 4px 2: .5rem,   "
    at Object.module.exports.renderSync (/Users/ihor/.nvm/versions/node/v14.7.0/lib/node_modules/sass-export/node_modules/node-sass/lib/index.js:441:16)
    at Converter.renderPropertyValue (/Users/ihor/.nvm/versions/node/v14.7.0/lib/node_modules/sass-export/dist/app/converter/converter.js:79:33)
    at /Users/ihor/.nvm/versions/node/v14.7.0/lib/node_modules/sass-export/dist/app/converter/converter.js:18:46
    at Array.map (<anonymous>)
    at Converter.getArray (/Users/ihor/.nvm/versions/node/v14.7.0/lib/node_modules/sass-export/dist/app/converter/converter.js:17:35)
    at Object.<anonymous> (/Users/ihor/.nvm/versions/node/v14.7.0/lib/node_modules/sass-export/bin/sass-export:48:25)
    at Module._compile (internal/modules/cjs/loader.js:1256:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1277:10)
    at Module.load (internal/modules/cjs/loader.js:1105:32)
    at Function.Module._load (internal/modules/cjs/loader.js:967:14) {
  status: 1,
  file: 'stdin',
  line: 36,
  column: 51,
  formatted: 'Error: Invalid CSS after "...: 0, 1: .25rem,": expected expression (e.g. 1px, bold), was "// 4px 2: .5rem,   "\n' +
    '        on line 36 of stdin\n' +
    '>> port-id.spacers{content:"#{( 0: 0, 1: .25rem,  // 4px 2: .5rem,   // 8px 3: \n' +
    '   ------------------------------------------^\n'
}