Merge pull request #14 from dobromir-hristov/feat/allow-optional-quoted-keys

* feat: enable reading corePlugins settings, to disable generating unnecessary variables. (#15)

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

@@ -9,23 +9,33 @@ class Converter {
 
   /** @type {string} - the format and file extension */
   format
+  /** @type {object} - the resolved theme configuration settings */
+  theme = {}
+  /** @type {object} - tailwind configurations */
+  configs = {}
 
   /** @type {string} - the symbol that starts a map */
   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
+    const { theme, ...rest } = opts.config
+    this.theme = theme
+    this.configs = rest
 
+    this.flat = opts.flat
     this.prefix = opts.prefix || ''
+    this.quotedKeys = opts.quotedKeys || false
   }
 
   /**
@@ -133,15 +143,15 @@ class Converter {
    * @returns {string}
    */
   convert () {
-    let metric
+    let setting
     let buffer = ''
-    for (metric in this.config) {
-      if (this.config.hasOwnProperty(metric)) {
-        const data = this.config[metric]
+    for (setting in this.theme) {
+      if (this.theme.hasOwnProperty(setting) && this._isSettingEnabled(setting)) {
+        const data = this.theme[setting]
 
         const body = this.flat
-          ? this._convertObjectToVar(metric, data)
-          : this._convertObjectToMap(metric, data)
+          ? this._convertObjectToVar(setting, data)
+          : this._convertObjectToMap(setting, data)
 
         buffer += '\n'
         buffer += body
@@ -150,6 +160,18 @@ class Converter {
     return buffer
   }
 
+  /**
+   * Checks whether a setting is enabled or not.
+   * @param {string} key
+   * @return {boolean}
+   * @private
+   */
+  _isSettingEnabled (key) {
+    const { corePlugins } = this.configs
+    if (!corePlugins) return true
+    return Array.isArray(corePlugins) ? corePlugins.includes(key) : corePlugins[key] !== false
+  }
+
   /**
    * Sanitizes a value, escaping and removing symbols
    * @param {*} value
@@ -184,7 +206,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/__snapshots__/index.spec.js.snap

@@ -1762,3 +1762,42 @@ $zIndex: (
 );
 "
 `;
+
+exports[`Tailwind Options Exporter skips options that are disabled in \`corePlugins\` using the array pattern 1`] = `
+"/* Converted Tailwind Config to scss */
+$cursor: (
+  auto: auto,
+  default: default,
+  pointer: pointer,
+  wait: wait,
+  text: text,
+  move: move,
+  not-allowed: not-allowed,
+);
+"
+`;
+
+exports[`Tailwind Options Exporter skips options that are disabled in \`corePlugins\` using the object pattern 1`] = `
+"/* Converted Tailwind Config to scss */
+$screens: (
+  sm: 640px,
+  md: 768px,
+);
+
+$fontFamily: (
+  display: (Gilroy,sans-serif),
+  body: (Graphik,sans-serif),
+);
+
+$borderWidth: (
+  0: 0,
+  default: 1px,
+);
+
+$minWidth: (
+  0: 0,
+  full: 100%,
+  half: 50%,
+);
+"
+`;

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)