forked from cwsdigital/tailwind-utopia
-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Remove lodash dependency * Use fl- variant to avoid conflict with variant syntax * Generate text sizes class names on-the-fly * Normalize indentation * Remove unused loop * DRY up property generation * Simplify custom spacing sizes API and internals. Use 2d array to specify pairs. This avoids problems with conflicting object keys and can reduce the number of iterations when generating CSS * Rewrite to use fontSize and spacing theme extensions * Require tailwindcss v3
- Loading branch information
1 parent
817e1c8
commit caca714
Showing
10 changed files
with
272 additions
and
3,238 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,137 +1,57 @@ | ||
| const plugin = require('tailwindcss/plugin') | ||
| const textSizes = require('./lib/textSizes') | ||
| const fluidSpacing = require('./lib/fluidSpacing') | ||
| const classes = require('./util/spacingClasses') | ||
| const merge = require('lodash/merge'); | ||
|
|
||
| module.exports = plugin.withOptions( function(options) { | ||
| return function( { addBase, addUtilities, e, theme } ) { | ||
| defaultOptions = { | ||
| useClamp: false, | ||
| prefix: 'fl:', | ||
| baseTextSize: 'step-0', | ||
| generateSpacing: true, | ||
| generateAllSpacingPairs: true, | ||
| generateFallbacks: true, | ||
| classes: classes, | ||
| } | ||
|
|
||
| const defaultTextSizes = [ | ||
| 'step--2', | ||
| 'step--1', | ||
| 'step-0', | ||
| 'step-1', | ||
| 'step-2', | ||
| 'step-3', | ||
| 'step-4', | ||
| 'step-5', | ||
| ] | ||
|
|
||
| const defaultSpacingSizes = { | ||
| '3xs': 0.25, | ||
| '2xs': 0.5, | ||
| 'xs': 0.75, | ||
| 's': 1, | ||
| 'm': 1.5, | ||
| 'l': 2, | ||
| 'xl': 3, | ||
| '2xl': 4, | ||
| '3xl': 6, | ||
| } | ||
|
|
||
|
|
||
| const opts = merge({}, defaultOptions, options); | ||
|
|
||
|
|
||
| let minWidth = theme('utopia.minScreen', '').replace('px', '') | ||
| let maxWidth = theme('utopia.maxScreen', '').replace('px', '') | ||
|
|
||
| //////////////////////////////////////////////////////////////////////// | ||
| // | ||
| // Due to the way Tailwind handles overriding in the theme: config | ||
| // if we add the utopia: key there all the keys within it get | ||
| // overwritten :-( | ||
| // | ||
| // So we provide empty defaults in the official default object, so they | ||
| // can be easily extended by the user. | ||
| // | ||
| // If they are still empty after reading the theme config, then | ||
| // the user hasn't supplied their own values we'll use our actual | ||
| // defaults | ||
| // | ||
| //////////////////////////////////////////////////////////////////////// | ||
|
|
||
| let userTheme = theme('utopia'); | ||
| if( theme('utopia.textSizes').length == 0 ) { | ||
| userTheme['textSizes'] = defaultTextSizes | ||
| } | ||
| if( Object.keys( theme('utopia.spacingSizes') ).length == 0 ) { | ||
| userTheme['spacingSizes'] = defaultSpacingSizes | ||
| } | ||
|
|
||
| if( opts.generateSpacing || !opts.useClamp ) { | ||
| const rootProperties = { | ||
| ':root': { | ||
| '--fluid-min-width': minWidth, | ||
| '--fluid-max-width': maxWidth, | ||
|
|
||
| '--fluid-screen': '100vw', | ||
| '--fluid-bp': `calc( (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)) )`, | ||
| }, | ||
|
|
||
| [`@media (max-width: ${minWidth}px)`]: { | ||
| ':root': { | ||
| '--fluid-screen': 'calc(var(--fluid-min-width) * 1px)', | ||
| }, | ||
| }, | ||
|
|
||
| [`@media (min-width: ${maxWidth}px)`]: { | ||
| ':root': { | ||
| '--fluid-screen': 'calc(var(--fluid-max-width) * 1px)', | ||
| }, | ||
| }, | ||
| } | ||
|
|
||
| addBase(rootProperties); | ||
| } | ||
|
|
||
| textSizes({ | ||
| theme: theme, | ||
| e: e, | ||
| addUtilities: addUtilities, | ||
| addBase: addBase, | ||
| options: opts, | ||
| }) | ||
|
|
||
| if( opts.generateSpacing === true ) { | ||
| fluidSpacing({ | ||
| theme: theme, | ||
| e: e, | ||
| addUtilities: addUtilities, | ||
| addBase: addBase, | ||
| options: opts, | ||
| }) | ||
| } | ||
|
|
||
|
|
||
| } | ||
| }, function(options) { | ||
| return { | ||
| theme: { | ||
| utopia: { | ||
| minScreen: '320px', | ||
| minSize: 21, | ||
| minScale: 1.2, | ||
| maxScreen: '1140px', | ||
| maxSize: 24, | ||
| maxScale: 1.25, | ||
| textSizes: [], | ||
| spacingSizes: {}, | ||
| spacingPairs: {}, | ||
| spacingCustomPairs: [], | ||
| spacingScale: {}, | ||
| } | ||
| const text = require('./lib/text') | ||
| const spacing = require('./lib/spacing') | ||
| const defaultOptions = { | ||
| prefix: 'fl-', | ||
| baseKey: 'base' | ||
| } | ||
|
|
||
| module.exports = plugin.withOptions(function (options) { | ||
| options = Object.assign({}, defaultOptions, options) | ||
|
|
||
| return function ({ addBase, theme }) { | ||
| const { minWidth, maxWidth } = theme('utopia') | ||
|
|
||
| addBase({ | ||
| ':root': { | ||
| '--fluid-min-width': minWidth.toString(), | ||
| '--fluid-max-width': maxWidth.toString(), | ||
|
|
||
| '--fluid-screen': '100vw', | ||
| '--fluid-bp': `calc( | ||
| (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / | ||
| (var(--fluid-max-width) - var(--fluid-min-width)) | ||
| )` | ||
| }, | ||
|
|
||
| [`@media (min-width: ${maxWidth}px)`]: { | ||
| ':root': { | ||
| '--fluid-screen': 'calc(var(--fluid-max-width) * 1px)' | ||
| } | ||
| } | ||
| }) | ||
|
|
||
| addBase({ ':root': text.customProperties(theme, options) }) | ||
| } | ||
| }, function (options) { | ||
| options = Object.assign({}, defaultOptions, options) | ||
|
|
||
| return { | ||
| theme: { | ||
| extend: { | ||
| fontSize: theme => text.sizes(theme, options), | ||
| spacing: theme => spacing.sizes(theme, options) | ||
| }, | ||
| utopia: { | ||
| minWidth: 320, | ||
| minSize: 21, | ||
| minScale: 1.2, | ||
| maxWidth: 1140, | ||
| maxSize: 24, | ||
| maxScale: 1.25, | ||
| spacing: spacing.defaults, | ||
| fontSize: text.defaults | ||
| } | ||
| } | ||
| } | ||
| }) | ||
|
|
Oops, something went wrong.