feat: implement Css converter (#52)

Author: dobromir-hristov

cli.js

@@ -27,7 +27,7 @@ const argv = yargs // eslint-disable-line
     alias: 'f',
     describe: 'Format to generate - sass,less,stylus',
     type: 'string',
-    choices: ['sass', 'scss', 'less', 'styl', 'json'],
+    choices: ['sass', 'scss', 'less', 'styl', 'css', 'json'],
     nargs: 1,
     demand: true
   })

src/converters/Converter.js

@@ -25,6 +25,8 @@ class Converter {
   flattenMapsAfter = -1
   /** @type {array} - config keys to preserve */
   preserveKeys = []
+  prefixContent = ''
+  suffixContent = ''
 
   /**
    * @param opts
@@ -175,7 +177,7 @@ class Converter {
    */
   convert () {
     let setting
-    let buffer = ''
+    let buffer = this.prefixContent
     for (setting in this.theme) {
       if (this.theme.hasOwnProperty(setting) && this._isSettingEnabled(setting)) {
         const data = this.theme[setting]
@@ -188,6 +190,7 @@ class Converter {
         buffer += body
       }
     }
+    buffer = buffer += this.suffixContent
     return buffer
   }
 

src/converters/Css.js

@@ -0,0 +1,27 @@
+import Converter from './Converter.js'
+
+class CssConverter extends Converter {
+  format = 'css'
+  prefixContent = '\n:root {'
+  suffixContent = '}'
+
+  _buildVar (name, value) {
+    return `--${name}: ${value};\n`
+  }
+
+  _convertObjectToMap (prop, data) {
+    return this._convertObjectToVar(prop, data)
+  }
+
+  _sanitizePropValue (value) {
+    if (Array.isArray(value)) return value.join(', ')
+    return value
+  }
+
+  _propertyNameSanitizer (property) {
+    property = super._propertyNameSanitizer(property)
+    return property.replace(/\./g, '\\.')
+  }
+}
+
+export default CssConverter

src/converters/index.js

@@ -2,8 +2,9 @@ import Less from './Less'
 import Stylus from './Stylus'
 import Sass from './Sass'
 import Scss from './Scss'
+import Css from './Css'
 import JSON from './JSON'
 
 export default {
-  Less, Sass, Scss, Stylus, JSON
+  Less, Sass, Scss, Stylus, Css, JSON
 }

src/index.js

@@ -9,7 +9,8 @@ const allowedFormatsMap = {
   sass: converters.Sass,
   scss: converters.Scss,
   less: converters.Less,
-  json: converters.JSON
+  json: converters.JSON,
+  css: converters.Css,
 }
 
 /**

tests/specs/converters/Css.spec.js

@@ -0,0 +1,49 @@
+import CssConverter from '../../../src/converters/Css'
+import testConfig from '../../tailwind.config'
+import testConfigDefault from '../../tailwind-default.config'
+import { resolveConfig } from '../../../src/converters/utils'
+
+describe('Css converter', () => {
+  describe('full config', () => {
+    it('Converts to flat variables', () => {
+      const converter = new CssConverter({
+        config: resolveConfig(testConfigDefault)
+      })
+      expect(converter.convert()).toMatchSnapshot()
+    })
+  })
+
+  it('converts flat and nested, with the same result', () => {
+    let converter = new CssConverter({
+      config: resolveConfig(testConfig),
+      flat: true
+    })
+    const flatResult = converter.convert()
+
+    converter = new CssConverter({
+      config: resolveConfig(testConfig),
+      flat: false
+    })
+
+    const nestedResult = converter.convert()
+
+    expect(flatResult).toBe(nestedResult)
+  })
+
+  it('Converts to flat variables with prefix', () => {
+    const converter = new CssConverter({
+      config: resolveConfig(testConfig),
+      flat: true,
+      prefix: 'tw'
+    })
+    expect(converter.convert()).toMatchSnapshot()
+  })
+
+  it('Converts to nested map with prefix', () => {
+    const converter = new CssConverter({
+      config: resolveConfig(testConfig),
+      prefix: 'tw'
+    })
+    expect(converter.convert()).toMatchSnapshot()
+  })
+})