Skip to content

Commit

Permalink
feat: add caret-color utilities
Browse files Browse the repository at this point in the history
Fixes #235
  • Loading branch information
muhammadsammy committed Jun 21, 2021
1 parent a48e16b commit 97ce1de
Show file tree
Hide file tree
Showing 2 changed files with 20 additions and 10 deletions.
27 changes: 17 additions & 10 deletions src/cli/core/ClassnamesGenerator.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@ import _ from 'lodash';
import {TailwindConfigParser} from './TailwindConfigParser';
import {nonConfigurableClassNames} from '../lib/non-configurable';
// prettier-ignore
import {TAllClassnames, Backgrounds, Layout, Borders, Tables, Effects,
Interactivity, TransitionsAndAnimations, Transforms, Accessibility, SVG,
FlexBox, Grid, Spacing, Sizing, Typography, TGeneratedClassnames, Filters} from '../types/classes';
import {
TAllClassnames, Backgrounds, Layout, Borders, Tables, Effects,
Interactivity, TransitionsAndAnimations, Transforms, Accessibility, SVG,
FlexBox, Grid, Spacing, Sizing, Typography, TGeneratedClassnames, Filters
} from '../types/classes';
import {TConfigTheme, TConfigDarkMode} from '../types/config';
import {tailwindLabsPlugins} from '../lib/tailwindlabs-plugins';

Expand Down Expand Up @@ -108,10 +110,10 @@ export class ClassnamesGenerator {
};
};

private borders = (): Borders => {
return {
private borders = (): Borders | Record<keyof Borders | 'caretColor', string[]> => {
const classnames = {
// Add all non configurable classes in `borders` plugin.
// These are utilities that thier names never change e.g. border styles (dashed, solid etc.)
// These are utilities that their names never change e.g. border styles (dashed, solid etc.)
...nonConfigurableClassNames.borders,

/* Dynamic border utils */
Expand Down Expand Up @@ -146,6 +148,10 @@ export class ClassnamesGenerator {
ringOffsetColor: this.generateClassesWithColors('ringOffsetColor'),
ringOffsetWidth: Object.keys(this._theme.ringOffsetWidth).map(x => 'ring-offset-' + x),
};

return this.isJitModeEnabled()
? {...classnames, caretColor: this.generateClassesWithColors('caretColor')}
: classnames;
};

private tables = (): Tables => {
Expand Down Expand Up @@ -330,9 +336,9 @@ export class ClassnamesGenerator {

private sizing = (): Sizing => {
// prettier-ignore
const extraWidthSizing = ['full', 'screen', 'auto', '1/2','1/3','2/3','1/4','2/4','3/4',
'1/5', '2/5','3/5','4/5', '1/6','2/6','3/6','4/6', '5/6','1/12','2/12','3/12','4/12',
'5/12','6/12', '7/12','8/12', '9/12','10/12','11/12'];
const extraWidthSizing = ['full', 'screen', 'auto', '1/2', '1/3', '2/3', '1/4', '2/4', '3/4',
'1/5', '2/5', '3/5', '4/5', '1/6', '2/6', '3/6', '4/6', '5/6', '1/12', '2/12', '3/12', '4/12',
'5/12', '6/12', '7/12', '8/12', '9/12', '10/12', '11/12'];
const extraHeightSizing = ['full', 'screen'];

return {
Expand Down Expand Up @@ -554,7 +560,7 @@ export class ClassnamesGenerator {

// prettier-ignore
type TOpacityProp = | 'divideOpacity' | 'textOpacity' | 'backgroundOpacity'
| 'borderOpacity' | 'placeholderOpacity' | 'ringOpacity'
| 'borderOpacity' | 'placeholderOpacity' | 'ringOpacity'
const getOpacity = (themePropertyName: TOpacityProp, outputNamePrefix: string): string[] => {
const generatedOpacities = generateOpacities(allOpacities, this._theme, themePropertyName);

Expand Down Expand Up @@ -590,6 +596,7 @@ export class ClassnamesGenerator {
}

type ClassesWithColors =
| 'caretColor'
| 'backgroundColor'
| 'divideColor'
| 'placeholderColor'
Expand Down
3 changes: 3 additions & 0 deletions src/cli/lib/defaultTailwindConfig.ts
Original file line number Diff line number Diff line change
Expand Up @@ -169,6 +169,7 @@ export const defaultTailwindConfig = {
inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
none: 'none',
},
caretColor: theme => theme('colors'),
contrast: {
0: '0',
50: '.5',
Expand Down Expand Up @@ -810,6 +811,8 @@ export const defaultTailwindConfig = {
'even',
'visited',
'checked',
'empty',
'read-only',
'group-hover',
'group-focus',
'focus-within',
Expand Down

0 comments on commit 97ce1de

Please sign in to comment.