From 8e7b2dc1fa52bc513acbb683e9bf148a44c3abfd Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 25 Aug 2017 09:40:46 -0400 Subject: [PATCH] Add basic background color generator Supports specifying background colors as an array of colors, or an object where the label is what you want to name that color as a background utility, and the value is the color to use. Everything can be specified as either camelCase or kebab-case so you don't need to quote the shit out of everything but classes will always be rendered as kebab-case. --- docs/source/_assets/less/main.less | 5 ++ src/default-config.js | 121 ++++++++++++++++++++++++++++ src/generators/background-colors.js | 25 ++++++ src/tailwind.js | 48 +++++------ 4 files changed, 175 insertions(+), 24 deletions(-) create mode 100644 src/default-config.js create mode 100644 src/generators/background-colors.js diff --git a/docs/source/_assets/less/main.less b/docs/source/_assets/less/main.less index d85df264f..85ff820e1 100644 --- a/docs/source/_assets/less/main.less +++ b/docs/source/_assets/less/main.less @@ -5,8 +5,13 @@ @class "py-2"; background-color: green; } + @media (--breakpoint-md) { + background-color: orange; + } } +@tailwind utilities; + .bg-light { background: #fff; } diff --git a/src/default-config.js b/src/default-config.js new file mode 100644 index 000000000..1ebb88545 --- /dev/null +++ b/src/default-config.js @@ -0,0 +1,121 @@ +module.exports = { + breakpoints: { + sm: '576px', + md: '768px', + lg: '992px', + xl: '1200px', + }, + colors: { + black: '#000000', + grey900: '#212b35', + grey800: '#404e5c', + grey700: '#647382', + grey600: '#919eab', + grey500: '#c5ced6', + grey400: '#dfe3e8', + grey300: '#f0f2f5', + grey200: '#f7f9fa', + white: '#ffffff', + redDark: '#d43633', + red: '#f25451', + redLight: '#fa8785', + redLightest: '#fff1f0', + orangeDark: '#f29500', + orange: '#ffb82b', + orangeLight: '#ffd685', + orangeLightest: '#fff8eb', + yellowDark: '#ffc400', + yellow: '#ffe14a', + yellowLight: '#ffea83', + yellowLightest: '#fffbe5', + greenDark: '#34ae4c', + green: '#57d06f', + greenLight: '#b1f3be', + greenLightest: '#eefff1', + tealDark: '#249e9a', + teal: '#4dc0b5', + tealLight: '#9eebe4', + tealLightest: '#eefffd', + blueDark: '#3687c8', + blue: '#4aa2ea', + blueLight: '#acdaff', + blueLightest: '#f1f9ff', + indigoDark: '#4957a5', + indigo: '#6574cd', + indigoLight: '#bcc5fb', + indigoLightest: '#f4f5ff', + purpleDark: '#714cb4', + purple: '#976ae6', + purpleLight: '#ceb3ff', + purpleLightest: '#f7f3ff', + pinkDark: '#d84f7d', + pink: '#f66d9b', + pinkLight: '#ffa5c3', + pinkLightest: '#fdf2f5', + }, + // backgroundColors: { + // 'light': 'white', + // 'light-soft': 'grey-200', + // 'light-softer': 'grey-300', + // 'light-softest': 'grey-400', + // 'dark': 'grey-900', + // 'dark-soft': 'grey-800', + // 'dark-softer': 'grey-700', + // 'dark-softest': 'grey-600', + // 'red-dark': 'red-dark', + // 'red': 'red', + // 'red-light': 'red-light', + // 'red-lightest': 'red-lightest', + // 'orange-dark': 'orange-dark', + // 'orange': 'orange', + // 'orange-light': 'orange-light', + // 'orange-lightest': 'orange-lightest', + // 'yellow-dark': 'yellow-dark', + // 'yellow': 'yellow', + // 'yellow-light': 'yellow-light', + // 'yellow-lightest': 'yellow-lightest', + // 'green-dark': 'green-dark', + // 'green': 'green', + // 'green-light': 'green-light', + // 'green-lightest': 'green-lightest', + // 'teal-dark': 'teal-dark', + // 'teal': 'teal', + // 'teal-light': 'teal-light', + // 'teal-lightest': 'teal-lightest', + // 'blue-dark': 'blue-dark', + // 'blue': 'blue', + // 'blue-light': 'blue-light', + // 'blue-lightest': 'blue-lightest', + // 'indigo-dark': 'indigo-dark', + // 'indigo': 'indigo', + // 'indigo-light': 'indigo-light', + // 'indigo-lightest': 'indigo-lightest', + // 'purple-dark': 'purple-dark', + // 'purple': 'purple', + // 'purple-light': 'purple-light', + // 'purple-lightest': 'purple-lightest', + // 'pink-dark': 'pink-dark', + // 'pink': 'pink', + // 'pink-light': 'pink-light', + // 'pink-lightest': 'pink-lightest', + // }, + backgroundColors: [ + 'blue-dark', + 'blue', + 'blue-lightest', + 'indigo', + 'indigo-light', + 'purple', + 'purple-lightest', + 'pink-dark', + 'pink', + ], + // backgroundColors: { + // primary: 'blue', + // primaryDark: 'blueDark', + // primaryLight: 'blueLight', + // secondary: 'orange', + // secondaryDark: 'orangeDark', + // secondaryLight: 'orangeLight', + // } +} diff --git a/src/generators/background-colors.js b/src/generators/background-colors.js new file mode 100644 index 000000000..bf213eb29 --- /dev/null +++ b/src/generators/background-colors.js @@ -0,0 +1,25 @@ +const postcss = require('postcss') +const _ = require('lodash') + +function findColor(colors, color) { + return _.mapKeys(colors, (value, key) => { + return _.camelCase(key) + })[_.camelCase(color)] +} + +module.exports = function ({ colors, backgroundColors }) { + if (_.isArray(backgroundColors)) { + backgroundColors = _(backgroundColors).map(color => [color, color]).fromPairs() + } + + return _(backgroundColors).toPairs().map(([className, colorName]) => { + const kebabClass = _.kebabCase(className) + + return postcss.rule({ + selector: `.bg-${kebabClass}` + }).append({ + prop: 'background-color', + value: findColor(colors, colorName) + }) + }).value() +} diff --git a/src/tailwind.js b/src/tailwind.js index aef6e0664..de7591853 100644 --- a/src/tailwind.js +++ b/src/tailwind.js @@ -1,20 +1,10 @@ -const _ = require('lodash'); -const postcss = require('postcss'); -const cssnext = require('postcss-cssnext'); - -function defaultOptions() { - return { - breakpoints: { - sm: '576px', - md: '768px', - lg: '992px', - xl: '1200px', - }, - } -} +const _ = require('lodash') +const postcss = require('postcss') +const cssnext = require('postcss-cssnext') +const backgroundColors = require('./generators/background-colors') function findMixin(css, mixin) { - let match; + let match css.walkRules((rule) => { if (_.trimStart(rule.selector, '.') === mixin) { @@ -26,7 +16,7 @@ function findMixin(css, mixin) { return match.clone().nodes } -function addCustomMediaQueries(css, breakpoints) { +function addCustomMediaQueries(css, { breakpoints }) { function buildMediaQuery(breakpoint) { if (_.isString(breakpoint)) { breakpoint = { min: breakpoint } @@ -52,6 +42,21 @@ function addCustomMediaQueries(css, breakpoints) { }) } +function generateUtilities(css, options) { + css.walkAtRules('tailwind', atRule => { + if (atRule.params === 'utilities') { + + const rules = _.flatten([ + backgroundColors(options) + ]) + + css.insertBefore(atRule, rules) + atRule.remove() + return false + } + }) +} + function substituteClassMixins(css) { css.walkRules(function (rule) { rule.walkAtRules('class', atRule => { @@ -68,15 +73,10 @@ function substituteClassMixins(css) { module.exports = postcss.plugin('tailwind', function (options) { return function (css) { - options = options || defaultOptions() - - addCustomMediaQueries(css, options.breakpoints) - - // Generate utilities - // css. + options = options || require('./default-config') + addCustomMediaQueries(css, options) + generateUtilities(css, options) substituteClassMixins(css) - - // return cssnext.process(css) } })