Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

chore: Prepare for Tailwind 2.0 - Part 3 #87

Merged
merged 6 commits into from Oct 29, 2020
Merged

chore: Prepare for Tailwind 2.0 - Part 3 #87

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c72826a
bump dependencies
RobinMalfait Oct 28, 2020
0abfcd8
test by running everything through tailwindcss itself
RobinMalfait Oct 28, 2020
2f009d7
simplify implementation
RobinMalfait Oct 29, 2020
83e8921
clear unnecessary whitespace
RobinMalfait Oct 29, 2020
54788d9
add additional test to verify overriding of backticks still work
RobinMalfait Oct 29, 2020
ff5509c
bump to latest tailwindcss alpha version
RobinMalfait Oct 29, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Expand Up @@ -24,7 +24,7 @@
"prepublishOnly": "node scripts/build.js"
},
"peerDependencies": {
"tailwindcss": "^1.5.0"
"tailwindcss": "2.0.0-alpha.4 || ^2.0.0"
},
"devDependencies": {
"@mdx-js/loader": "^1.0.19",
Expand All @@ -39,9 +39,9 @@
"next": "^9.4.4",
"postcss": "^7.0.17",
"prettier": "^2.1.2",
"react-dom": "^16.8.6",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"snapshot-diff": "^0.8.1",
"tailwindcss": "^2.0.0-alpha.1"
"tailwindcss": "^2.0.0-alpha.4"
}
}
42 changes: 17 additions & 25 deletions src/index.js
View file
Open in desktop
@@ -1,14 +1,15 @@
const plugin = require('tailwindcss/plugin')
const merge = require('lodash/merge')
const castArray = require('lodash/castArray')
const uniq = require('lodash/uniq')
const styles = require('./styles')

const computed = {
// Reserved for future "magic properties", for example:
// bulletColor: (color) => ({ 'ul > li::before': { backgroundColor: color } }),
}

function configToCss(config) {
function configToCss(config = {}) {
return merge(
{},
...Object.keys(config)
Expand All @@ -18,36 +19,27 @@ function configToCss(config) {
)
}

const DEFAULT_MODIFIERS = ['DEFAULT', 'sm', 'lg', 'xl', '2xl']
module.exports = plugin.withOptions(
({ modifiers = ['sm', 'lg', 'xl', '2xl'], className = 'prose' } = {}) => {
({ modifiers = DEFAULT_MODIFIERS, className = 'prose' } = {}) => {
return function ({ addComponents, theme, variants }) {
const config = theme('typography', {})
const config = theme('typography')

const all = uniq([
'DEFAULT',
...modifiers,
...Object.keys(config).filter((modifier) => !DEFAULT_MODIFIERS.includes(modifier)),
])

addComponents(
[
{
[`.${className}`]: merge(
{},
...castArray(styles.DEFAULT.css),
configToCss(config.DEFAULT || {})
),
},
...modifiers.map((modifier) => ({
[`.${className}-${modifier}`]: merge(
{},
...castArray(styles[modifier].css),
configToCss(config[modifier] || {})
),
})),
...Object.keys(config)
.filter((key) => !['DEFAULT', ...modifiers].includes(key))
.map((modifier) => ({
[`.${className}-${modifier}`]: configToCss(config[modifier]),
})),
],
all.map((modifier) => ({
[modifier === 'DEFAULT' ? `.${className}` : `.${className}-${modifier}`]: configToCss(
config[modifier]
),
})),
variants('typography')
)
}
},
() => ({ variants: { typography: ['responsive'] } })
() => ({ theme: { typography: styles }, variants: { typography: ['responsive'] } })
)