feat: add quoting keys

Author: dobromir-hristov

README.md

@@ -35,7 +35,7 @@ Make a package.json script and run it for convenience
 ```json
 {
   "scripts": {
-    "export-tailwind-config": "tailwindcss-export-config --config=path/to/tailwind.config.js --destination=destination/of/generated/tailwind-variables --format=scss"
+    "export-tailwind-config": "tailwindcss-export-config --config=path/to/tailwind.config.js --destination=destination/of/generated/tailwind-variables --format=scss --quoted-keys=true"
   }
 }
 ```
@@ -50,7 +50,8 @@ const converter = new TailwindExportConfig({
   destination: 'converted/file/destination',
   format: 'scss',
   prefix: 'tw',
-  flat: true
+  flat: true,
+  quotedKeys: true
 })
 
 // writeToFile returns a promise so we can chain off it
@@ -72,7 +73,8 @@ config|String,Object|true| Tailwindcss config path or config object to transform
 destination|String|true| Destination to save converted file
 format|String|true| The format in which to convert the file
 prefix|String|false| An optional prefix for each variable name
-flat|Boolean|false| Optionally transforms the variables from nested maps to flat level variables. Less does not support nested maps so we default to flat for them always.
+flat|Boolean|false| Optionally transforms the variables from nested maps to flat level variables. Less does not support nested maps so we default to flat for them always. Defaults to `false`.
+quoted-keys|Boolean|false| (`quotedKeys` in the Node API) - Whether keys in maps should be quoted or not. We recommend to have this set to `true`. Defaults to `false`.
 
 ## Example export
 Lets get a portion of the Tailwind config
