-
-
Notifications
You must be signed in to change notification settings - Fork 48
/
tailwindcss.js
111 lines (94 loc) · 3.6 KB
/
tailwindcss.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
const path = require('path')
const fs = require('fs-extra')
const postcss = require('postcss')
const tailwindcss = require('tailwindcss')
const postcssImport = require('postcss-import')
const postcssNested = require('tailwindcss/nesting')
const {requireUncached} = require('../utils/helpers')
const mergeLonghand = require('postcss-merge-longhand')
const {get, isObject, isEmpty, merge} = require('lodash')
module.exports = {
compile: async (css = '', html = '', tailwindConfig = {}, maizzleConfig = {}) => {
tailwindConfig = (isObject(tailwindConfig) && !isEmpty(tailwindConfig)) ? tailwindConfig : get(maizzleConfig, 'build.tailwind.config', 'tailwind.config.js')
// Compute the Tailwind config to use
const userConfig = () => {
// If a custom config object was passed, use that
if (isObject(tailwindConfig) && !isEmpty(tailwindConfig)) {
return tailwindConfig
}
/**
* Try loading a fresh tailwind.config.js, with fallback to an empty object.
* This will use the default Tailwind config (with rem units etc)
*/
try {
return requireUncached(path.resolve(process.cwd(), tailwindConfig))
} catch {
return {}
}
}
// Merge user's Tailwind config on top of a 'base' config
const config = merge({
important: true,
content: {
files: [
'./src/**/*.*',
{raw: html, extension: 'html'}
]
}
}, userConfig())
// Add back the `{raw: html}` option if user provided own config
if (Array.isArray(config.content)) {
config.content = {
files: [
...config.content,
'./src/**/*.*',
{raw: html, extension: 'html'}
]
}
}
// Include all `build.templates.source` paths when scanning for selectors to preserve
const buildTemplates = get(maizzleConfig, 'build.templates')
if (buildTemplates) {
const templateObjects = Array.isArray(buildTemplates) ? buildTemplates : [buildTemplates]
const templateSources = templateObjects.map(template => {
const source = get(template, 'source')
if (typeof source === 'function') {
const sources = source(maizzleConfig)
if (Array.isArray(sources)) {
sources.map(s => config.content.files.push(s))
} else if (typeof sources === 'string') {
config.content.files.push(sources)
}
// Must return a valid `content` entry
return {raw: '', extension: 'html'}
}
// Support single-file sources i.e. src/templates/index.html
if (typeof source === 'string' && Boolean(path.extname(source))) {
config.content.files.push(source)
return {raw: '', extension: 'html'}
}
return `${source}/**/*.*`
})
config.content.files.push(...templateSources)
}
const userFilePath = get(maizzleConfig, 'build.tailwind.css', path.join(process.cwd(), 'src/css/tailwind.css'))
const userFileExists = await fs.pathExists(userFilePath)
if (userFileExists) {
css = await fs.readFile(path.resolve(userFilePath), 'utf8') + css
} else {
css = `@import "tailwindcss/components"; @import "tailwindcss/utilities"; ${css}`
}
return postcss([
postcssImport({path: path.dirname(userFilePath)}),
postcssNested(),
tailwindcss(config),
maizzleConfig.env === 'local' ? () => {} : mergeLonghand(),
...get(maizzleConfig, 'build.postcss.plugins', [])
])
.process(css, {from: undefined})
.then(result => result.css)
.catch(error => {
throw new SyntaxError(error)
})
}
}