wrapper/tailwindcss
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

WIP

Browse source
This commit is contained in:
Adam Wathan 2017-08-25 15:08:45 -04:00
parent f42bb0b2bc
commit 01e920dccf
6 changed files with 163 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

4
docs/package.json
View file

@ -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"
},

58
docs/source/_assets/css/main.css Normal file
View file

@ -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;
}

39
docs/source/_assets/less/main.less
View file

@ -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;
}

6
docs/webpack.mix.js
View file

@ -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')()
// ])

98
src/default-config.js
View file

@ -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)',
}
}

31
src/tailwind.js
View file

@ -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)
}
})