From 01e920dccfe33a9b0f28bf6711b2dd2d184a6807 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Fri, 25 Aug 2017 15:08:45 -0400 Subject: [PATCH] WIP --- docs/package.json | 4 +- docs/source/_assets/css/main.css | 58 ++++++++++++++++++ docs/source/_assets/less/main.less | 39 +++++++++--- docs/webpack.mix.js | 6 ++ src/default-config.js | 98 ++++++++++++++---------------- src/tailwind.js | 31 +++++++--- 6 files changed, 163 insertions(+), 73 deletions(-) create mode 100644 docs/source/_assets/css/main.css diff --git a/docs/package.json b/docs/package.json index 90f2a61ba..4cdbe1e59 100644 --- a/docs/package.json +++ b/docs/package.json @@ -11,9 +11,11 @@ "private": true, "devDependencies": { "cross-env": "^3.2.3", - "laravel-mix": "0.*" + "laravel-mix": "^1.4.2" }, "dependencies": { + "less": "^2.7.2", + "less-loader": "^4.0.5", "lodash": "^4.17.4", "postcss-cssnext": "^3.0.2" }, diff --git a/docs/source/_assets/css/main.css b/docs/source/_assets/css/main.css new file mode 100644 index 000000000..f16ae7af6 --- /dev/null +++ b/docs/source/_assets/css/main.css @@ -0,0 +1,58 @@ +:root { + --danger-theme: { + color: white; + background-color: red; + }; +} + +.foo { + @apply .oreo --danger-theme .px-4; +} + +@responsive { + .oreo { + background: red; + } + .oreo { + text-align: center; + } + .oreo { + background: purple; + } +} + +.bar { + .oreo { + background: red; + } +} + +@responsive { + .bar { + color: orange; + } +} + +@tailwind utilities; + +@responsive { + .px-4 { + padding-right: 1rem; + padding-left: 1rem; + } + + .py-2 { + padding-top: .5rem; + padding-bottom: .5rem; + } +} + +@responsive { + .sans-alt { + font-family: 'Brandon Text'; + } +} + +.this-should-be-the-very-end { + color: red; +} diff --git a/docs/source/_assets/less/main.less b/docs/source/_assets/less/main.less index 85ff820e1..7ae3aa04e 100644 --- a/docs/source/_assets/less/main.less +++ b/docs/source/_assets/less/main.less @@ -1,8 +1,13 @@ .foo { - @class "bg-light px-4"; + @apply .px-4; + @apply .bg-blue .py-2; +} + +.foo { + // @class "oreo bg-blue px-4"; background-color: red; @media (--breakpoint-sm) { - @class "py-2"; + // @class "py-2"; background-color: green; } @media (--breakpoint-md) { @@ -10,18 +15,32 @@ } } +@responsive { + .bar { + color: orange; + } +} + @tailwind utilities; -.bg-light { - background: #fff; +@responsive { + .px-4 { + padding-right: 1rem; + padding-left: 1rem; + } + + .py-2 { + padding-top: .5rem; + padding-bottom: .5rem; + } } -.px-4 { - padding-right: 1rem; - padding-left: 1rem; +@responsive { + .sans-alt { + font-family: 'Brandon Text'; + } } -.py-2 { - padding-top: .5rem; - padding-bottom: .5rem; +.this-should-be-the-very-end { + color: red; } diff --git a/docs/webpack.mix.js b/docs/webpack.mix.js index e39798876..0e42d4bad 100644 --- a/docs/webpack.mix.js +++ b/docs/webpack.mix.js @@ -18,3 +18,9 @@ mix.less('source/_assets/less/main.less', 'source/css') require('postcss-cssnext')() ] }) + +// mix.js('source/js/prism.js', 'source/js') +// .postCss('source/_assets/css/main.css', 'source/css', [ +// require('./../src/tailwind.js')(), +// require('postcss-cssnext')() +// ]) diff --git a/src/default-config.js b/src/default-config.js index 1ebb88545..c65876cd3 100644 --- a/src/default-config.js +++ b/src/default-config.js @@ -53,69 +53,59 @@ module.exports = { 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: [ + { + light: 'white', + lightSoft: 'grey-200', + lightSofter: 'grey-300', + lightSoftest: 'grey-400', + dark: 'grey-900', + darkSoft: 'grey-800', + darkSofter: 'grey-700', + darkSoftest: 'grey-600', + }, + 'red-dark', + 'red', + 'red-light', + 'red-lightest', + 'orange-dark', + 'orange', + 'orange-light', + 'orange-lightest', + 'yellow-dark', + 'yellow', + 'yellow-light', + 'yellow-lightest', + 'green-dark', + 'green', + 'green-light', + 'green-lightest', + 'teal-dark', + 'teal', + 'teal-light', + 'teal-lightest', 'blue-dark', 'blue', + 'blue-light', 'blue-lightest', + 'indigo-dark', 'indigo', 'indigo-light', + 'indigo-lightest', + 'purple-dark', 'purple', + 'purple-light', 'purple-lightest', 'pink-dark', 'pink', + 'pink-light', + 'pink-lightest', ], - // backgroundColors: { - // primary: 'blue', - // primaryDark: 'blueDark', - // primaryLight: 'blueLight', - // secondary: 'orange', - // secondaryDark: 'orangeDark', - // secondaryLight: 'orangeLight', - // } + shadows: { + 1: '0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.15)', + 2: '0 3px 6px rgba(0,0,0,0.12), 0 3px 6px rgba(0,0,0,0.13)', + 3: '0 10px 20px rgba(0,0,0,0.13), 0 6px 6px rgba(0,0,0,0.13)', + 4: '0 14px 28px rgba(0,0,0,0.16), 0 10px 10px rgba(0,0,0,0.11)', + 5: '0 19px 38px rgba(0,0,0,0.18), 0 15px 12px rgba(0,0,0,0.11)', + } } diff --git a/src/tailwind.js b/src/tailwind.js index 3fe05aa3c..4fa70fddd 100644 --- a/src/tailwind.js +++ b/src/tailwind.js @@ -11,7 +11,7 @@ function findMixin(css, mixin, onError) { const matches = [] css.walkRules((rule) => { - if (_.trimStart(rule.selector, '.') === mixin) { + if (rule.selector === mixin) { matches.push(rule) } }) @@ -86,18 +86,28 @@ function generateUtilities(css, options) { }) } -function substituteClassMixins(css) { +function substituteClassApplyAtRules(css) { css.walkRules(function (rule) { - rule.walkAtRules('class', atRule => { - const mixins = _.trim(atRule.params, ` "'`).split(' ') - const decls = _.flatMap(mixins, (mixin) => { + rule.walkAtRules('apply', atRule => { + const mixins = postcss.list.space(atRule.params) + + const [customProperties, classes] = _.partition(mixins, (mixin) => { + return _.startsWith(mixin, '--') + }) + + const decls = _.flatMap(classes, (mixin) => { return findMixin(css, mixin, () => { - throw atRule.error(`No .${mixin} class found.`); + throw atRule.error(`No ${mixin} class found.`); }) }) rule.insertBefore(atRule, decls) - atRule.remove() + + atRule.params = customProperties.join(' ') + + if (_.isEmpty(customProperties)) { + atRule.remove() + } }) }) } @@ -106,8 +116,13 @@ module.exports = postcss.plugin('tailwind', function (options) { return function (css) { options = options || require('./default-config') + // const normalize = fs.readFileSync('../node_modules/normalize.css/normalize.css') + // const base = fs.readFileSync('../node_modules/suitcss-base/lib/base.css') + // css.prepend(postcss.parse(base)) + // css.prepend(postcss.parse(normalize)) + addCustomMediaQueries(css, options) generateUtilities(css, options) - substituteClassMixins(css) + // substituteClassApplyAtRules(css) } })