Use typescript types check string?

[cqh963852]

Due to missing negative classname.

#350

What about use typescript type check string?

export type TMargin = 'm-0' | 'm-1' | 'm-2' | 'm-3' | 'm-4' | 'm-5' | 'm-6' | 'm-7' | 'm-8' | 'm-9' | 'm-10' | 'm-11' | 'm-12' | 'm-14' | 'm-16' | 'm-20' | 'm-24' | 'm-28' | 'm-32' | 'm-36' | 'm-40' | 'm-44' | 'm-48' | 'm-52' | 'm-56' | 'm-60' | 'm-64' | 'm-72' | 'm-80' | 'm-96' | 'm-auto' | 'm-px' | 'm-0.5' | 'm-1.5' | 'm-2.5' | 'm-3.5' | 'my-0' | 'my-1' | 'my-2' | 'my-3' | 'my-4' | 'my-5' | 'my-6' | 'my-7' | 'my-8' | 'my-9' | 'my-10' | 'my-11' | 'my-12' | 'my-14' | 'my-16' | 'my-20' | 'my-24' | 'my-28' | 'my-32' | 'my-36' | 'my-40' | 'my-44' | 'my-48' | 'my-52' | 'my-56' | 'my-60' | 'my-64' | 'my-72' | 'my-80' | 'my-96' | 'my-auto' | 'my-px' | 'my-0.5' | 'my-1.5' | 'my-2.5' | 'my-3.5' | 'mx-0' | 'mx-1' | 'mx-2' | 'mx-3' | 'mx-4' | 'mx-5' | 'mx-6' | 'mx-7' | 'mx-8' | 'mx-9' | 'mx-10' | 'mx-11' | 'mx-12' | 'mx-14' | 'mx-16' | 'mx-20' | 'mx-24' | 'mx-28' | 'mx-32' | 'mx-36' | 'mx-40' | 'mx-44' | 'mx-48' | 'mx-52' | 'mx-56' | 'mx-60' | 'mx-64' | 'mx-72' | 'mx-80' | 'mx-96' | 'mx-auto' | 'mx-px' | 'mx-0.5' | 'mx-1.5' | 'mx-2.5' | 'mx-3.5' | 'mt-0' | 'mt-1' | 'mt-2' | 'mt-3' | 'mt-4' | 'mt-5' | 'mt-6' | 'mt-7' | 'mt-8' | 'mt-9' | 'mt-10' | 'mt-11' | 'mt-12' | 'mt-14' | 'mt-16' | 'mt-20' | 'mt-24' | 'mt-28' | 'mt-32' | 'mt-36' | 'mt-40' | 'mt-44' | 'mt-48' | 'mt-52' | 'mt-56' | 'mt-60' | 'mt-64' | 'mt-72' | 'mt-80' | 'mt-96' | 'mt-auto' | 'mt-px' | 'mt-0.5' | 'mt-1.5' | 'mt-2.5' | 'mt-3.5' | 'mr-0' | 'mr-1' | 'mr-2' | 'mr-3' | 'mr-4' | 'mr-5' | 'mr-6' | 'mr-7' | 'mr-8' | 'mr-9' | 'mr-10' | 'mr-11' | 'mr-12' | 'mr-14' | 'mr-16' | 'mr-20' | 'mr-24' | 'mr-28' | 'mr-32' | 'mr-36' | 'mr-40' | 'mr-44' | 'mr-48' | 'mr-52' | 'mr-56' | 'mr-60' | 'mr-64' | 'mr-72' | 'mr-80' | 'mr-96' | 'mr-auto' | 'mr-px' | 'mr-0.5' | 'mr-1.5' | 'mr-2.5' | 'mr-3.5' | 'mb-0' | 'mb-1' | 'mb-2' | 'mb-3' | 'mb-4' | 'mb-5' | 'mb-6' | 'mb-7' | 'mb-8' | 'mb-9' | 'mb-10' | 'mb-11' | 'mb-12' | 'mb-14' | 'mb-16' | 'mb-20' | 'mb-24' | 'mb-28' | 'mb-32' | 'mb-36' | 'mb-40' | 'mb-44' | 'mb-48' | 'mb-52' | 'mb-56' | 'mb-60' | 'mb-64' | 'mb-72' | 'mb-80' | 'mb-96' | 'mb-auto' | 'mb-px' | 'mb-0.5' | 'mb-1.5' | 'mb-2.5' | 'mb-3.5' | 'ml-0' | 'ml-1' | 'ml-2' | 'ml-3' | 'ml-4' | 'ml-5' | 'ml-6' | 'ml-7' | 'ml-8' | 'ml-9' | 'ml-10' | 'ml-11' | 'ml-12' | 'ml-14' | 'ml-16' | 'ml-20' | 'ml-24' | 'ml-28' | 'ml-32' | 'ml-36' | 'ml-40' | 'ml-44' | 'ml-48' | 'ml-52' | 'ml-56' | 'ml-60' | 'ml-64' | 'ml-72' | 'ml-80' | 'ml-96' | 'ml-auto' | 'ml-px' | 'ml-0.5' | 'ml-1.5' | 'ml-2.5' | 'ml-3.5';

//to

export type TMargin = `${''|'-'}${'m'|'my'|'mx'|'mt'|'mr'|'mb'|'ml'}-${number|'px'}`;

export type TMargin = `${'' | '-'}${'m' | 'my' | 'mx' | 'mt' | 'mr' | 'mb' | 'ml'}-${
  | '0'
  | '1'
  | '2'
  | '3'
  | '4'
  | '5'
  | '6'
  | '7'
  | '8'
  | '9'
  | '10'
  | '11'
  | '12'
  | '14'
  | '16'
  | '20'
  | '24'
  | '28'
  | '32'
  | '36'
  | '40'
  | '44'
  | '48'
  | '52'
  | '56'
  | '60'
  | '64'
  | '72'
  | '80'
  | '96'
  | 'auto'
  | 'px'
  | '0.5'
  | '1.5'
  | '2.5'
  | '3.5'}`;

but on the other side, I can't search the css classname in the d.ts file.

may be keep both type?

[muhammadsammy]

I think its a good idea 👍

[muhammadsammy]

I don't understand what you mean by searching in .d.ts file

[cqh963852]

If a stater want know : Is "m-60" supported. He will be not able to search the "m-60" string.