Merge pull request #115 from tailwindcss/config-default

Support default values in config function

Author: reinink

__tests__/configFunction.test.js

@@ -0,0 +1,82 @@
+import postcss from 'postcss'
+import plugin from '../src/lib/evaluateTailwindFunctions'
+
+function run(input, opts = {}) {
+  return postcss([plugin(() => opts)]).process(input)
+}
+
+test("it looks up values in the config using dot notation", () => {
+  const input = `
+    .banana { color: config('colors.yellow'); }
+  `
+
+  const output = `
+    .banana { color: #f7cc50; }
+  `
+
+  return run(input, {
+    colors: {
+      yellow: '#f7cc50',
+    }
+  }).then(result => {
+    expect(result.css).toEqual(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
+test("quotes are optional around the lookup path", () => {
+  const input = `
+    .banana { color: config(colors.yellow); }
+  `
+
+  const output = `
+    .banana { color: #f7cc50; }
+  `
+
+  return run(input, {
+    colors: {
+      yellow: '#f7cc50',
+    }
+  }).then(result => {
+    expect(result.css).toEqual(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
+test("a default value can be provided", () => {
+  const input = `
+    .cookieMonster { color: config('colors.blue', #0000ff); }
+  `
+
+  const output = `
+    .cookieMonster { color: #0000ff; }
+  `
+
+  return run(input, {
+    colors: {
+      yellow: '#f7cc50',
+    }
+  }).then(result => {
+    expect(result.css).toEqual(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})
+
+test("quotes are preserved around default values", () => {
+  const input = `
+    .heading { font-family: config('fonts.sans', "Helvetica Neue"); }
+  `
+
+  const output = `
+    .heading { font-family: "Helvetica Neue"; }
+  `
+
+  return run(input, {
+    fonts: {
+      serif: "Constantia",
+    }
+  }).then(result => {
+    expect(result.css).toEqual(output)
+    expect(result.warnings().length).toBe(0)
+  })
+})

src/lib/evaluateTailwindFunctions.js

@@ -6,8 +6,8 @@ export default function(config) {
 
   return functions({
     functions: {
-      config: function (path) {
-        return _.get(options, _.trim(path, `'"`))
+      config: function (path, defaultValue) {
+        return _.get(options, _.trim(path, `'"`), defaultValue)
       }
     }
   })