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

Author: dobromir-hristov

src/converters/Converter.js

@@ -9,6 +9,10 @@ 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'
@@ -25,7 +29,10 @@ class Converter {
    * @param {Boolean} [opts.quotedKeys] - Should map keys be quoted
    */
   constructor (opts) {
-    this.config = opts.config.theme
+    const { theme, ...rest } = opts.config
+    this.theme = theme
+    this.configs = rest
+
     this.flat = opts.flat
     this.prefix = opts.prefix || ''
     this.quotedKeys = opts.quotedKeys || false
@@ -136,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
@@ -153,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

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/index.spec.js

@@ -2,6 +2,7 @@ const ConvertTo = require('../../src/index')
 const path = require('path')
 
 const testConfig = require('../tailwind.config')
+const testConfigDisabledPlugins = require('../tailwind-disabled-plugins.config')
 const fse = require('fs-extra')
 
 jest.mock('fs-extra')
@@ -39,6 +40,37 @@ describe('Tailwind Options Exporter', () => {
     expect(converterInstance.converterInstance.format).toBe('scss')
   })
 
+  it('skips options that are disabled in `corePlugins` using the object pattern', () => {
+    let converterInstance = new ConvertTo({
+      config: testConfigDisabledPlugins,
+      format: 'scss'
+    })
+
+    const scssConfig = converterInstance.convert()
+    // assert it does not contain a few properties
+    expect(scssConfig).not.toContain('borderRadius')
+    expect(scssConfig).not.toContain('backgroundSize')
+    // assert the whole snapshot
+    expect(scssConfig).toMatchSnapshot()
+  })
+
+  it('skips options that are disabled in `corePlugins` using the array pattern', () => {
+    let converterInstance = new ConvertTo({
+      config: {
+        ...testConfig,
+        corePlugins: ['cursor']
+      },
+      format: 'scss'
+    })
+
+    const scssConfig = converterInstance.convert()
+    // assert it does not contain a few properties
+    expect(scssConfig).toContain('cursor')
+    expect(scssConfig).not.toContain('backgroundSize')
+    // assert the whole snapshot
+    expect(scssConfig).toMatchSnapshot()
+  })
+
   it('it properly includes the provided configuration properties', () => {
     let converterInstance = new ConvertTo({
       config: testConfig,

tests/tailwind-disabled-plugins.config.js

@@ -35,6 +35,7 @@ module.exports = {
     flexGrow: false,
     flexShrink: false,
     fontSize: false,
+    fontWeight: false,
     height: false,
     inset: false,
     letterSpacing: false,
@@ -43,6 +44,7 @@ module.exports = {
     margin: false,
     maxHeight: false,
     minHeight: false,
+    maxWidth: false,
     objectPosition: false,
     opacity: false,
     order: false,