feat(type*) add new ExtendedCSSProperties and Fix Pseudos.

Author: refirst11

src/_internal/types/common/pseudo-selectors.ts

@@ -84,7 +84,7 @@ export type ArgsPseudos =
   | LanguagesType
   | CustomNthArgsType;
 
-type AndStrings = `&${string}`;
+export type AndStrings = `&${string}`;
 export type AndStringsType = {
   [key in AndStrings]: CustomCSSProperties;
 };

src/_internal/types/custom/custom-css-properties.ts

@@ -8,9 +8,11 @@ import type {
   CSSEdgeSizeValue,
   CSSRadiusValues,
 } from '../common/css-values';
-import type { AndStringsType, ArgsPseudos } from '../common/pseudo-selectors';
+import type { AndStrings, AndStringsType, ArgsPseudos } from '../common/pseudo-selectors';
 import type { CSSColorValue, CSSVariableProperties, CSSVariableValue } from '../common/css-variables';
-import { MediaQueryType } from './custom-html-type';
+import { MediaQuery, MediaQueryType } from './custom-html-type';
+import { HtmlTags } from '../../utils/html-tags';
+import { LanguageCodes } from '../../utils/language-codes';
 
 type CustomExtendProperties = {
   width?: CSSNumericValue | CSSLengthSubValue | 'auto';
@@ -33,7 +35,7 @@ type CustomExtendProperties = {
   wordSpacing?: CSSNumericValue | 'normal';
   borderWidth?: CSSNumericValue | 'thin' | 'medium' | 'thick';
   borderRadius?: CSSRadiusValues | number;
-  top?: CSSNumericValue | 'auto';
+  top?: CSSNumericValue | 'auto' | number;
   right?: CSSNumericValue | 'auto';
   bottom?: CSSNumericValue | 'auto';
   left?: CSSNumericValue | 'auto';
@@ -51,45 +53,51 @@ type CustomExtendProperties = {
   color?: CSSColorValue | CSSGlobalValue;
   background?: CSSColorValue | CSSGlobalValue | 'none';
   backgroundColor?: CSSColorValue | CSSGlobalValue;
-  active?: CustomCSSProperties;
-  hover?: CustomCSSProperties;
-  link?: CustomCSSProperties;
-  visited?: CustomCSSProperties;
-  empty?: CustomCSSProperties;
-  lang?: undefined;
-  not?: undefined;
-  notClass?: undefined;
-  has?: undefined;
-  hasChild?: undefined;
-  hasPlus?: undefined;
-  hasClass?: undefined;
-  hasClassChild?: undefined;
-  hasClassPlus?: undefined;
-  firstChild?: CustomCSSProperties;
-  lastChild?: CustomCSSProperties;
-  nthChild?: undefined;
-  nthLastChild?: undefined;
-  nthLastOfType?: undefined;
-  nthOfType?: undefined;
-  checked?: CustomCSSProperties;
-  disabled?: CustomCSSProperties;
-  enabled?: CustomCSSProperties;
-  focus?: CustomCSSProperties;
-  inRange?: CustomCSSProperties;
-  invalid?: CustomCSSProperties;
-  valid?: CustomCSSProperties;
-  optional?: CustomCSSProperties;
-  outOfRange?: CustomCSSProperties;
-  readOnly?: CustomCSSProperties;
-  readWrite?: CustomCSSProperties;
-  required?: CustomCSSProperties;
-  target?: CustomCSSProperties;
-  after?: CustomCSSProperties;
-  before?: CustomCSSProperties;
-  firstLetter?: CustomCSSProperties;
-  firstLine?: CustomCSSProperties;
-  marker?: CustomCSSProperties;
-  selection?: CustomCSSProperties;
+};
+
+type PseudoElementsAndClassKeys =
+  | 'active'
+  | 'hover'
+  | 'link'
+  | 'visited'
+  | 'empty'
+  | `lang${LanguageCodes}`
+  | `not${HtmlTags}`
+  | `notClass${string}`
+  | `has${HtmlTags}`
+  | `hasChild${HtmlTags}`
+  | `hasPlus${HtmlTags}`
+  | `hasClass${string}`
+  | `hasClassChild${string}`
+  | `hasClassPlus${string}`
+  | 'firstChild'
+  | 'lastChild'
+  | `nthChild${number | 'Odd' | 'Even'}`
+  | `nthLastChild${number | 'Odd' | 'Even'}`
+  | `nthLastOfType${number | 'Odd' | 'Even'}`
+  | `nthOfType${number | 'Odd' | 'Even'}`
+  | 'checked'
+  | 'disabled'
+  | 'enabled'
+  | 'focus'
+  | 'inRange'
+  | 'invalid'
+  | 'valid'
+  | 'optional'
+  | 'outOfRange'
+  | 'readOnly'
+  | 'readWrite'
+  | 'required'
+  | 'target'
+  | 'after'
+  | 'before'
+  | 'firstLetter'
+  | 'firstLine'
+  | 'marker'
+  | 'selection';
+
+type PseudoElementsAndClassType = {
+  [K in PseudoElementsAndClassKeys]?: CustomCSSProperties;
 };
 
 export type CustomCSSProperties =
@@ -99,4 +107,11 @@ export type CustomCSSProperties =
       [K in keyof React.CSSProperties]: React.CSSProperties[K] | CSSVariableValue;
     })
   | CSSVariableProperties
-  | MediaQueryType;
+  | MediaQueryType
+  | PseudoElementsAndClassType;
+
+export type ExtendedCSSProperties =
+  | CustomCSSProperties
+  | {
+      [K in AndStrings | PseudoElementsAndClassKeys | MediaQuery]?: CustomCSSProperties;
+    };

src/core/method/set.ts

@@ -1,9 +1,9 @@
-import type { CustomCSSProperties } from '../../_internal';
+import type { ExtendedCSSProperties } from '../../_internal';
 import { isInDevelopment, injectCSS, styleCompiler, genBase62Hash } from '../../_internal';
 import styles from '../styles/style.module.css';
 import { createGlobalStyleSheetPromise, globalStyleSheetPromise, resolveGlobalStyleSheet } from './set-build-in-helper';
 
-export function set(object: CustomCSSProperties): string {
+export function set(object: ExtendedCSSProperties): string {
   const base62Hash = genBase62Hash(object, 5);
   const { styleSheet } = styleCompiler(object, base62Hash);
   const classHash = '_' + base62Hash;

src/core/style.ts

@@ -1,4 +1,4 @@
-import type { ClassesObjectType, ReturnStyleType, CustomHTMLType, CustomCSSProperties, ExactClassesObjectType } from '../_internal';
+import type { ClassesObjectType, ExactClassesObjectType, ReturnStyleType, CustomHTMLType, ExtendedCSSProperties } from '../_internal';
 import { create } from './method/create';
 import { set } from './method/set';
 import { global } from './method/global';
@@ -8,13 +8,13 @@ class Style {
   static create<T extends ClassesObjectType>(object: ExactClassesObjectType<T> | ClassesObjectType): ReturnStyleType<T> {
     return create(object);
   }
-  static set(object: CustomCSSProperties): string {
+  static set(object: ExtendedCSSProperties): string {
     return set(object);
   }
   static global(object: CustomHTMLType): void {
     return global(object);
   }
-  static root(object: CustomCSSProperties): void {
+  static root(object: ExtendedCSSProperties): void {
     return root(object);
   }
 }