Skip to content

Commit

Permalink
refactor!: remove pseudoselector functions
Browse files Browse the repository at this point in the history
  • Loading branch information
@muhammadsammy
muhammadsammy committed Jun 27, 2020
1 parent 987343c commit 6c46bc5
Show file tree
Hide file tree
Showing 4 changed files with 2 additions and 244 deletions.
12 changes: 0 additions & 12 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,18 +50,6 @@ classnames('border-none', 'rounded-sm', {
});
```

## Pseudo selectors

Since we are in a functional world we use functions to define our pseudo selectors:

```js
import { classnames, hover } from 'tailwindcss-classnames';

classnames('bg-gray-500', hover('bg-blue-500'));
```

**Note: these methods are deprecated and will be removed. Use regular tailwindcss classes as `hover:bg-blue-500` insead. See [#13](https://github.com/muhammadsammy/tailwindcss-classnames/issues/13) for more details**

## Composing classes

Even though **classnames** just returns a string, it is a special typed string that you can compose into other definitions.
Expand Down
9 changes: 0 additions & 9 deletions src/generation/createFile.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,13 +39,6 @@ export function createFileWithGeneratedTypes(options: Options): void {
const prefix = configScanner.prefix;
const separator = configScanner.separator;

const breakpointsExportStatements = configScanner.getThemeBreakpoints().map(breakpoint => {
return `export const ${breakpoint}: TPseudoClass = className => {
console.warn("Calling ${breakpoint}() pseudoselector method is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13")
return ('${prefix}${breakpoint}${separator}' + className) as TTailwindString;
}`;
});

const isCustomClassesAdded: boolean =
typeof customClassesTypeName !== 'undefined' &&
typeof customClassesFilename !== 'undefined' &&
Expand Down Expand Up @@ -81,8 +74,6 @@ export function createFileWithGeneratedTypes(options: Options): void {
.replace(/WIDTH_SPACINGS/g, generateTypes(classesGenerator.getGeneratedClassesWithSpacing().widths, prefix))
.replace(/HEIGHT_SPACINGS/g, generateTypes(classesGenerator.getGeneratedClassesWithSpacing().heights, prefix))

.replace(/BREAKPOINT_EXPORT_STATEMENTS/g, breakpointsExportStatements.join('\n\n'))

.replace(/PSEUDO_CLASSES_VARIANTS/g, generateTypes(classesGenerator.getGeneratedPseudoClasses()))

.replace(/IMPORTED_T_CUSTOM_CLASSES/g, importedTCustomClasses)
Expand Down
69 changes: 0 additions & 69 deletions src/generation/utils/baseTemplateString.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,73 +98,4 @@ export type TTailwind<T extends TClasses = TClasses> = (...args: Array<TArgs<T>>
export const classnames: TTailwind = classnamesLib as any;
export const tw = classnames;
/*
* Deprecated, TODO: Remove them ***************************************************************************************
*/
export type TPseudoClass<T extends TClasses = TClasses> = (className: T) => TTailwindString;
export const hover: TPseudoClass = className => {
console.warn("Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13");
return ('_PREFIX_hover_SEPARATOR_' + className) as TTailwindString;
}
BREAKPOINT_EXPORT_STATEMENTS
export const focus: TPseudoClass = className => {
console.warn("Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13");
return ('_PREFIX_focus_SEPARATOR_' + className) as TTailwindString;
}
export const active: TPseudoClass = className => {
console.warn("Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13");
return ('_PREFIX_active_SEPARATOR_' + className) as TTailwindString;
}
export const disabled: TPseudoClass = className => {
console.warn("Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13");
return ('_PREFIX_disabled_SEPARATOR_' + className) as TTailwindString;
}
export const visited: TPseudoClass = className => {
console.warn("Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13");
return ('_PREFIX_visited_SEPARATOR_' + className) as TTailwindString;
}
export const firstChild: TPseudoClass = className => {
console.warn("Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13");
return ('_PREFIX_first-child_SEPARATOR_' + className) as TTailwindString;
}
export const lastChild: TPseudoClass = className => {
console.warn("Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13");
return ('_PREFIX_last-child_SEPARATOR_' + className) as TTailwindString;
}
export const oddChild: TPseudoClass = className => {
console.warn("Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13");
return ('_PREFIX_odd-child_SEPARATOR_' + className) as TTailwindString;
}
export const evenChild: TPseudoClass = className => {
console.warn("Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13");
return ('_PREFIX_even-child_SEPARATOR_' + className) as TTailwindString;
}
export const groupHover: TPseudoClass = className => {
console.warn("Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13");
return ('_PREFIX_group-hover_SEPARATOR_' + className) as TTailwindString;
}
export const groupFocus: TPseudoClass = className => {
console.warn("Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13");
return ('_PREFIX_group-focus_SEPARATOR_' + className) as TTailwindString;
}
export const focusWithin: TPseudoClass = className => {
console.warn("Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13");
return ('_PREFIX_focus-within_SEPARATOR_' + className) as TTailwindString;
}
`;
156 changes: 2 additions & 154 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10582,159 +10582,7 @@ export type TArgs<T extends TClasses> = T | null | undefined | { [key in T]?: bo

export type TTailwind<T extends TClasses = TClasses> = (...args: Array<TArgs<T>>) => TTailwindString;

// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
export const classnames: TTailwind = classnamesLib as any; // eslint-disable-line @typescript-eslint/no-explicit-any
// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any
export const classnames: TTailwind = classnamesLib as any;

export const tw = classnames;

/*
* Deprecated, TODO: Remove them ***************************************************************************************
*/

export type TPseudoClass<T extends TClasses = TClasses> = (className: T) => TTailwindString;

export const hover: TPseudoClass = className => {
console.warn(
'Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13',
);
return ('hover:' + className) as TTailwindString;
};

export const sm: TPseudoClass = className => {
console.warn(
'Calling sm() pseudoselector method is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13',
);
return ('sm:' + className) as TTailwindString;
};

export const md: TPseudoClass = className => {
console.warn(
'Calling md() pseudoselector method is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13',
);
return ('md:' + className) as TTailwindString;
};

export const lg: TPseudoClass = className => {
console.warn(
'Calling lg() pseudoselector method is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13',
);
return ('lg:' + className) as TTailwindString;
};

export const xl: TPseudoClass = className => {
console.warn(
'Calling xl() pseudoselector method is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13',
);
return ('xl:' + className) as TTailwindString;
};

export const focus: TPseudoClass = className => {
console.warn(
'Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13',
);
return ('focus:' + className) as TTailwindString;
};

export const active: TPseudoClass = className => {
console.warn(
'Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13',
);
return ('active:' + className) as TTailwindString;
};

export const disabled: TPseudoClass = className => {
console.warn(
'Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13',
);
return ('disabled:' + className) as TTailwindString;
};

export const visited: TPseudoClass = className => {
console.warn(
'Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13',
);
return ('visited:' + className) as TTailwindString;
};

export const firstChild: TPseudoClass = className => {
console.warn(
'Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13',
);
return ('first-child:' + className) as TTailwindString;
};

export const lastChild: TPseudoClass = className => {
console.warn(
'Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13',
);
return ('last-child:' + className) as TTailwindString;
};

export const oddChild: TPseudoClass = className => {
console.warn(
'Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13',
);
return ('odd-child:' + className) as TTailwindString;
};

export const evenChild: TPseudoClass = className => {
console.warn(
'Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13',
);
return ('even-child:' + className) as TTailwindString;
};

export const groupHover: TPseudoClass = className => {
console.warn(
'Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13',
);
return ('group-hover:' + className) as TTailwindString;
};

export const groupFocus: TPseudoClass = className => {
console.warn(
'Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13',
);
return ('group-focus:' + className) as TTailwindString;
};

export const focusWithin: TPseudoClass = className => {
console.warn(
'Calling pseudoselectors as methods is deprecated. use regular tailwindcss classes instead. See https://github.com/muhammadsammy/tailwindcss-classnames/issues/13',
);
return ('focus-within:' + className) as TTailwindString;
};

export const createCustom = <T extends TClasses>(): {
classnames: TTailwind<T>;
hover: TPseudoClass<T>;
sm: TPseudoClass<T>;
md: TPseudoClass<T>;
lg: TPseudoClass<T>;
xl: TPseudoClass<T>;
active: TPseudoClass<T>;
disabled: TPseudoClass<T>;
visited: TPseudoClass<T>;
firstChild: TPseudoClass<T>;
lastChild: TPseudoClass<T>;
oddChild: TPseudoClass<T>;
evenChild: TPseudoClass<T>;
groupHover: TPseudoClass<T>;
focusWithin: TPseudoClass<T>;
} => ({
classnames,
hover,
sm,
md,
lg,
xl,
active,
disabled,
visited,
firstChild,
lastChild,
oddChild,
evenChild,
groupHover,
focusWithin,
});

0 comments on commit 6c46bc5

Please sign in to comment.