@@ -209,6 +211,30 @@ $tw-colors-pink-900: #702459;
 $tw-colors-cyan: #9cdbff;
 ```
 
+### Quoted Keys
+
+SASS and other preprocessors recommend defining map keys in quotes. It is possible comply with that, by using the optional `quotedKeys` setting.
+
+```bash
+tailwindcss-export-config --config=tailwind.config.js --destination=tailwind-variables --format=scss --quoted-keys=true
+```
+
+```scss
+$fontFamily: (
+  "display": (Gilroy,sans-serif),
+  "body": (Graphik,sans-serif),
+);
+
+$colors: (
+  //... other vars
+  "pink-700": #b83280,
+  "pink-800": #97266d,
+  "pink-900": #702459,
+  "cyan": #9cdbff,
+);
+
+```
+
 ## Notice
 
 This branch works with v1.x of Tailwindcss. If you are using the older 0.x version, please use `legacy` version

cli.js

@@ -42,6 +42,12 @@ const argv = yargs // eslint-disable-line
     boolean: true,
     nargs: 1
   })
+  .option('quoted-keys', {
+    describe: 'Should map keys be quoted',
+    type: 'boolean', /* array | boolean | string */
+    boolean: true,
+    nargs: 1
+  })
   .argv
 
 try {
@@ -50,7 +56,8 @@ try {
     destination: argv.destination,
     format: argv.format,
     prefix: argv.prefix,
-    flat: argv.flat
+    flat: argv.flat,
+    quotedKeys: argv['quoted-keys']
   })
   converter.writeToFile()
     .then((options) => {

src/converters/Converter.js

@@ -14,18 +14,21 @@ class Converter {
   mapOpener = '(\n'
   /** @type {string} - the symbol that ends a map */
   mapCloser = ')'
+  /** @type {boolean} - should map keys be quoted */
+  quotedKeys = false
 
   /**
    * @param opts
    * @param {Object} opts.config - Tailwind config object
    * @param {Boolean} opts.flat - Is flat or not
    * @param {String} opts.prefix - If we want a variable prefix
+   * @param {Boolean} [opts.quotedKeys] - Should map keys be quoted
    */
   constructor (opts) {
     this.config = opts.config.theme
     this.flat = opts.flat
-
     this.prefix = opts.prefix || ''
+    this.quotedKeys = opts.quotedKeys || false
   }
 
   /**
@@ -184,7 +187,7 @@ class Converter {
    * @private
    */
   _objectEntryKeySanitizer (key) {
-    return key
+    return this.quotedKeys ? `"${key}"` : key
   }
 }
 

src/converters/Sass.js

@@ -12,7 +12,7 @@ class SassConverter extends Converter {
   }
 
   _buildObjectEntry (key, value, indent, index, metricIndex = 0) {
-    return indentWith(`${key}: ${this._sanitizePropValue(value)},`, indent + ((!index && !metricIndex) ? 0 : 1))
+    return indentWith(`${this._objectEntryKeySanitizer(key)}: ${this._sanitizePropValue(value)},`, indent + ((!index && !metricIndex) ? 0 : 1))
   }
 }
 

src/converters/Stylus.js

@@ -11,7 +11,7 @@ class StylusConverter extends Converter {
   }
 
   _objectEntryKeySanitizer (prop) {
-    if (/\d/.test(prop)) return `"${prop}"`
+    if (/\d/.test(prop) || this.quotedKeys) return `"${prop}"`
     return prop
   }
 }

src/index.js

@@ -22,6 +22,7 @@ class ConvertTo {
    * @param {String} options.destination - Output destination
    * @param {Boolean} [options.flat] - Whether the variables should be nested maps or flat level variables
    * @param {String} options.format - The desired format
+   * @param {Boolean} options.quotedSassKeys - Whether SASS keys should be quoted. Both for Sass and SCSS.
    */
   constructor (options) {
     if (!allowedFormatsMap.hasOwnProperty(options.format)) {
@@ -32,7 +33,7 @@ class ConvertTo {
     const Converter = allowedFormatsMap[options.format]
     const config = resolveConfig(options.config)
 
-    this.converterInstance = new Converter({ config, prefix: options.prefix, flat: options.flat })
+    this.converterInstance = new Converter({ ...options, config })
   }
 
   /**

tests/specs/converters/Sass.spec.js

@@ -11,6 +11,16 @@ describe('Sass converter', () => {
     expect(converter.convert()).toMatchSnapshot()
   })
 
+  it('wraps keys in quotes', () => {
+    const converter = new SassConverter({
+      config: resolveConfig(testConfig),
+      quotedKeys: true
+    })
+    const result = converter.convert()
+    expect(result).toContain('$screens: ("sm":')
+    expect(result).toMatchSnapshot()
+  })
+
   it('Converts to flat variables', () => {
     const converter = new SassConverter({
       config: resolveConfig(testConfig),

tests/specs/converters/Scss.spec.js

@@ -10,6 +10,16 @@ describe('Scss converter', () => {
     expect(converter.convert()).toMatchSnapshot()
   })
 
+  it('converts a nested map with quoted keys', () => {
+    const converter = new ScssConverter({
+      config: resolveConfig(testConfig),
+      quotedKeys: true
+    })
+    const result = converter.convert()
+    expect(result).toContain('"sm": 640px')
+    expect(result).toMatchSnapshot()
+  })
+
   it('Converts to flat variables', () => {
     const converter = new ScssConverter({
       config: resolveConfig(testConfig),

tests/specs/converters/Stylus.spec.js

@@ -11,6 +11,16 @@ describe('Stylus converter', () => {
     expect(converter.convert()).toMatchSnapshot()
   })
 
+  it('Converts to nested map and wraps keys in quotes', () => {
+    const converter = new StylusConverter({
+      config: resolveConfig(testConfig),
+      quotedKeys: true
+    })
+    const result = converter.convert()
+    expect(result).toContain('"sm": 640px')
+    expect(result).toMatchSnapshot()
+  })
+
   it('Converts to flat variables', () => {
     const converter = new StylusConverter({
       config: resolveConfig(testConfig)