From a9656d636bc37c95c8f9cc40d4559b170b2876e5 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Mon, 4 Oct 2021 13:27:10 +0200 Subject: [PATCH 01/28] feat: enable jit features all the time --- src/cli/core/ClassnamesGenerator.ts | 60 ++++++++-------------------- src/cli/core/TailwindConfigParser.ts | 15 +++---- 2 files changed, 22 insertions(+), 53 deletions(-) diff --git a/src/cli/core/ClassnamesGenerator.ts b/src/cli/core/ClassnamesGenerator.ts index 048d96d7..a01b3fd8 100644 --- a/src/cli/core/ClassnamesGenerator.ts +++ b/src/cli/core/ClassnamesGenerator.ts @@ -77,10 +77,8 @@ export class ClassnamesGenerator { }; }; - private isJitModeEnabled = (): boolean => this._configParser.getMode() === 'jit'; - private layout = (): Layout | Record => { - const classnames = { + return { ...nonConfigurableClassNames.layout, objectPosition: Object.keys(this._theme.objectPosition).map(x => 'object-' + x), inset: Object.keys(this._theme.inset).flatMap(insetValue => { @@ -93,13 +91,8 @@ export class ClassnamesGenerator { zIndex: Object.keys(this._theme.zIndex).flatMap(zIndexValue => zIndexValue.startsWith('-') ? `-z-${zIndexValue.substring(1)}` : `z-${zIndexValue}`, ), + content: Object.keys(this._theme.content).map(x => 'content-' + x), }; - - if (this.isJitModeEnabled()) { - return {...classnames, content: Object.keys(this._theme.content).map(x => 'content-' + x)}; - } else { - return classnames; - } }; private backgrounds = (): Backgrounds => { @@ -117,7 +110,7 @@ export class ClassnamesGenerator { }; private borders = (): Borders | Record => { - const classnames = { + return { // Add all non configurable classes in `borders` plugin. // These are utilities that their names never change e.g. border styles (dashed, solid etc.) ...nonConfigurableClassNames.borders, @@ -133,7 +126,7 @@ export class ClassnamesGenerator { const sides = ['t', 'r', 'b', 'l']; return sides.map(side => `border-${side}-${width}`).concat(`border-${width}`); }), - + caretColor: this.generateClassesWithColors('caretColor'), /* Dynamic divide utilities */ divideColor: this.generateClassesWithColors('divideColor'), divideOpacity: this.getGeneratedClassesWithOpacities().divideOpacities, @@ -154,10 +147,6 @@ 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 => { @@ -423,33 +412,23 @@ export class ClassnamesGenerator { `${key}.${regularClassGroupKey}`, ) as string[]; - // If JIT compiler mode is enabled... - if (this.isJitModeEnabled()) { - // Duplicate classnames with an important (!) prefix - const generatedClassGroupWithImportantPrefix = generatedClassGroup.map( - cls => '!' + cls, - ); + // Duplicate classnames with an important (!) prefix + const generatedClassGroupWithImportantPrefix = generatedClassGroup.map(cls => '!' + cls); - // Append the classnames with important prefix to the regular classnames - generatedClassGroup = generatedClassGroup.concat( - generatedClassGroupWithImportantPrefix, - ); + // Append the classnames with important prefix to the regular classnames + generatedClassGroup = generatedClassGroup.concat(generatedClassGroupWithImportantPrefix); - // Append the classnames with important prefix to the pseudo classes array - generatedClassGroupWithImportantPrefix.map(cls => pseudoClasses.push(cls)); - } + // Append the classnames with important prefix to the pseudo classes array + generatedClassGroupWithImportantPrefix.map(cls => pseudoClasses.push(cls)); // For every member of the found regular classes group... generatedClassGroup.map(classname => { const isDarkModeEnabled = this._darkMode !== false; - // If JIT compiler mode is enabled... - if (this.isJitModeEnabled()) { - // Enable all variants - pseudoClassesVariantsForKey = allVariants; - // Add 'peer' utility classname. used with peer-* classnames - pseudoClasses.push('peer'); - } + // Enable all variants + pseudoClassesVariantsForKey = allVariants; + // Add 'peer' utility classname. used with peer-* classnames + pseudoClasses.push('peer'); // Generate the classname of each variant... pseudoClassesVariantsForKey.map(variant => { @@ -533,7 +512,7 @@ export class ClassnamesGenerator { if (typeof colorValue === 'object' && colorValue !== null) { // Loop over the deep objects and return the result for each key of the object. return Object.keys(colorValue).flatMap(shade => { - if (utilName === 'border' && this.isJitModeEnabled()) { + if (utilName === 'border') { return ['', 't', 'r', 'b', 'l'].map( side => `${utilName}-${side}-${colorName}-${shade}`, ); @@ -545,7 +524,7 @@ export class ClassnamesGenerator { // Otherwise... else { // Return the result of merging the utility name with color value - if (utilName === 'border' && this.isJitModeEnabled()) { + if (utilName === 'border') { return ['', 't', 'r', 'b', 'l'].map( side => `${utilName}-${side.length > 0 ? side + '-' : ''}${colorName}`, ); @@ -560,12 +539,7 @@ export class ClassnamesGenerator { this._configParser.getTheme().opacity, ).flatMap(op => classnamesWithColors.map(cls => cls + '/' + op)); - // Return the result classnames based on whether JIT mode is enabled or not - if (this.isJitModeEnabled()) { - return classnamesWithColors.concat(classnamesWithColorsAndOpacitySuffix); - } else { - return classnamesWithColors; - } + return classnamesWithColors.concat(classnamesWithColorsAndOpacitySuffix); }; private getGeneratedClassesWithOpacities = (): ClassesWithOpacities => { diff --git a/src/cli/core/TailwindConfigParser.ts b/src/cli/core/TailwindConfigParser.ts index 348cc85d..e3ffa787 100644 --- a/src/cli/core/TailwindConfigParser.ts +++ b/src/cli/core/TailwindConfigParser.ts @@ -39,11 +39,6 @@ export class TailwindConfigParser { this._pluginsConfig = plugins; } - /** - * Gets the config mode value - */ - public getMode = (): string | undefined => this._mode; - /** * Gets the config prefix value */ @@ -190,11 +185,11 @@ class ThemeClosuresEvaluator { /** * Creates evaluator for `theme()` functions/closures in config file */ - private makeThemePathResolver = (theme: Partial) => ( - path: string, - ): Record => { - return _.get(theme, _.trim(path, `'"`)) as Record | string>; - }; + private makeThemePathResolver = + (theme: Partial) => + (path: string): Record => { + return _.get(theme, _.trim(path, `'"`)) as Record | string>; + }; /** * Evaluate `negative()` functions/closures From e4e28d5f49d550f722bd7fb94e8b7745fa631b4e Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Mon, 4 Oct 2021 13:33:51 +0200 Subject: [PATCH 02/28] chore: pump up tailwindcss version to v3.0.0-alpha.1 --- package.json | 2 +- yarn.lock | 238 +++++++++++++++++---------------------------------- 2 files changed, 79 insertions(+), 161 deletions(-) diff --git a/package.json b/package.json index 752d562b..e2697f5e 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,7 @@ "rollup-plugin-terser": "^7.0.2", "semver": "^7.3.2", "standard-version": "^9.1.0", - "tailwindcss": "^2.2.0", + "tailwindcss": "^3.0.0-alpha.1", "ts-jest": "~26.5.1", "typescript": "^4.3.4" } diff --git a/yarn.lock b/yarn.lock index 7bebdb8c..f8fcbc47 100644 --- a/yarn.lock +++ b/yarn.lock @@ -462,13 +462,6 @@ minimatch "^3.0.4" strip-json-comments "^3.1.1" -"@fullhuman/postcss-purgecss@^4.0.3": - version "4.0.3" - resolved "https://registry.yarnpkg.com/@fullhuman/postcss-purgecss/-/postcss-purgecss-4.0.3.tgz#55d71712ec1c7a88e0d1ba5f10ce7fb6aa05beb4" - integrity sha512-/EnQ9UDWGGqHkn1UKAwSgh+gJHPKmD+Z+5dQ4gWT4qq2NUyez3zqAfZNwFH3eSgmgO+wjTXfhlLchx2M9/K+7Q== - dependencies: - purgecss "^4.0.3" - "@istanbuljs/load-nyc-config@^1.0.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz#fd3db1d59ecf7cf121e80650bb86712f9b55eced" @@ -1113,10 +1106,10 @@ anymatch@^3.0.3, anymatch@~3.1.2: normalize-path "^3.0.0" picomatch "^2.0.4" -arg@^5.0.0: - version "5.0.0" - resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.0.tgz#a20e2bb5710e82950a516b3f933fee5ed478be90" - integrity sha512-4P8Zm2H+BRS+c/xX1LrHw0qKpEhdlZjLCgWy+d78T9vqa2Z2SiD2wMrYuWIAFy5IZUD7nnNXroRttz+0RzlrzQ== +arg@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/arg/-/arg-5.0.1.tgz#eb0c9a8f77786cad2af8ff2b862899842d7b6adb" + integrity sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA== argparse@^1.0.7: version "1.0.10" @@ -1504,11 +1497,6 @@ builtin-modules@^3.1.0: resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-3.2.0.tgz#45d5db99e7ee5e6bc4f362e008bf917ab5049887" integrity sha512-lGzLKcioL90C7wMczpkY0n/oART3MbBa8R9OFGE1rJxoVI86u4WAGfEk8Wjv10eKSyTHVGkSo3bvBylCEtk7LA== -bytes@^3.0.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6" - integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg== - cache-base@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/cache-base/-/cache-base-1.0.1.tgz#0a7f46416831c8b662ee36fe4e7c59d76f666ab2" @@ -1603,6 +1591,14 @@ chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1: ansi-styles "^4.1.0" supports-color "^7.1.0" +chalk@^4.1.2: + version "4.1.2" + resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" + integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA== + dependencies: + ansi-styles "^4.1.0" + supports-color "^7.1.0" + char-regex@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf" @@ -1613,7 +1609,7 @@ chardet@^0.7.0: resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e" integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA== -chokidar@^3.5.1: +chokidar@^3.5.2: version "3.5.2" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75" integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ== @@ -1737,7 +1733,7 @@ collection-visit@^1.0.0: map-visit "^1.0.0" object-visit "^1.0.0" -color-convert@^1.9.0, color-convert@^1.9.1: +color-convert@^1.9.0: version "1.9.3" resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8" integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== @@ -1756,27 +1752,11 @@ color-name@1.1.3: resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25" integrity sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= -color-name@^1.0.0, color-name@~1.1.4: +color-name@^1.1.4, color-name@~1.1.4: version "1.1.4" resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== -color-string@^1.5.4: - version "1.5.5" - resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.5.tgz#65474a8f0e7439625f3d27a6a19d89fc45223014" - integrity sha512-jgIoum0OfQfq9Whcfc2z/VhCNcmQjWbey6qBX0vqt7YICflUmBCh9E9CiQD5GSJ+Uehixm3NUwHVhqUAWRivZg== - dependencies: - color-name "^1.0.0" - simple-swizzle "^0.2.2" - -color@^3.1.3: - version "3.1.3" - resolved "https://registry.yarnpkg.com/color/-/color-3.1.3.tgz#ca67fb4e7b97d611dcde39eceed422067d91596e" - integrity sha512-xgXAcTHa2HeFCGLE9Xs/R82hujGtu9Jd9x4NW3T34+OMs7VoPsjwzRczKHvTAHeJwWFwX5j15+MgAppE8ztObQ== - dependencies: - color-convert "^1.9.1" - color-string "^1.5.4" - colorette@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.2.2.tgz#cbcc79d5e99caea2dbf10eb3a26fd8b3e6acfa94" @@ -1799,7 +1779,7 @@ commander@^2.20.0, commander@^2.9.0: resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33" integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ== -commander@^6.0.0, commander@^6.2.0: +commander@^6.2.0: version "6.2.1" resolved "https://registry.yarnpkg.com/commander/-/commander-6.2.1.tgz#0792eb682dfbc325999bb2b84fddddba110ac73c" integrity sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA== @@ -2050,6 +2030,17 @@ cosmiconfig@^7.0.0: path-type "^4.0.0" yaml "^1.10.0" +cosmiconfig@^7.0.1: + version "7.0.1" + resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d" + integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ== + dependencies: + "@types/parse-json" "^4.0.0" + import-fresh "^3.2.1" + parse-json "^5.0.0" + path-type "^4.0.0" + yaml "^1.10.0" + create-ecdh@^4.0.0: version "4.0.4" resolved "https://registry.yarnpkg.com/create-ecdh/-/create-ecdh-4.0.4.tgz#d6e7f4bffa66736085a0762fd3a632684dabcc4e" @@ -2118,11 +2109,6 @@ crypto-browserify@^3.11.0: randombytes "^2.0.0" randomfill "^1.0.3" -css-unit-converter@^1.1.1: - version "1.1.2" - resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.2.tgz#4c77f5a1954e6dbff60695ecb214e3270436ab21" - integrity sha512-IiJwMC8rdZE0+xiEZHeru6YoONC4rfPMqGm2W85jMIbkFvv5nFTwJVFHam2eFrN6txmoUYFAFXiv8ICVeTO0MA== - cssesc@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-3.0.0.tgz#37741919903b868565e1c09ea747445cd18983ee" @@ -2318,10 +2304,10 @@ detective@^5.2.0: defined "^1.0.0" minimist "^1.1.1" -didyoumean@^1.2.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.1.tgz#e92edfdada6537d484d73c0172fd1eba0c4976ff" - integrity sha1-6S7f2tplN9SE1zwBcv0eugxJdv8= +didyoumean@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037" + integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw== diff-sequences@^26.6.2: version "26.6.2" @@ -2809,7 +2795,7 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3: resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525" integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q== -fast-glob@^3.1.1, fast-glob@^3.2.5: +fast-glob@^3.1.1: version "3.2.5" resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.5.tgz#7939af2a656de79a4f1901903ee8adcaa7cb9661" integrity sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg== @@ -2821,6 +2807,17 @@ fast-glob@^3.1.1, fast-glob@^3.2.5: micromatch "^4.0.2" picomatch "^2.2.1" +fast-glob@^3.2.7: + version "3.2.7" + resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1" + integrity sha512-rYGMRwip6lUMvYD3BTScMwT1HtAs2d71SMv66Vrxs0IekGZEjhM0pcMfjQPnknBt2zeCwQMEupiN02ZP4DiT1Q== + dependencies: + "@nodelib/fs.stat" "^2.0.2" + "@nodelib/fs.walk" "^1.2.3" + glob-parent "^5.1.2" + merge2 "^1.3.0" + micromatch "^4.0.4" + fast-json-stable-stringify@2.x, fast-json-stable-stringify@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633" @@ -2965,15 +2962,6 @@ fs-access@^1.0.1: dependencies: null-check "^1.0.0" -fs-extra@^10.0.0: - version "10.0.0" - resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.0.tgz#9ff61b655dde53fb34a82df84bb214ce802e17c1" - integrity sha512-C5owb14u9eJwizKGdchcDUQeFtlSHHthBk8pbX9Vc1PFZrLombudjDnNns88aYslCyF6IY5SUw3Roz6xShcEIQ== - dependencies: - graceful-fs "^4.2.0" - jsonfile "^6.0.1" - universalify "^2.0.0" - fs-extra@^9.0.0: version "9.1.0" resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d" @@ -3121,12 +3109,12 @@ glob-parent@^5.1.0, glob-parent@^5.1.2, glob-parent@~5.1.2: dependencies: is-glob "^4.0.1" -glob-parent@^6.0.0: - version "6.0.0" - resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.0.tgz#f851b59b388e788f3a44d63fab50382b2859c33c" - integrity sha512-Hdd4287VEJcZXUwv1l8a+vXC1GjOQqXe+VS30w/ypihpcnu9M1n3xeYeJu5CBpeEQj2nAab2xxz28GuA3vp4Ww== +glob-parent@^6.0.1: + version "6.0.2" + resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3" + integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A== dependencies: - is-glob "^4.0.1" + is-glob "^4.0.3" glob@^6.0.4: version "6.0.4" @@ -3317,11 +3305,6 @@ html-escaper@^2.0.0: resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453" integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg== -html-tags@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140" - integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg== - http-proxy-agent@^4.0.1: version "4.0.1" resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-4.0.1.tgz#8a8c8ef7f5932ccf953c296ca8291b95aa74aa3a" @@ -3490,11 +3473,6 @@ is-arrayish@^0.2.1: resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d" integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0= -is-arrayish@^0.3.1: - version "0.3.2" - resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03" - integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ== - is-bigint@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.2.tgz#ffb381442503235ad245ea89e45b3dbff040ee5a" @@ -3619,6 +3597,13 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1: dependencies: is-extglob "^2.1.1" +is-glob@^4.0.3: + version "4.0.3" + resolved "https://registry.yarnpkg.com/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084" + integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg== + dependencies: + is-extglob "^2.1.1" + is-interactive@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-interactive/-/is-interactive-1.0.0.tgz#cea6e6ae5c870a7b0a0004070b7b587e0252912e" @@ -4564,16 +4549,6 @@ lodash.merge@^4.6.2: resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== -lodash.toarray@^4.4.0: - version "4.4.0" - resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561" - integrity sha1-JMS/zWsvuji/0FlNsRedjptlZWE= - -lodash.topath@^4.5.2: - version "4.5.2" - resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009" - integrity sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak= - lodash.truncate@^4.4.2: version "4.4.2" resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193" @@ -4755,7 +4730,7 @@ micromatch@^3.1.4: snapdragon "^0.8.1" to-regex "^3.0.2" -micromatch@^4.0.2: +micromatch@^4.0.2, micromatch@^4.0.4: version "4.0.4" resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9" integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg== @@ -4849,11 +4824,6 @@ mkdirp@^0.5.0: dependencies: minimist "^1.2.5" -modern-normalize@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/modern-normalize/-/modern-normalize-1.1.0.tgz#da8e80140d9221426bd4f725c6e11283d34f90b7" - integrity sha512-2lMlY1Yc1+CUy0gw4H95uNN7vjbpoED7NNRSBHE25nWfLBdmMzFCsPshlzbxHz+gYMcBEUN8V4pU16prcdPSgA== - modify-values@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022" @@ -4924,13 +4894,6 @@ no-case@^3.0.4: lower-case "^2.0.2" tslib "^2.0.3" -node-emoji@^1.8.1: - version "1.10.0" - resolved "https://registry.yarnpkg.com/node-emoji/-/node-emoji-1.10.0.tgz#8886abd25d9c7bb61802a658523d1f8d2a89b2da" - integrity sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw== - dependencies: - lodash.toarray "^4.4.0" - node-int64@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b" @@ -5444,7 +5407,7 @@ postcss-js@^3.0.3: camelcase-css "^2.0.1" postcss "^8.1.6" -postcss-load-config@^3.0.1: +postcss-load-config@^3.1.0: version "3.1.0" resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.0.tgz#d39c47091c4aec37f50272373a6a648ef5e97829" integrity sha512-ipM8Ds01ZUophjDTQYSVP70slFSYg3T0/zyfII5vzhN6V57YSxMgG5syXuwi5VtS8wSf3iL30v0uBdoIVx4Q0g== @@ -5453,14 +5416,14 @@ postcss-load-config@^3.0.1: lilconfig "^2.0.3" yaml "^1.10.2" -postcss-nested@5.0.5: - version "5.0.5" - resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.5.tgz#f0a107d33a9fab11d7637205f5321e27223e3603" - integrity sha512-GSRXYz5bccobpTzLQZXOnSOfKl6TwVr5CyAQJUPub4nuRJSOECK5AqurxVgmtxP48p0Kc/ndY/YyS1yqldX0Ew== +postcss-nested@5.0.6: + version "5.0.6" + resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.6.tgz#466343f7fc8d3d46af3e7dba3fcd47d052a945bc" + integrity sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA== dependencies: - postcss-selector-parser "^6.0.4" + postcss-selector-parser "^6.0.6" -postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector-parser@^6.0.6: +postcss-selector-parser@^6.0.6: version "6.0.6" resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.6.tgz#2c5bba8174ac2f6981ab631a42ab0ee54af332ea" integrity sha512-9LXrvaaX3+mcv5xkg5kFwqSzSH1JIObIx51PrndZwlmznwXRfxMddDvo9gve3gVR8ZTKgoFDdWkbRFmEhT4PMg== @@ -5468,17 +5431,12 @@ postcss-selector-parser@^6.0.2, postcss-selector-parser@^6.0.4, postcss-selector cssesc "^3.0.0" util-deprecate "^1.0.2" -postcss-value-parser@^3.3.0: - version "3.3.1" - resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" - integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== - postcss-value-parser@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb" integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ== -postcss@^8.1.6, postcss@^8.2.1: +postcss@^8.1.6: version "8.3.5" resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.3.5.tgz#982216b113412bc20a86289e91eb994952a5b709" integrity sha512-NxTuJocUhYGsMiMFHDUkmjSKT3EdH4/WbGF6GCi1NDGk+vbcUTun4fpbOqaPtD8IIsztA2ilZm2DhYCuyN58gA== @@ -5512,11 +5470,6 @@ pretty-format@^26.0.0, pretty-format@^26.6.2: ansi-styles "^4.0.0" react-is "^17.0.1" -pretty-hrtime@^1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" - integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE= - process-es6@^0.11.2, process-es6@^0.11.6: version "0.11.6" resolved "https://registry.yarnpkg.com/process-es6/-/process-es6-0.11.6.tgz#c6bb389f9a951f82bd4eb169600105bd2ff9c778" @@ -5580,16 +5533,6 @@ punycode@^2.1.0, punycode@^2.1.1: resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec" integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A== -purgecss@^4.0.3: - version "4.0.3" - resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-4.0.3.tgz#8147b429f9c09db719e05d64908ea8b672913742" - integrity sha512-PYOIn5ibRIP34PBU9zohUcCI09c7drPJJtTDAc0Q6QlRz2/CHQ8ywGLdE7ZhxU2VTqB7p5wkvj5Qcm05Rz3Jmw== - dependencies: - commander "^6.0.0" - glob "^7.0.0" - postcss "^8.2.1" - postcss-selector-parser "^6.0.2" - q@^1.5.1: version "1.5.1" resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7" @@ -5755,14 +5698,6 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" -reduce-css-calc@^2.1.8: - version "2.1.8" - resolved "https://registry.yarnpkg.com/reduce-css-calc/-/reduce-css-calc-2.1.8.tgz#7ef8761a28d614980dc0c982f772c93f7a99de03" - integrity sha512-8liAVezDmUcH+tdzoEGrhfbGcP7nOV4NkGE3a74+qqvE7nt9i4sKLGBuZNOnpI4WiGksiNPklZxva80061QiPg== - dependencies: - css-unit-converter "^1.1.1" - postcss-value-parser "^3.3.0" - regex-not@^1.0.0, regex-not@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c" @@ -6127,13 +6062,6 @@ signal-exit@^3.0.0, signal-exit@^3.0.2: resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.3.tgz#a1410c2edd8f077b08b4e253c8eacfcaf057461c" integrity sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA== -simple-swizzle@^0.2.2: - version "0.2.2" - resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a" - integrity sha1-pNprY1/8zMoz9w0Xy5JZLeleVXo= - dependencies: - is-arrayish "^0.3.1" - sisteransi@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed" @@ -6505,40 +6433,30 @@ table@^6.0.9: string-width "^4.2.0" strip-ansi "^6.0.0" -tailwindcss@^2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-2.2.0.tgz#210fc50ddf8ce45be38d6aec593cf623ee3b19f5" - integrity sha512-vzyictuac60cUfky6R4gFW98glcc/UxpaCH+Mt9dq+LEPdZq2Dpvo5iYpPaemutOIjfeiY0Y8j0ZgJG3wBaFDQ== +tailwindcss@^3.0.0-alpha.1: + version "3.0.0-alpha.1" + resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.0-alpha.1.tgz#b67ac8f2676a7d80bb03ce4f118638b45752ab9a" + integrity sha512-VweVLyu1tpo/i2MnoyDIunToZHYhHRZLGuKDt9I+nnjFoW07NhDwwHWsUyRHKowP5MZaHduhV+AVlM6Auy7m3A== dependencies: - "@fullhuman/postcss-purgecss" "^4.0.3" - arg "^5.0.0" - bytes "^3.0.0" - chalk "^4.1.1" - chokidar "^3.5.1" - color "^3.1.3" - cosmiconfig "^7.0.0" + arg "^5.0.1" + chalk "^4.1.2" + chokidar "^3.5.2" + color-name "^1.1.4" + cosmiconfig "^7.0.1" detective "^5.2.0" - didyoumean "^1.2.1" + didyoumean "^1.2.2" dlv "^1.1.3" - fast-glob "^3.2.5" - fs-extra "^10.0.0" - glob-parent "^6.0.0" - html-tags "^3.1.0" + fast-glob "^3.2.7" + glob-parent "^6.0.1" is-glob "^4.0.1" - lodash "^4.17.21" - lodash.topath "^4.5.2" - modern-normalize "^1.1.0" - node-emoji "^1.8.1" normalize-path "^3.0.0" object-hash "^2.2.0" postcss-js "^3.0.3" - postcss-load-config "^3.0.1" - postcss-nested "5.0.5" + postcss-load-config "^3.1.0" + postcss-nested "5.0.6" postcss-selector-parser "^6.0.6" postcss-value-parser "^4.1.0" - pretty-hrtime "^1.0.3" quick-lru "^5.1.1" - reduce-css-calc "^2.1.8" resolve "^1.20.0" tmp "^0.2.1" From f978a3ab8924154ed075e6014a29551a00184669 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Mon, 4 Oct 2021 17:40:00 +0200 Subject: [PATCH 03/28] feat: add variants to the cli as it's removed from the new config --- src/cli/core/ClassnamesGenerator.ts | 26 +--- src/cli/core/TailwindConfigParser.ts | 37 +----- src/cli/core/constants.ts | 191 +++++++++++++++++++++++++++ src/cli/types/config.ts | 3 +- 4 files changed, 198 insertions(+), 59 deletions(-) create mode 100644 src/cli/core/constants.ts diff --git a/src/cli/core/ClassnamesGenerator.ts b/src/cli/core/ClassnamesGenerator.ts index a01b3fd8..cd9956d1 100644 --- a/src/cli/core/ClassnamesGenerator.ts +++ b/src/cli/core/ClassnamesGenerator.ts @@ -9,6 +9,7 @@ import { } from '../types/classes'; import {TConfigTheme, TConfigDarkMode} from '../types/config'; import {tailwindLabsPlugins} from '../lib/tailwindlabs-plugins'; +import {allVariants, regularClassGroupKeys} from './constants'; /** * Responsible for generating the types from a parsed config by ConfigScanner. @@ -379,27 +380,10 @@ export class ClassnamesGenerator { private pseudoClasses = (): string[] => { // Initialise a pseudoclasses variable with empty array value. const pseudoClasses: string[] = []; - // prettier-ignore - const allVariants = [ - 'responsive', 'motion-safe', 'motion-reduce', 'first', 'last', 'odd', 'even', 'visited', 'checked', - 'group-hover', 'group-focus', 'focus-within', 'hover', 'focus', 'focus-visible', 'active', 'disabled', - // Exhaustive pseudo-classess - 'only', 'first-of-type', 'last-of-type', 'only-of-type', 'target', 'default', 'indeterminate', - 'placeholder-shown', 'autofill', 'required', 'valid', 'invalid', 'in-range', 'out-of-range', - // New peer-*, selection & marker variants and before/after - 'peer-hover', 'peer-checked', 'peer-focus', 'selection', 'marker', 'before', 'after' - ]; - - // HACK: This block is just to make accessibility object align with other types object shape - const variantsConfig = Object.entries( - _.merge(this._configParser.getVariants(), { - screenReaders: this._configParser.getVariants().accessibility, - }), - ); // For every key-value pair in the variants section in tailwind config... // eslint-disable-next-line prefer-const - for (let [regularClassGroupKey, pseudoClassesVariantsForKey] of variantsConfig) { + for (const regularClassGroupKey of regularClassGroupKeys) { // Find all matching names from the generated regular classes with the key of the variants config Object.keys(this._generatedRegularClassnames).map(key => { // If the current key is found to be a member of the generated regular classes group... @@ -425,13 +409,11 @@ export class ClassnamesGenerator { generatedClassGroup.map(classname => { const isDarkModeEnabled = this._darkMode !== false; - // Enable all variants - pseudoClassesVariantsForKey = allVariants; // Add 'peer' utility classname. used with peer-* classnames pseudoClasses.push('peer'); // Generate the classname of each variant... - pseudoClassesVariantsForKey.map(variant => { + allVariants.map(variant => { if (variant === 'responsive') { // Get the breakpoints from config const [breakpoints] = this._configParser.getThemeProperty('screens'); @@ -444,7 +426,7 @@ export class ClassnamesGenerator { ); // Add stackable dark and responsive pseudoclasses if the key has both variants - if (pseudoClassesVariantsForKey.includes('dark') && isDarkModeEnabled) { + if (isDarkModeEnabled) { pseudoClasses.push( breakpointVariant + this._separator + diff --git a/src/cli/core/TailwindConfigParser.ts b/src/cli/core/TailwindConfigParser.ts index e3ffa787..d9f24816 100644 --- a/src/cli/core/TailwindConfigParser.ts +++ b/src/cli/core/TailwindConfigParser.ts @@ -1,11 +1,6 @@ import _ from 'lodash'; import {defaultTailwindConfig} from '../lib/defaultTailwindConfig'; -import { - TTailwindCSSConfig, - TConfigVariants, - TConfigDarkMode, - TConfigPlugins, -} from '../types/config'; +import {TTailwindCSSConfig, TConfigDarkMode, TConfigPlugins} from '../types/config'; import {TConfigTheme, TThemeItems} from '../types/config'; /* eslint-disable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-return */ @@ -19,7 +14,6 @@ export class TailwindConfigParser { private readonly _darkMode: TConfigDarkMode; private readonly _themeConfig: TConfigTheme; private _evaluatedTheme: TConfigTheme | null; - private readonly _variantsConfig: TConfigVariants; private readonly _pluginsConfig: TConfigPlugins; constructor(tailwindConfig: TTailwindCSSConfig, plugins: TConfigPlugins) { @@ -31,9 +25,6 @@ export class TailwindConfigParser { this._separator = _.isEmpty(tailwindConfig.separator) ? ':' : (tailwindConfig.separator as string); - this._variantsConfig = _.isEmpty(tailwindConfig.variants) - ? defaultTailwindConfig.variants // Order does matter, defaultVariants will be overridden by themeVariants. - : {...defaultTailwindConfig.variants, ...tailwindConfig.variants}; this._themeConfig = {...defaultTailwindConfig.theme, ...tailwindConfig.theme}; this._evaluatedTheme = null; this._pluginsConfig = plugins; @@ -120,32 +111,6 @@ export class TailwindConfigParser { return this._evaluatedTheme; }; - /** - * Get config variants object - */ - public getVariants = (): Omit => { - // Get the `variants.extend` object - const variantsConfigExtend = this._variantsConfig?.extend; - - // If the variants.extend exists... - if (!!variantsConfigExtend) { - // Return the result of merging the variants with extend - return _.mergeWith( - this._variantsConfig, - variantsConfigExtend, - (variantsValues, variantsExtendValues) => { - if (_.isArray(variantsValues)) { - return variantsValues.concat(variantsExtendValues); - } - }, - ); - // Otherwise... - } else { - // Return the variants - return this._variantsConfig; - } - }; - /** * Get the value (and key) of a supplied theme property. * @param themeProperty The theme property name diff --git a/src/cli/core/constants.ts b/src/cli/core/constants.ts new file mode 100644 index 00000000..a306acba --- /dev/null +++ b/src/cli/core/constants.ts @@ -0,0 +1,191 @@ +export const allVariants = [ + 'responsive', + 'motion-safe', + 'motion-reduce', + 'first', + 'last', + 'odd', + 'even', + 'visited', + 'checked', + 'group-hover', + 'group-focus', + 'focus-within', + 'hover', + 'focus', + 'focus-visible', + 'active', + 'disabled', + // Exhaustive pseudo-classess + 'only', + 'first-of-type', + 'last-of-type', + 'only-of-type', + 'target', + 'default', + 'indeterminate', + 'placeholder-shown', + 'autofill', + 'required', + 'valid', + 'invalid', + 'in-range', + 'out-of-range', + // New peer-*, selection & marker variants and before/after + 'peer-hover', + 'peer-checked', + 'peer-focus', + 'selection', + 'marker', + 'before', + 'after', + // dark mode utility + 'dark', +]; + +export const regularClassGroupKeys = [ + // 'accessibility', + 'screenReaders', + 'alignContent', + 'alignItems', + 'alignSelf', + 'animation', + 'appearance', + 'backdropBlur', + 'backdropBrightness', + 'backdropContrast', + 'backdropDropShadow', + 'backdropFilter', + 'backdropGrayscale', + 'backdropHueRotate', + 'backdropInvert', + 'backdropSaturate', + 'backdropSepia', + 'backgroundAttachment', + 'backgroundBlendMode', + 'backgroundClip', + 'backgroundColor', + 'backgroundImage', + 'backgroundOpacity', + 'backgroundPosition', + 'backgroundRepeat', + 'backgroundSize', + 'backgroundOrigin', + 'blur', + 'borderCollapse', + 'borderColor', + 'borderOpacity', + 'borderRadius', + 'borderStyle', + 'borderWidth', + 'boxDecorationBreak', + 'boxShadow', + 'boxSizing', + 'brightness', + 'clear', + 'container', + 'contrast', + 'cursor', + 'display', + 'divideColor', + 'divideOpacity', + 'divideStyle', + 'divideWidth', + 'dropShadow', + 'fill', + 'filter', + 'flex', + 'flexDirection', + 'flexGrow', + 'flexShrink', + 'flexWrap', + 'float', + 'fontFamily', + 'fontSize', + 'fontSmoothing', + 'fontStyle', + 'fontVariantNumeric', + 'fontWeight', + 'gap', + 'gradientColorStops', + 'grayscale', + 'gridAutoColumns', + 'gridAutoFlow', + 'gridAutoRows', + 'gridColumn', + 'gridColumnEnd', + 'gridColumnStart', + 'gridRow', + 'gridRowEnd', + 'gridRowStart', + 'gridTemplateColumns', + 'gridTemplateRows', + 'height', + 'hueRotate', + 'inset', + 'invert', + 'isolation', + 'justifyContent', + 'justifyItems', + 'justifySelf', + 'letterSpacing', + 'lineHeight', + 'listStylePosition', + 'listStyleType', + 'margin', + 'maxHeight', + 'maxWidth', + 'minHeight', + 'minWidth', + 'mixBlendMode', + 'objectFit', + 'objectPosition', + 'opacity', + 'order', + 'outline', + 'overflow', + 'overscrollBehavior', + 'padding', + 'placeContent', + 'placeItems', + 'placeSelf', + 'placeholderColor', + 'placeholderOpacity', + 'pointerEvents', + 'position', + 'resize', + 'ringColor', + 'ringOffsetColor', + 'ringOffsetWidth', + 'ringOpacity', + 'ringWidth', + 'rotate', + 'saturate', + 'scale', + 'sepia', + 'skew', + 'space', + 'stroke', + 'strokeWidth', + 'tableLayout', + 'textAlign', + 'textColor', + 'textDecoration', + 'textOpacity', + 'textOverflow', + 'textTransform', + 'transform', + 'transformOrigin', + 'transitionDelay', + 'transitionDuration', + 'transitionProperty', + 'transitionTimingFunction', + 'translate', + 'userSelect', + 'verticalAlign', + 'visibility', + 'whitespace', + 'width', + 'wordBreak', + 'zIndex', +]; diff --git a/src/cli/types/config.ts b/src/cli/types/config.ts index 722c68a8..fe106fbb 100644 --- a/src/cli/types/config.ts +++ b/src/cli/types/config.ts @@ -1,3 +1,4 @@ +import {allVariants} from '../core/constants'; import {defaultTailwindConfig} from '../lib/defaultTailwindConfig'; export type TTailwindCSSConfig = Partial< @@ -14,4 +15,4 @@ export type TConfigPlugins = Partial Date: Thu, 14 Oct 2021 14:40:42 +0200 Subject: [PATCH 04/28] chore: move constants to a constants folder --- src/cli/core/ClassnamesGenerator.ts | 3 +- src/cli/core/constants/allVariants.ts | 44 ++++++++++++++++++ .../regularClassGroupKeys.ts} | 45 ------------------- src/cli/types/config.ts | 2 +- 4 files changed, 47 insertions(+), 47 deletions(-) create mode 100644 src/cli/core/constants/allVariants.ts rename src/cli/core/{constants.ts => constants/regularClassGroupKeys.ts} (77%) diff --git a/src/cli/core/ClassnamesGenerator.ts b/src/cli/core/ClassnamesGenerator.ts index cd9956d1..f1b42c38 100644 --- a/src/cli/core/ClassnamesGenerator.ts +++ b/src/cli/core/ClassnamesGenerator.ts @@ -9,7 +9,8 @@ import { } from '../types/classes'; import {TConfigTheme, TConfigDarkMode} from '../types/config'; import {tailwindLabsPlugins} from '../lib/tailwindlabs-plugins'; -import {allVariants, regularClassGroupKeys} from './constants'; +import {allVariants} from './constants/allVariants'; +import {regularClassGroupKeys} from './constants/regularClassGroupKeys'; /** * Responsible for generating the types from a parsed config by ConfigScanner. diff --git a/src/cli/core/constants/allVariants.ts b/src/cli/core/constants/allVariants.ts new file mode 100644 index 00000000..bfdd3c08 --- /dev/null +++ b/src/cli/core/constants/allVariants.ts @@ -0,0 +1,44 @@ +export const allVariants = [ + 'responsive', + 'motion-safe', + 'motion-reduce', + 'first', + 'last', + 'odd', + 'even', + 'visited', + 'checked', + 'group-hover', + 'group-focus', + 'focus-within', + 'hover', + 'focus', + 'focus-visible', + 'active', + 'disabled', + // Exhaustive pseudo-classess + 'only', + 'first-of-type', + 'last-of-type', + 'only-of-type', + 'target', + 'default', + 'indeterminate', + 'placeholder-shown', + 'autofill', + 'required', + 'valid', + 'invalid', + 'in-range', + 'out-of-range', + // New peer-*, selection & marker variants and before/after + 'peer-hover', + 'peer-checked', + 'peer-focus', + 'selection', + 'marker', + 'before', + 'after', + // dark mode utility + 'dark', +]; diff --git a/src/cli/core/constants.ts b/src/cli/core/constants/regularClassGroupKeys.ts similarity index 77% rename from src/cli/core/constants.ts rename to src/cli/core/constants/regularClassGroupKeys.ts index a306acba..49ab4254 100644 --- a/src/cli/core/constants.ts +++ b/src/cli/core/constants/regularClassGroupKeys.ts @@ -1,48 +1,3 @@ -export const allVariants = [ - 'responsive', - 'motion-safe', - 'motion-reduce', - 'first', - 'last', - 'odd', - 'even', - 'visited', - 'checked', - 'group-hover', - 'group-focus', - 'focus-within', - 'hover', - 'focus', - 'focus-visible', - 'active', - 'disabled', - // Exhaustive pseudo-classess - 'only', - 'first-of-type', - 'last-of-type', - 'only-of-type', - 'target', - 'default', - 'indeterminate', - 'placeholder-shown', - 'autofill', - 'required', - 'valid', - 'invalid', - 'in-range', - 'out-of-range', - // New peer-*, selection & marker variants and before/after - 'peer-hover', - 'peer-checked', - 'peer-focus', - 'selection', - 'marker', - 'before', - 'after', - // dark mode utility - 'dark', -]; - export const regularClassGroupKeys = [ // 'accessibility', 'screenReaders', diff --git a/src/cli/types/config.ts b/src/cli/types/config.ts index fe106fbb..cdaf297a 100644 --- a/src/cli/types/config.ts +++ b/src/cli/types/config.ts @@ -1,4 +1,4 @@ -import {allVariants} from '../core/constants'; +import {allVariants} from '../core/constants/allVariants'; import {defaultTailwindConfig} from '../lib/defaultTailwindConfig'; export type TTailwindCSSConfig = Partial< From 71b8d227494cca152482c3b020ed372e1ab4aa5a Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Fri, 15 Oct 2021 15:29:07 +0200 Subject: [PATCH 05/28] chore: add colors to constants --- src/cli/core/constants/tailwindColors.ts | 271 +++++++++++++++++++++++ 1 file changed, 271 insertions(+) create mode 100644 src/cli/core/constants/tailwindColors.ts diff --git a/src/cli/core/constants/tailwindColors.ts b/src/cli/core/constants/tailwindColors.ts new file mode 100644 index 00000000..b0e94d9e --- /dev/null +++ b/src/cli/core/constants/tailwindColors.ts @@ -0,0 +1,271 @@ +export const tailwindColors = { + inherit: 'inherit', + current: 'currentColor', + transparent: 'transparent', + black: '#000', + white: '#fff', + slate: { + 50: '#f8fafc', + 100: '#f1f5f9', + 200: '#e2e8f0', + 300: '#cbd5e1', + 400: '#94a3b8', + 500: '#64748b', + 600: '#475569', + 700: '#334155', + 800: '#1e293b', + 900: '#0f172a', + }, + gray: { + 50: '#f9fafb', + 100: '#f3f4f6', + 200: '#e5e7eb', + 300: '#d1d5db', + 400: '#9ca3af', + 500: '#6b7280', + 600: '#4b5563', + 700: '#374151', + 800: '#1f2937', + 900: '#111827', + }, + zinc: { + 50: '#fafafa', + 100: '#f4f4f5', + 200: '#e4e4e7', + 300: '#d4d4d8', + 400: '#a1a1aa', + 500: '#71717a', + 600: '#52525b', + 700: '#3f3f46', + 800: '#27272a', + 900: '#18181b', + }, + neutral: { + 50: '#fafafa', + 100: '#f5f5f5', + 200: '#e5e5e5', + 300: '#d4d4d4', + 400: '#a3a3a3', + 500: '#737373', + 600: '#525252', + 700: '#404040', + 800: '#262626', + 900: '#171717', + }, + stone: { + 50: '#fafaf9', + 100: '#f5f5f4', + 200: '#e7e5e4', + 300: '#d6d3d1', + 400: '#a8a29e', + 500: '#78716c', + 600: '#57534e', + 700: '#44403c', + 800: '#292524', + 900: '#1c1917', + }, + red: { + 50: '#fef2f2', + 100: '#fee2e2', + 200: '#fecaca', + 300: '#fca5a5', + 400: '#f87171', + 500: '#ef4444', + 600: '#dc2626', + 700: '#b91c1c', + 800: '#991b1b', + 900: '#7f1d1d', + }, + orange: { + 50: '#fff7ed', + 100: '#ffedd5', + 200: '#fed7aa', + 300: '#fdba74', + 400: '#fb923c', + 500: '#f97316', + 600: '#ea580c', + 700: '#c2410c', + 800: '#9a3412', + 900: '#7c2d12', + }, + amber: { + 50: '#fffbeb', + 100: '#fef3c7', + 200: '#fde68a', + 300: '#fcd34d', + 400: '#fbbf24', + 500: '#f59e0b', + 600: '#d97706', + 700: '#b45309', + 800: '#92400e', + 900: '#78350f', + }, + yellow: { + 50: '#fefce8', + 100: '#fef9c3', + 200: '#fef08a', + 300: '#fde047', + 400: '#facc15', + 500: '#eab308', + 600: '#ca8a04', + 700: '#a16207', + 800: '#854d0e', + 900: '#713f12', + }, + lime: { + 50: '#f7fee7', + 100: '#ecfccb', + 200: '#d9f99d', + 300: '#bef264', + 400: '#a3e635', + 500: '#84cc16', + 600: '#65a30d', + 700: '#4d7c0f', + 800: '#3f6212', + 900: '#365314', + }, + green: { + 50: '#f0fdf4', + 100: '#dcfce7', + 200: '#bbf7d0', + 300: '#86efac', + 400: '#4ade80', + 500: '#22c55e', + 600: '#16a34a', + 700: '#15803d', + 800: '#166534', + 900: '#14532d', + }, + emerald: { + 50: '#ecfdf5', + 100: '#d1fae5', + 200: '#a7f3d0', + 300: '#6ee7b7', + 400: '#34d399', + 500: '#10b981', + 600: '#059669', + 700: '#047857', + 800: '#065f46', + 900: '#064e3b', + }, + teal: { + 50: '#f0fdfa', + 100: '#ccfbf1', + 200: '#99f6e4', + 300: '#5eead4', + 400: '#2dd4bf', + 500: '#14b8a6', + 600: '#0d9488', + 700: '#0f766e', + 800: '#115e59', + 900: '#134e4a', + }, + cyan: { + 50: '#ecfeff', + 100: '#cffafe', + 200: '#a5f3fc', + 300: '#67e8f9', + 400: '#22d3ee', + 500: '#06b6d4', + 600: '#0891b2', + 700: '#0e7490', + 800: '#155e75', + 900: '#164e63', + }, + sky: { + 50: '#f0f9ff', + 100: '#e0f2fe', + 200: '#bae6fd', + 300: '#7dd3fc', + 400: '#38bdf8', + 500: '#0ea5e9', + 600: '#0284c7', + 700: '#0369a1', + 800: '#075985', + 900: '#0c4a6e', + }, + blue: { + 50: '#eff6ff', + 100: '#dbeafe', + 200: '#bfdbfe', + 300: '#93c5fd', + 400: '#60a5fa', + 500: '#3b82f6', + 600: '#2563eb', + 700: '#1d4ed8', + 800: '#1e40af', + 900: '#1e3a8a', + }, + indigo: { + 50: '#eef2ff', + 100: '#e0e7ff', + 200: '#c7d2fe', + 300: '#a5b4fc', + 400: '#818cf8', + 500: '#6366f1', + 600: '#4f46e5', + 700: '#4338ca', + 800: '#3730a3', + 900: '#312e81', + }, + violet: { + 50: '#f5f3ff', + 100: '#ede9fe', + 200: '#ddd6fe', + 300: '#c4b5fd', + 400: '#a78bfa', + 500: '#8b5cf6', + 600: '#7c3aed', + 700: '#6d28d9', + 800: '#5b21b6', + 900: '#4c1d95', + }, + purple: { + 50: '#faf5ff', + 100: '#f3e8ff', + 200: '#e9d5ff', + 300: '#d8b4fe', + 400: '#c084fc', + 500: '#a855f7', + 600: '#9333ea', + 700: '#7e22ce', + 800: '#6b21a8', + 900: '#581c87', + }, + fuchsia: { + 50: '#fdf4ff', + 100: '#fae8ff', + 200: '#f5d0fe', + 300: '#f0abfc', + 400: '#e879f9', + 500: '#d946ef', + 600: '#c026d3', + 700: '#a21caf', + 800: '#86198f', + 900: '#701a75', + }, + pink: { + 50: '#fdf2f8', + 100: '#fce7f3', + 200: '#fbcfe8', + 300: '#f9a8d4', + 400: '#f472b6', + 500: '#ec4899', + 600: '#db2777', + 700: '#be185d', + 800: '#9d174d', + 900: '#831843', + }, + rose: { + 50: '#fff1f2', + 100: '#ffe4e6', + 200: '#fecdd3', + 300: '#fda4af', + 400: '#fb7185', + 500: '#f43f5e', + 600: '#e11d48', + 700: '#be123c', + 800: '#9f1239', + 900: '#881337', + }, +}; From 462f8a75383ea0d4f39ee931f710fc0fad9ceb98 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Sat, 16 Oct 2021 13:51:51 +0200 Subject: [PATCH 06/28] feat: update config closure evaluator to evaluate new tailwind3 configs --- src/cli/core/TailwindConfigParser.ts | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/cli/core/TailwindConfigParser.ts b/src/cli/core/TailwindConfigParser.ts index d9f24816..c9ec2bbd 100644 --- a/src/cli/core/TailwindConfigParser.ts +++ b/src/cli/core/TailwindConfigParser.ts @@ -2,6 +2,7 @@ import _ from 'lodash'; import {defaultTailwindConfig} from '../lib/defaultTailwindConfig'; import {TTailwindCSSConfig, TConfigDarkMode, TConfigPlugins} from '../types/config'; import {TConfigTheme, TThemeItems} from '../types/config'; +import {tailwindColors} from './constants/tailwindColors'; /* eslint-disable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-return */ /** @@ -136,7 +137,9 @@ class ThemeClosuresEvaluator { // If a value is a function... if (_.isFunction(value)) { // evaluate the value by running the evaluator methods in this class. - return value(this.makeThemePathResolver(valueSourceTheme || this.themeConfig), { + return value({ + colors: tailwindColors, + theme: this.makeThemePathResolver(valueSourceTheme || this.themeConfig), negative: ThemeClosuresEvaluator.negative.bind(this), breakpoints: ThemeClosuresEvaluator.breakpoints.bind(this), }); From cc3e294b426c2c32e69d1f15fcd63eaf496f21e6 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Sat, 16 Oct 2021 14:09:41 +0200 Subject: [PATCH 07/28] feat!: rename overflow-clip & overflow-ellipsis to text-clip & text-ellipsis --- src/cli/lib/non-configurable/typography.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cli/lib/non-configurable/typography.ts b/src/cli/lib/non-configurable/typography.ts index 3738e59c..9d32e4d0 100644 --- a/src/cli/lib/non-configurable/typography.ts +++ b/src/cli/lib/non-configurable/typography.ts @@ -22,7 +22,7 @@ const textDecoration = ['underline', 'line-through', 'no-underline']; const textTransform = ['uppercase', 'lowercase', 'capitalize', 'normal-case']; -const textOverflow = ['truncate', 'overflow-ellipsis', 'overflow-clip']; +const textOverflow = ['truncate', 'text-ellipsis', 'text-clip']; const verticalAlign = [ 'align-baseline', From 011ba1a4c3287803e02ee84064bf2a21232b2b45 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Wed, 20 Oct 2021 18:57:09 +0200 Subject: [PATCH 08/28] refactor: simplify pseudoclassess generation method --- src/cli/core/ClassnamesGenerator.ts | 65 ++++--------------- src/cli/core/TailwindConfigParser.ts | 22 +++++++ .../{allVariants.ts => baseVariants.ts} | 8 ++- src/cli/types/config.ts | 4 +- 4 files changed, 40 insertions(+), 59 deletions(-) rename src/cli/core/constants/{allVariants.ts => baseVariants.ts} (88%) diff --git a/src/cli/core/ClassnamesGenerator.ts b/src/cli/core/ClassnamesGenerator.ts index f1b42c38..60b81de2 100644 --- a/src/cli/core/ClassnamesGenerator.ts +++ b/src/cli/core/ClassnamesGenerator.ts @@ -9,7 +9,6 @@ import { } from '../types/classes'; import {TConfigTheme, TConfigDarkMode} from '../types/config'; import {tailwindLabsPlugins} from '../lib/tailwindlabs-plugins'; -import {allVariants} from './constants/allVariants'; import {regularClassGroupKeys} from './constants/regularClassGroupKeys'; /** @@ -381,6 +380,7 @@ export class ClassnamesGenerator { private pseudoClasses = (): string[] => { // Initialise a pseudoclasses variable with empty array value. const pseudoClasses: string[] = []; + const variants = this._configParser.getVariants(); // For every key-value pair in the variants section in tailwind config... // eslint-disable-next-line prefer-const @@ -406,65 +406,22 @@ export class ClassnamesGenerator { // Append the classnames with important prefix to the pseudo classes array generatedClassGroupWithImportantPrefix.map(cls => pseudoClasses.push(cls)); + pseudoClasses.push('peer'); + pseudoClasses.push('group'); + // Add 'dark' class if dark mode stategy is set to "class" + if (this._darkMode === 'class' && !pseudoClasses.includes('dark')) { + pseudoClasses.push('dark'); + } + // For every member of the found regular classes group... generatedClassGroup.map(classname => { - const isDarkModeEnabled = this._darkMode !== false; - - // Add 'peer' utility classname. used with peer-* classnames - pseudoClasses.push('peer'); - // Generate the classname of each variant... - allVariants.map(variant => { - if (variant === 'responsive') { - // Get the breakpoints from config - const [breakpoints] = this._configParser.getThemeProperty('screens'); - - // Create the classname for each breakpoint - breakpoints.map((breakpointVariant: string) => { - // Push the created classes to the pseudoClasses array - pseudoClasses.push( - breakpointVariant + this._separator + this._prefix + classname, - ); - - // Add stackable dark and responsive pseudoclasses if the key has both variants - if (isDarkModeEnabled) { - pseudoClasses.push( - breakpointVariant + - this._separator + - 'dark' + - this._separator + - this._prefix + - classname, - ); - } - }); - } - // Otherwise if the variant is 'dark' - else if (variant === 'dark') { - // If the dark mode is enabled... - if (isDarkModeEnabled) { - // Add the 'dark' prefix to the classname to create its pseudoclass - pseudoClasses.push(variant + this._separator + this._prefix + classname); - } - // Otherwise, do nothing. - } - // Otherwise... - else { - // Append the variant to the classname and push to the pseudoClasses array. - pseudoClasses.push(variant + this._separator + this._prefix + classname); - - // Add 'group' class if a the variant is group-hover, group-focus etc. - if (variant.startsWith('group') && !pseudoClasses.includes('group')) - pseudoClasses.push('group'); - - // Add 'dark' class if dark mode stategy is set to "class" - if (this._darkMode === 'class' && !pseudoClasses.includes('dark')) - pseudoClasses.push('dark'); - } + variants.map(variant => { + // Append the variant to the classname and push to the pseudoClasses array. + pseudoClasses.push(variant + this._separator + this._prefix + classname); }); }); } - // Otherwise, skip and do nothing }); } diff --git a/src/cli/core/TailwindConfigParser.ts b/src/cli/core/TailwindConfigParser.ts index c9ec2bbd..36da770f 100644 --- a/src/cli/core/TailwindConfigParser.ts +++ b/src/cli/core/TailwindConfigParser.ts @@ -2,6 +2,7 @@ import _ from 'lodash'; import {defaultTailwindConfig} from '../lib/defaultTailwindConfig'; import {TTailwindCSSConfig, TConfigDarkMode, TConfigPlugins} from '../types/config'; import {TConfigTheme, TThemeItems} from '../types/config'; +import {baseVariants} from './constants/baseVariants'; import {tailwindColors} from './constants/tailwindColors'; /* eslint-disable @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-return */ @@ -112,6 +113,27 @@ export class TailwindConfigParser { return this._evaluatedTheme; }; + /** + * Get the pseudoclass variants based on config. + * @param themeProperty The theme property name + */ + public getVariants = (): string[] => { + const variants = baseVariants; + + // get responsive variants + const [breakpoints] = this.getThemeProperty('screens'); + breakpoints.map((breakpointVariant: string) => { + variants.push(breakpointVariant); + }); + + // Add dark variant + if (this.getDarkMode() === 'class') { + variants.push('dark'); + } + + return variants; + }; + /** * Get the value (and key) of a supplied theme property. * @param themeProperty The theme property name diff --git a/src/cli/core/constants/allVariants.ts b/src/cli/core/constants/baseVariants.ts similarity index 88% rename from src/cli/core/constants/allVariants.ts rename to src/cli/core/constants/baseVariants.ts index bfdd3c08..e93b223d 100644 --- a/src/cli/core/constants/allVariants.ts +++ b/src/cli/core/constants/baseVariants.ts @@ -1,5 +1,5 @@ -export const allVariants = [ - 'responsive', +export const baseVariants = [ + // 'responsive', 'motion-safe', 'motion-reduce', 'first', @@ -8,6 +8,7 @@ export const allVariants = [ 'even', 'visited', 'checked', + 'group', // 'group-hover', 'group-focus', 'focus-within', @@ -32,6 +33,7 @@ export const allVariants = [ 'in-range', 'out-of-range', // New peer-*, selection & marker variants and before/after + 'peer', // 'peer-hover', 'peer-checked', 'peer-focus', @@ -40,5 +42,5 @@ export const allVariants = [ 'before', 'after', // dark mode utility - 'dark', + 'dark', // ]; diff --git a/src/cli/types/config.ts b/src/cli/types/config.ts index cdaf297a..03b8f698 100644 --- a/src/cli/types/config.ts +++ b/src/cli/types/config.ts @@ -1,4 +1,4 @@ -import {allVariants} from '../core/constants/allVariants'; +import {baseVariants} from '../core/constants/baseVariants'; import {defaultTailwindConfig} from '../lib/defaultTailwindConfig'; export type TTailwindCSSConfig = Partial< @@ -15,4 +15,4 @@ export type TConfigPlugins = Partial Date: Wed, 20 Oct 2021 19:02:59 +0200 Subject: [PATCH 09/28] fix: use correct condition for adding a dark mode variant --- src/cli/core/TailwindConfigParser.ts | 2 +- src/cli/core/constants/baseVariants.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/cli/core/TailwindConfigParser.ts b/src/cli/core/TailwindConfigParser.ts index 36da770f..ff287f23 100644 --- a/src/cli/core/TailwindConfigParser.ts +++ b/src/cli/core/TailwindConfigParser.ts @@ -127,7 +127,7 @@ export class TailwindConfigParser { }); // Add dark variant - if (this.getDarkMode() === 'class') { + if (!!this.getDarkMode() !== false) { variants.push('dark'); } diff --git a/src/cli/core/constants/baseVariants.ts b/src/cli/core/constants/baseVariants.ts index e93b223d..359a6f9b 100644 --- a/src/cli/core/constants/baseVariants.ts +++ b/src/cli/core/constants/baseVariants.ts @@ -42,5 +42,5 @@ export const baseVariants = [ 'before', 'after', // dark mode utility - 'dark', // + // 'dark', // ]; From b86ba8ef3d21e20fdf13407b9fb6e6642eb8ba55 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Thu, 21 Oct 2021 21:27:59 +0200 Subject: [PATCH 10/28] chore: remove wrong doc comment for parser getVariants method --- src/cli/core/TailwindConfigParser.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/cli/core/TailwindConfigParser.ts b/src/cli/core/TailwindConfigParser.ts index ff287f23..db241d06 100644 --- a/src/cli/core/TailwindConfigParser.ts +++ b/src/cli/core/TailwindConfigParser.ts @@ -115,7 +115,6 @@ export class TailwindConfigParser { /** * Get the pseudoclass variants based on config. - * @param themeProperty The theme property name */ public getVariants = (): string[] => { const variants = baseVariants; From 233390b9170c4f3033229433453c74f2a0ea1da5 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Fri, 22 Oct 2021 13:56:26 +0200 Subject: [PATCH 11/28] refactor: add base pseudoclassess to thier array outside `for of` loop --- src/cli/core/ClassnamesGenerator.ts | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/src/cli/core/ClassnamesGenerator.ts b/src/cli/core/ClassnamesGenerator.ts index 60b81de2..14be9394 100644 --- a/src/cli/core/ClassnamesGenerator.ts +++ b/src/cli/core/ClassnamesGenerator.ts @@ -378,14 +378,14 @@ export class ClassnamesGenerator { // and return them in a string array to be parsed and converted into a template string that // will be a part of the final generated file. See `FileContentGenerator` class. private pseudoClasses = (): string[] => { - // Initialise a pseudoclasses variable with empty array value. - const pseudoClasses: string[] = []; + // Initialise a pseudoClasses array with base values. + const pseudoClasses: string[] = ['peer', 'group']; + if (this._darkMode === 'class') pseudoClasses.push('dark'); + + // Get the variants from config const variants = this._configParser.getVariants(); - // For every key-value pair in the variants section in tailwind config... - // eslint-disable-next-line prefer-const for (const regularClassGroupKey of regularClassGroupKeys) { - // Find all matching names from the generated regular classes with the key of the variants config Object.keys(this._generatedRegularClassnames).map(key => { // If the current key is found to be a member of the generated regular classes group... if ( @@ -399,20 +399,11 @@ export class ClassnamesGenerator { // Duplicate classnames with an important (!) prefix const generatedClassGroupWithImportantPrefix = generatedClassGroup.map(cls => '!' + cls); - // Append the classnames with important prefix to the regular classnames generatedClassGroup = generatedClassGroup.concat(generatedClassGroupWithImportantPrefix); - // Append the classnames with important prefix to the pseudo classes array generatedClassGroupWithImportantPrefix.map(cls => pseudoClasses.push(cls)); - pseudoClasses.push('peer'); - pseudoClasses.push('group'); - // Add 'dark' class if dark mode stategy is set to "class" - if (this._darkMode === 'class' && !pseudoClasses.includes('dark')) { - pseudoClasses.push('dark'); - } - // For every member of the found regular classes group... generatedClassGroup.map(classname => { // Generate the classname of each variant... From a8173c75c9c03a8843fbdccd4c8f82751e47fef3 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Fri, 22 Oct 2021 20:37:40 +0200 Subject: [PATCH 12/28] feat: generate utility function for all category types ( #293) --- src/cli/core/ClassnamesGenerator.ts | 9 +-- src/cli/core/FileContentGenerator.ts | 107 +++++++++++++++++---------- src/cli/types/classes.ts | 5 -- 3 files changed, 72 insertions(+), 49 deletions(-) diff --git a/src/cli/core/ClassnamesGenerator.ts b/src/cli/core/ClassnamesGenerator.ts index 14be9394..a043944a 100644 --- a/src/cli/core/ClassnamesGenerator.ts +++ b/src/cli/core/ClassnamesGenerator.ts @@ -5,7 +5,7 @@ import {nonConfigurableClassNames} from '../lib/non-configurable'; import { TAllClassnames, Backgrounds, Layout, Borders, Tables, Effects, Interactivity, TransitionsAndAnimations, Transforms, Accessibility, SVG, - FlexBox, Grid, Spacing, Sizing, Typography, TGeneratedClassnames, Filters + FlexBox, Grid, Spacing, Sizing, Typography, Filters } from '../types/classes'; import {TConfigTheme, TConfigDarkMode} from '../types/config'; import {tailwindLabsPlugins} from '../lib/tailwindlabs-plugins'; @@ -71,11 +71,8 @@ export class ClassnamesGenerator { /** * Get the generated classnames. */ - public generate = (): TGeneratedClassnames => { - return { - regularClassnames: this._generatedRegularClassnames, - pseudoClassnames: this._generatedPseudoClassnames, - }; + public generate = (): TAllClassnames => { + return this._generatedRegularClassnames; }; private layout = (): Layout | Record => { diff --git a/src/cli/core/FileContentGenerator.ts b/src/cli/core/FileContentGenerator.ts index c9f7f4b2..8a6e5961 100644 --- a/src/cli/core/FileContentGenerator.ts +++ b/src/cli/core/FileContentGenerator.ts @@ -1,16 +1,17 @@ import _ from 'lodash'; -import {TAllClassnames, TGeneratedClassnames} from '../types/classes'; +import {TAllClassnames} from '../types/classes'; +import {TailwindConfigParser} from './TailwindConfigParser'; export class FileContentGenerator { - private _configPrefix: string; - private _generatedClassNames: TGeneratedClassnames; + private _configParser: TailwindConfigParser; + private _generatedClassNames: TAllClassnames; /** * Initializes a new instance of the `FileContentGenerator` class. * @param generatedClassnames The generated classnames to put in the template. */ - constructor(generatedClassnames: TGeneratedClassnames, ConfigPrefix: string) { - this._configPrefix = ConfigPrefix; + constructor(generatedClassnames: TAllClassnames, configParser: TailwindConfigParser) { + this._configParser = configParser; this._generatedClassNames = generatedClassnames; } @@ -22,6 +23,8 @@ export class FileContentGenerator { '\n\n' + this.allClassnamesTypesTemplate() + '\n\n' + + this.utilityFunctionsTemplate() + + '\n\n' + this.mainExportStatementsTemplate() ); }; @@ -42,38 +45,56 @@ export class FileContentGenerator { return "import classnamesLib from 'clsx';" + '\n' + `T_CUSTOM_CLASSES_IMPORT_STATEMENT`; }; - private allClassnamesTypesTemplate = (): string => { - const regularClassnames = this._generatedClassNames.regularClassnames; - const pseudoClassnames = this._generatedClassNames.pseudoClassnames; + // /** + // * Generates a type for pseudoclass variants + // */ + // private variantsTypeTemplate = (): string => { + // const variants = this._configParser.getVariants(); + + // return this.generateTypesTemplate( + // 'PseudoClassVariants', + // variants.map(variant => variant + this._configParser.getSeparator()), // 'hover:', 'focus:' + // undefined, + // true, + // ); + // }; - const regularClassnamesTemplate = Object.keys(regularClassnames) - .map(classGroup => { + private allClassnamesTypesTemplate = (): string => { + const generatedClassnamesTemplate = Object.keys(this._generatedClassNames) + .map(classGroupKey => { return this.generateTypesGroupTemplate( - regularClassnames[classGroup as keyof TAllClassnames] as TAllClassnames, - classGroup, + this._generatedClassNames[classGroupKey as keyof TAllClassnames] as TAllClassnames, + classGroupKey, ); }) .join('\n'); - const pseudoClassnamesTemplate = this.generateTypesTemplate({ - typeName: 'PseudoClasses', - items: pseudoClassnames, - }); + // TODO: do not generate this template + const allclassnamesExportTemplate = this.generateTypesTemplate( + 'Classes', + Object.keys(this._generatedClassNames).map(x => 'T' + x), + undefined, + false, + ); - const allclassnamesExportTemplate = this.generateTypesTemplate({ - typeName: 'Classes', - items: Object.keys(regularClassnames) - .concat('PseudoClasses') - .map(x => 'T' + x), - }).replace(/'/g, ''); // TODO: REFACTOR this to use generateTypesGroupTemplate. + return generatedClassnamesTemplate + '\n\n' + allclassnamesExportTemplate; + }; - return ( - regularClassnamesTemplate + - '\n\n' + - pseudoClassnamesTemplate + - '\n\n' + - allclassnamesExportTemplate - ); + private utilityFunctionsTemplate = (): string => { + return Object.keys(this._generatedClassNames) + .map(categoryGroupName => { + const categoryType = `T${categoryGroupName}`; // TTypography + // const categoryPseudoClassesTypes = '`${TPseudoClassVariants}:${' + categoryType + '}`'; + + return ( + `type ${categoryType}Key = ${categoryType} | TTailwindString\n` + + `type ${categoryType}Arg = ${categoryType} | null | undefined | {[key in ${categoryType}Key]?: boolean} | TTailwindString\n` + + `type ${categoryType}UtilityFunction = (...args: ${categoryType}Arg[]) => TTailwindString\n` + + //prettier-ignore + `export const ${_.lowerFirst(categoryGroupName)}: ${categoryType}UtilityFunction = classnamesLib as any\n` + ); + }) + .join('\n'); }; private mainExportStatementsTemplate = (): string => { @@ -132,11 +153,11 @@ export class FileContentGenerator { const generateMembersStatements = (): string[] => { return members.map(member => { - return this.generateTypesTemplate({ - typeName: member, - items: group[member as keyof TAllClassnames] as string[], - prefix: this._configPrefix, - }); + return this.generateTypesTemplate( + member, + group[member as keyof TAllClassnames] as string[], + this._configParser.getPrefix(), + ); }); }; @@ -172,14 +193,22 @@ export class FileContentGenerator { * | foo * | bar; * ``` - * + * or with quoutes: + * ``` + * export type TBaz + * | 'foo' + * | 'bar'; + * ``` * @param typeName The name of the type (without T prefix). * @param items The list of the strings of items to add to the type name. * @param prefix The prefix to add to the beginning of each item of the string array. + * @param surroundWithQuotes Whether to quote the types or not (make it a string or an actual type) */ private generateTypesTemplate = ( - // prettier-ignore - {typeName, items, prefix}: {typeName: string; items: string[]; prefix?: string}, + typeName: string, + items: string[], + prefix?: string, + surroundWithQuotes: boolean = true, ): string => { return ( `export type T${_.upperFirst(typeName)} =` + @@ -192,7 +221,9 @@ export class FileContentGenerator { const shouldKeepDefaultSuffix: boolean = item.includes(x); const name = shouldKeepDefaultSuffix ? item : item.replace('-DEFAULT', ''); - return prefix ? `'${prefix}${name}'` : `'${name}'`; + const nameWithOrWithoutPrefix = `${prefix ? prefix : ''}${name}`; + + return surroundWithQuotes ? `'${nameWithOrWithoutPrefix}'` : nameWithOrWithoutPrefix; }); }) .join('\n | ') diff --git a/src/cli/types/classes.ts b/src/cli/types/classes.ts index 2c3b08f9..cbc5b9fe 100644 --- a/src/cli/types/classes.ts +++ b/src/cli/types/classes.ts @@ -17,11 +17,6 @@ export type Transforms = Record; export type TransitionsAndAnimations = Record; export type Typography = Record; -export type TGeneratedClassnames = { - regularClassnames: TAllClassnames; - pseudoClassnames: string[]; -}; - export type TAllClassnames = { Accessibility: Accessibility; Backgrounds: Backgrounds; From 13ac4418d14ed66c8c600fd325e5eb5f99d52be4 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Fri, 22 Oct 2021 20:38:57 +0200 Subject: [PATCH 13/28] fix: pass the parser into the fileContentGenerator instead of prefix --- src/cli/core/GeneratedFileWriter.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cli/core/GeneratedFileWriter.ts b/src/cli/core/GeneratedFileWriter.ts index d4a126e1..62aab447 100644 --- a/src/cli/core/GeneratedFileWriter.ts +++ b/src/cli/core/GeneratedFileWriter.ts @@ -95,7 +95,7 @@ export class GeneratedFileWriter { // Create the file content from the generated classnames const fileContentTemplate = new FileContentGenerator( generatedClassnames, - configParser.getPrefix(), + configParser, ).generateFileContent(); // Resolve the custom classes import path relative to the output file From 99692892bbe471f452388f76bbc92d9d1df2b64a Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Fri, 22 Oct 2021 20:41:34 +0200 Subject: [PATCH 14/28] fix: disable duplicate breakpoint pseudoclass variants generation --- src/cli/core/TailwindConfigParser.ts | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/src/cli/core/TailwindConfigParser.ts b/src/cli/core/TailwindConfigParser.ts index db241d06..51b7c2e4 100644 --- a/src/cli/core/TailwindConfigParser.ts +++ b/src/cli/core/TailwindConfigParser.ts @@ -120,15 +120,14 @@ export class TailwindConfigParser { const variants = baseVariants; // get responsive variants - const [breakpoints] = this.getThemeProperty('screens'); - breakpoints.map((breakpointVariant: string) => { - variants.push(breakpointVariant); - }); + const [mediaBreakpoints] = this.getThemeProperty('screens'); + if (this.getDarkMode() == 'media') mediaBreakpoints.push('dark'); - // Add dark variant - if (!!this.getDarkMode() !== false) { - variants.push('dark'); - } + mediaBreakpoints.map((breakpoint: string) => { + if (!variants.includes(breakpoint)) { + variants.push(breakpoint); + } + }); return variants; }; From 37e508c304a9adfe6cb9ba22fbc210d263eb4e7e Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Fri, 22 Oct 2021 20:53:14 +0200 Subject: [PATCH 15/28] chore: rename classnames template funtion in FileContentGenerator --- src/cli/core/FileContentGenerator.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/cli/core/FileContentGenerator.ts b/src/cli/core/FileContentGenerator.ts index 8a6e5961..5b3d1d8b 100644 --- a/src/cli/core/FileContentGenerator.ts +++ b/src/cli/core/FileContentGenerator.ts @@ -21,7 +21,7 @@ export class FileContentGenerator { '\n\n' + this.importStatementsTemplate() + '\n\n' + - this.allClassnamesTypesTemplate() + + this.regularClassnamesTypesTemplate() + '\n\n' + this.utilityFunctionsTemplate() + '\n\n' + @@ -59,7 +59,7 @@ export class FileContentGenerator { // ); // }; - private allClassnamesTypesTemplate = (): string => { + private regularClassnamesTypesTemplate = (): string => { const generatedClassnamesTemplate = Object.keys(this._generatedClassNames) .map(classGroupKey => { return this.generateTypesGroupTemplate( From e9f9488d71df3766d57e3a70c110aa54bae35cf4 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Sat, 23 Oct 2021 00:33:28 +0200 Subject: [PATCH 16/28] feat(cli): generate per-category classnames --- src/cli/core/FileContentGenerator.ts | 41 ++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/src/cli/core/FileContentGenerator.ts b/src/cli/core/FileContentGenerator.ts index 5b3d1d8b..1143abea 100644 --- a/src/cli/core/FileContentGenerator.ts +++ b/src/cli/core/FileContentGenerator.ts @@ -23,6 +23,8 @@ export class FileContentGenerator { '\n\n' + this.regularClassnamesTypesTemplate() + '\n\n' + + this.pseudoClassnamesTypesTemplate() + + '\n\n' + this.utilityFunctionsTemplate() + '\n\n' + this.mainExportStatementsTemplate() @@ -80,6 +82,45 @@ export class FileContentGenerator { return generatedClassnamesTemplate + '\n\n' + allclassnamesExportTemplate; }; + private pseudoClassnamesTypesTemplate = (): string => { + let template = ''; + + for (const [keyOfCategory, value] of Object.entries(this._generatedClassNames)) { + const categoryObject = this._generatedClassNames[keyOfCategory as keyof TAllClassnames]; + + if (categoryObject !== undefined) { + const allClassnamesInCategory: string[] = Object.keys(value) + .map(k => { + return categoryObject[k as keyof typeof categoryObject]; + }) + .flat(); + + const pseudoClassnamesOfCategory = this._configParser.getVariants().flatMap(variant => { + return allClassnamesInCategory.map(classname => { + return ( + variant + + this._configParser.getSeparator() + + this._configParser.getPrefix() + + classname + ); + }); + }); + + template = + template + + this.generateTypesTemplate( + `T${keyOfCategory}PseudoClassnames`, + pseudoClassnamesOfCategory, + undefined, + true, + ) + + '\n\n'; + } + } + + return template; + }; + private utilityFunctionsTemplate = (): string => { return Object.keys(this._generatedClassNames) .map(categoryGroupName => { From 8172a881ddbd361c507edf9df6385de9d54f8d41 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Sat, 23 Oct 2021 09:29:41 +0200 Subject: [PATCH 17/28] feat: add pseudoclassnames to their category function --- src/cli/core/FileContentGenerator.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/cli/core/FileContentGenerator.ts b/src/cli/core/FileContentGenerator.ts index 1143abea..26969022 100644 --- a/src/cli/core/FileContentGenerator.ts +++ b/src/cli/core/FileContentGenerator.ts @@ -109,7 +109,7 @@ export class FileContentGenerator { template = template + this.generateTypesTemplate( - `T${keyOfCategory}PseudoClassnames`, + `${keyOfCategory}PseudoClassnames`, pseudoClassnamesOfCategory, undefined, true, @@ -128,8 +128,8 @@ export class FileContentGenerator { // const categoryPseudoClassesTypes = '`${TPseudoClassVariants}:${' + categoryType + '}`'; return ( - `type ${categoryType}Key = ${categoryType} | TTailwindString\n` + - `type ${categoryType}Arg = ${categoryType} | null | undefined | {[key in ${categoryType}Key]?: boolean} | TTailwindString\n` + + `type ${categoryType}Key = ${categoryType} | ${categoryType}PseudoClassnames | TTailwindString\n` + + `type ${categoryType}Arg = ${categoryType} | ${categoryType}PseudoClassnames | null | undefined | {[key in ${categoryType}Key]?: boolean} | TTailwindString\n` + `type ${categoryType}UtilityFunction = (...args: ${categoryType}Arg[]) => TTailwindString\n` + //prettier-ignore `export const ${_.lowerFirst(categoryGroupName)}: ${categoryType}UtilityFunction = classnamesLib as any\n` From 584ef7a5a064ba760a70a65d8831595cbb11f175 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Sat, 23 Oct 2021 13:10:48 +0200 Subject: [PATCH 18/28] perf: use TS template literal types to generate pseudoclassess types --- src/cli/core/FileContentGenerator.ts | 128 +++++++++++++++++---------- 1 file changed, 82 insertions(+), 46 deletions(-) diff --git a/src/cli/core/FileContentGenerator.ts b/src/cli/core/FileContentGenerator.ts index 26969022..ff28fb0b 100644 --- a/src/cli/core/FileContentGenerator.ts +++ b/src/cli/core/FileContentGenerator.ts @@ -23,6 +23,8 @@ export class FileContentGenerator { '\n\n' + this.regularClassnamesTypesTemplate() + '\n\n' + + this.variantsTypeTemplate() + + '\n\n' + this.pseudoClassnamesTypesTemplate() + '\n\n' + this.utilityFunctionsTemplate() + @@ -47,19 +49,16 @@ export class FileContentGenerator { return "import classnamesLib from 'clsx';" + '\n' + `T_CUSTOM_CLASSES_IMPORT_STATEMENT`; }; - // /** - // * Generates a type for pseudoclass variants - // */ - // private variantsTypeTemplate = (): string => { - // const variants = this._configParser.getVariants(); + private variantsTypeTemplate = (): string => { + const variants = this._configParser.getVariants(); - // return this.generateTypesTemplate( - // 'PseudoClassVariants', - // variants.map(variant => variant + this._configParser.getSeparator()), // 'hover:', 'focus:' - // undefined, - // true, - // ); - // }; + return this.generateTypesTemplate( + 'PseudoClassVariants', + variants.map(variant => variant + this._configParser.getSeparator()), // 'hover:', 'focus:' + undefined, + true, + ); + }; private regularClassnamesTypesTemplate = (): string => { const generatedClassnamesTemplate = Object.keys(this._generatedClassNames) @@ -83,49 +82,83 @@ export class FileContentGenerator { }; private pseudoClassnamesTypesTemplate = (): string => { - let template = ''; - - for (const [keyOfCategory, value] of Object.entries(this._generatedClassNames)) { - const categoryObject = this._generatedClassNames[keyOfCategory as keyof TAllClassnames]; - - if (categoryObject !== undefined) { - const allClassnamesInCategory: string[] = Object.keys(value) - .map(k => { - return categoryObject[k as keyof typeof categoryObject]; - }) - .flat(); + /** + * Let TypeScript show the types on demand, by using template literal types + * + * PROS: + * - better performance overall + * - low disk usage (~1.6 mb file) + * - fast code generation by CLI, low RAM usage + * + * CONS: + * - Typography, Borders and Backgrounds types cant be represented [ts(2590)]s + */ - const pseudoClassnamesOfCategory = this._configParser.getVariants().flatMap(variant => { - return allClassnamesInCategory.map(classname => { - return ( - variant + - this._configParser.getSeparator() + - this._configParser.getPrefix() + - classname - ); - }); - }); + return Object.keys(this._generatedClassNames) + .map(categoryKey => { + return ( + `export type T${_.upperFirst(categoryKey)}PseudoClassnames = ` + + '`${TPseudoClassVariants}' + + this._configParser.getSeparator() + + this._configParser.getPrefix() + + '${T' + + _.upperFirst(categoryKey) + + '}`' + ); + }) + .join('\n\n'); - template = - template + - this.generateTypesTemplate( - `${keyOfCategory}PseudoClassnames`, - pseudoClassnamesOfCategory, - undefined, - true, - ) + - '\n\n'; - } - } + /** + * Generate the classnames and write them to disk + * + * PROS: + * - no ts(2590) error, but these types does not load or take lots of time to load + * CONS: + * - Huge file size (~90 mb) + * - CLI takes a lot of time to generate the file + * - CLI takes lots of RAM and often fails due to heap allocation errors + * - Typography, Borders and Backgrounds are extremely slow to load, or does not load at all + * - overall bad performace interacting with files importing from the file. + * - + */ - return template; + // let template = ''; + // for (const [keyOfCategory, value] of Object.entries(this._generatedClassNames)) { + // const categoryObject = this._generatedClassNames[keyOfCategory as keyof TAllClassnames]; + // if (categoryObject !== undefined) { + // const allClassnamesInCategory: string[] = Object.keys(value) + // .map(k => { + // return categoryObject[k as keyof typeof categoryObject]; + // }) + // .flat(); + // const pseudoClassnamesOfCategory = this._configParser.getVariants().flatMap(variant => { + // return allClassnamesInCategory.map(classname => { + // return ( + // variant + + // this._configParser.getSeparator() + + // this._configParser.getPrefix() + + // classname + // ); + // }); + // }); + // template = + // template + + // this.generateTypesTemplate( + // `${keyOfCategory}PseudoClassnames`, + // pseudoClassnamesOfCategory, + // undefined, + // true, + // ) + + // '\n\n'; + // } + // } + // return template; }; private utilityFunctionsTemplate = (): string => { return Object.keys(this._generatedClassNames) .map(categoryGroupName => { const categoryType = `T${categoryGroupName}`; // TTypography - // const categoryPseudoClassesTypes = '`${TPseudoClassVariants}:${' + categoryType + '}`'; return ( `type ${categoryType}Key = ${categoryType} | ${categoryType}PseudoClassnames | TTailwindString\n` + @@ -140,6 +173,9 @@ export class FileContentGenerator { private mainExportStatementsTemplate = (): string => { return ( + `export const CN = {${Object.keys(this._generatedClassNames) + .map(cn => _.lowerFirst(cn)) + .join(', ')}}\n` + 'export type TTailwindString = "TAILWIND_STRING"\n' + '\n' + 'export type TKey = TClasses | TTailwindStringIMPORTED_T_CUSTOM_CLASSES_KEY\n' + From a64f0d941ce6c47eb27c24eacde68cb5940c9eb0 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Sat, 23 Oct 2021 13:52:09 +0200 Subject: [PATCH 19/28] chore: make utity functions camel cased --- src/cli/core/FileContentGenerator.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/cli/core/FileContentGenerator.ts b/src/cli/core/FileContentGenerator.ts index ff28fb0b..8ef5ad9f 100644 --- a/src/cli/core/FileContentGenerator.ts +++ b/src/cli/core/FileContentGenerator.ts @@ -165,7 +165,7 @@ export class FileContentGenerator { `type ${categoryType}Arg = ${categoryType} | ${categoryType}PseudoClassnames | null | undefined | {[key in ${categoryType}Key]?: boolean} | TTailwindString\n` + `type ${categoryType}UtilityFunction = (...args: ${categoryType}Arg[]) => TTailwindString\n` + //prettier-ignore - `export const ${_.lowerFirst(categoryGroupName)}: ${categoryType}UtilityFunction = classnamesLib as any\n` + `export const ${_.camelCase(categoryGroupName)}: ${categoryType}UtilityFunction = classnamesLib as any\n` ); }) .join('\n'); @@ -174,7 +174,7 @@ export class FileContentGenerator { private mainExportStatementsTemplate = (): string => { return ( `export const CN = {${Object.keys(this._generatedClassNames) - .map(cn => _.lowerFirst(cn)) + .map(cn => _.camelCase(cn)) .join(', ')}}\n` + 'export type TTailwindString = "TAILWIND_STRING"\n' + '\n' + From a8e2061fa171e92d5b8ca79716f7ef7fb49b293e Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Sat, 23 Oct 2021 22:08:44 +0200 Subject: [PATCH 20/28] feat: generate utility functions for subcategories instead of categories The issue still remains with classes with colors --- src/cli/core/FileContentGenerator.ts | 71 +++++++++++++++++++++------- 1 file changed, 53 insertions(+), 18 deletions(-) diff --git a/src/cli/core/FileContentGenerator.ts b/src/cli/core/FileContentGenerator.ts index 8ef5ad9f..95457aa4 100644 --- a/src/cli/core/FileContentGenerator.ts +++ b/src/cli/core/FileContentGenerator.ts @@ -24,8 +24,8 @@ export class FileContentGenerator { this.regularClassnamesTypesTemplate() + '\n\n' + this.variantsTypeTemplate() + - '\n\n' + - this.pseudoClassnamesTypesTemplate() + + // '\n\n' + + // this.pseudoClassnamesTypesTemplate() + '\n\n' + this.utilityFunctionsTemplate() + '\n\n' + @@ -156,26 +156,61 @@ export class FileContentGenerator { }; private utilityFunctionsTemplate = (): string => { - return Object.keys(this._generatedClassNames) - .map(categoryGroupName => { - const categoryType = `T${categoryGroupName}`; // TTypography + let template = ''; - return ( - `type ${categoryType}Key = ${categoryType} | ${categoryType}PseudoClassnames | TTailwindString\n` + - `type ${categoryType}Arg = ${categoryType} | ${categoryType}PseudoClassnames | null | undefined | {[key in ${categoryType}Key]?: boolean} | TTailwindString\n` + - `type ${categoryType}UtilityFunction = (...args: ${categoryType}Arg[]) => TTailwindString\n` + - //prettier-ignore - `export const ${_.camelCase(categoryGroupName)}: ${categoryType}UtilityFunction = classnamesLib as any\n` - ); - }) - .join('\n'); + for (const [categoryKey, value] of Object.entries(this._generatedClassNames)) { + const subCategoriesTemplate = Object.keys(value) // sub-ctegories keys + .map(sc => { + const subCategoryType = `T${_.upperFirst(sc)}`; + const pseudoClassType = + `\`\${TPseudoClassVariants}${this._configParser.getPrefix()}` + + `\${T${_.upperFirst(sc)}}\``; + + return ( + // subcategory key type + `type ${subCategoryType}Key =\n` + + ` |${subCategoryType} | ${pseudoClassType} | TTailwindString\n` + + // subcategory arg type + `type ${subCategoryType}Arg =\n` + + ` | ${subCategoryType} | ${pseudoClassType} | null | undefined\n` + + ` | {[key in ${subCategoryType}Key]?: boolean} | TTailwindString\n` + + // utility function type + `type ${subCategoryType}UtilityFunction = (...args: ${subCategoryType}Arg[]) => TTailwindString\n` + + // utility function export statement + // prettier-ignore + `export const ${_.camelCase(sc)}: ${subCategoryType}UtilityFunction = classnamesLib as any\n` + ); + }) + .join('\n'); + + template = + template + + '\n' + + `//////////// ${categoryKey} Utility functions\n` + + '\n' + + subCategoriesTemplate; + } + + return template; }; private mainExportStatementsTemplate = (): string => { + const defaultExportTemplate = Object.keys(this._generatedClassNames) + .map(cn => { + const subCategoryObj = this._generatedClassNames[cn as keyof TAllClassnames]; + if (subCategoryObj !== undefined) { + return ( + ' ' + + _.camelCase(cn) + + `: {\n${Object.keys(subCategoryObj) + .map(sc => ' ' + sc) + .join(',\n')}\n }` + ); + } + }) + .join(',\n'); + return ( - `export const CN = {${Object.keys(this._generatedClassNames) - .map(cn => _.camelCase(cn)) - .join(', ')}}\n` + 'export type TTailwindString = "TAILWIND_STRING"\n' + '\n' + 'export type TKey = TClasses | TTailwindStringIMPORTED_T_CUSTOM_CLASSES_KEY\n' + @@ -191,7 +226,7 @@ export class FileContentGenerator { '\n' + 'export const classnames: TTailwind = classnamesLib as any\n\n' + 'export const tw = classnames\n\n' + - 'export default tw\n\n' + `export default {\n${defaultExportTemplate}\n}\n` ); }; From 8b5f3f2f546eaf3be44c62032b27a45a5484e665 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Sat, 23 Oct 2021 23:23:06 +0200 Subject: [PATCH 21/28] chore: change default export object shape --- src/cli/core/FileContentGenerator.ts | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/src/cli/core/FileContentGenerator.ts b/src/cli/core/FileContentGenerator.ts index 95457aa4..293fc862 100644 --- a/src/cli/core/FileContentGenerator.ts +++ b/src/cli/core/FileContentGenerator.ts @@ -199,13 +199,9 @@ export class FileContentGenerator { .map(cn => { const subCategoryObj = this._generatedClassNames[cn as keyof TAllClassnames]; if (subCategoryObj !== undefined) { - return ( - ' ' + - _.camelCase(cn) + - `: {\n${Object.keys(subCategoryObj) - .map(sc => ' ' + sc) - .join(',\n')}\n }` - ); + return Object.keys(subCategoryObj) + .map(sc => ' ' + sc) + .join(',\n'); } }) .join(',\n'); From b82d4adbe974e78c930d58f42b61e35ad25dae56 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Sat, 23 Oct 2021 23:31:56 +0200 Subject: [PATCH 22/28] perf: disable JIT opacity prefix feature --- src/cli/core/ClassnamesGenerator.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/cli/core/ClassnamesGenerator.ts b/src/cli/core/ClassnamesGenerator.ts index a043944a..828ab5f8 100644 --- a/src/cli/core/ClassnamesGenerator.ts +++ b/src/cli/core/ClassnamesGenerator.ts @@ -462,12 +462,12 @@ export class ClassnamesGenerator { } }); - // Add the opacities short hand suffix `/{opacity}`: "bg-red-100/50" - const classnamesWithColorsAndOpacitySuffix = Object.keys( - this._configParser.getTheme().opacity, - ).flatMap(op => classnamesWithColors.map(cls => cls + '/' + op)); + // // Add the opacities short hand suffix `/{opacity}`: "bg-red-100/50" + // const classnamesWithColorsAndOpacitySuffix = Object.keys( + // this._configParser.getTheme().opacity, + // ).flatMap(op => classnamesWithColors.map(cls => cls + '/' + op)); - return classnamesWithColors.concat(classnamesWithColorsAndOpacitySuffix); + return classnamesWithColors; }; private getGeneratedClassesWithOpacities = (): ClassesWithOpacities => { From 756053f41aa35e22688b3dd09e696bee8fa6809c Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Sun, 24 Oct 2021 00:01:41 +0200 Subject: [PATCH 23/28] fix: generate correct module exports --- src/cli/core/FileContentGenerator.ts | 26 +++++++------------------- 1 file changed, 7 insertions(+), 19 deletions(-) diff --git a/src/cli/core/FileContentGenerator.ts b/src/cli/core/FileContentGenerator.ts index 293fc862..7902db6e 100644 --- a/src/cli/core/FileContentGenerator.ts +++ b/src/cli/core/FileContentGenerator.ts @@ -61,7 +61,7 @@ export class FileContentGenerator { }; private regularClassnamesTypesTemplate = (): string => { - const generatedClassnamesTemplate = Object.keys(this._generatedClassNames) + return Object.keys(this._generatedClassNames) .map(classGroupKey => { return this.generateTypesGroupTemplate( this._generatedClassNames[classGroupKey as keyof TAllClassnames] as TAllClassnames, @@ -69,16 +69,6 @@ export class FileContentGenerator { ); }) .join('\n'); - - // TODO: do not generate this template - const allclassnamesExportTemplate = this.generateTypesTemplate( - 'Classes', - Object.keys(this._generatedClassNames).map(x => 'T' + x), - undefined, - false, - ); - - return generatedClassnamesTemplate + '\n\n' + allclassnamesExportTemplate; }; private pseudoClassnamesTypesTemplate = (): string => { @@ -195,7 +185,7 @@ export class FileContentGenerator { }; private mainExportStatementsTemplate = (): string => { - const defaultExportTemplate = Object.keys(this._generatedClassNames) + const utilityFunctionsObjectTemplate = Object.keys(this._generatedClassNames) .map(cn => { const subCategoryObj = this._generatedClassNames[cn as keyof TAllClassnames]; if (subCategoryObj !== undefined) { @@ -207,22 +197,20 @@ export class FileContentGenerator { .join(',\n'); return ( - 'export type TTailwindString = "TAILWIND_STRING"\n' + + `export const TW = {${utilityFunctionsObjectTemplate}\n}\n` + '\n' + - 'export type TKey = TClasses | TTailwindStringIMPORTED_T_CUSTOM_CLASSES_KEY\n' + + 'export type TTailwindString = "TAILWIND_STRING"\n' + '\n' + 'export type TArg =\n' + - '| TClasses\n' + '| null\n' + '| undefined\n' + - '| {[key in TKey]?: boolean}\n' + '| TTailwindString\nIMPORTED_T_CUSTOM_CLASSES_ARG' + '\n' + 'export type TTailwind = (...args: TArg[]) => TTailwindString\n' + '\n' + - 'export const classnames: TTailwind = classnamesLib as any\n\n' + - 'export const tw = classnames\n\n' + - `export default {\n${defaultExportTemplate}\n}\n` + 'export const classnames: TTailwind = classnamesLib as any\n' + + '\n' + + 'export default classnames' ); }; From bafc548245480c2748f063838f964f819954a008 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Sun, 24 Oct 2021 13:37:39 +0200 Subject: [PATCH 24/28] refactor: use a generic type for utility functions --- src/cli/core/FileContentGenerator.ts | 40 +++++++++++++--------------- 1 file changed, 18 insertions(+), 22 deletions(-) diff --git a/src/cli/core/FileContentGenerator.ts b/src/cli/core/FileContentGenerator.ts index 7902db6e..0c0c3bfa 100644 --- a/src/cli/core/FileContentGenerator.ts +++ b/src/cli/core/FileContentGenerator.ts @@ -146,37 +146,33 @@ export class FileContentGenerator { }; private utilityFunctionsTemplate = (): string => { - let template = ''; + let template = `//////////// Utility Function generic type + +type TUtilityFunction = ( + ...args: Array< + | T + | \`\${TPseudoClassVariants}\${T}\` + | null + | undefined + | {[key in T | \`\${TPseudoClassVariants}\${T}\` | TTailwindString]?: boolean} + | TTailwindString + > +) => TTailwindString;`; for (const [categoryKey, value] of Object.entries(this._generatedClassNames)) { const subCategoriesTemplate = Object.keys(value) // sub-ctegories keys - .map(sc => { - const subCategoryType = `T${_.upperFirst(sc)}`; - const pseudoClassType = - `\`\${TPseudoClassVariants}${this._configParser.getPrefix()}` + - `\${T${_.upperFirst(sc)}}\``; + .map(SubCategory => { + const fnName = _.camelCase(SubCategory); + const fnType = `TUtilityFunction`; - return ( - // subcategory key type - `type ${subCategoryType}Key =\n` + - ` |${subCategoryType} | ${pseudoClassType} | TTailwindString\n` + - // subcategory arg type - `type ${subCategoryType}Arg =\n` + - ` | ${subCategoryType} | ${pseudoClassType} | null | undefined\n` + - ` | {[key in ${subCategoryType}Key]?: boolean} | TTailwindString\n` + - // utility function type - `type ${subCategoryType}UtilityFunction = (...args: ${subCategoryType}Arg[]) => TTailwindString\n` + - // utility function export statement - // prettier-ignore - `export const ${_.camelCase(sc)}: ${subCategoryType}UtilityFunction = classnamesLib as any\n` - ); + return `export const ${fnName}: ${fnType} = classnamesLib as any`; }) .join('\n'); template = template + '\n' + - `//////////// ${categoryKey} Utility functions\n` + + `\n//////////// ${categoryKey} Utility functions\n` + '\n' + subCategoriesTemplate; } @@ -197,7 +193,7 @@ export class FileContentGenerator { .join(',\n'); return ( - `export const TW = {${utilityFunctionsObjectTemplate}\n}\n` + + `export const TW = {\n${utilityFunctionsObjectTemplate}\n}\n` + '\n' + 'export type TTailwindString = "TAILWIND_STRING"\n' + '\n' + From 9c639304e500ea80a3bb97ac57d291a88d943963 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Sun, 24 Oct 2021 13:51:54 +0200 Subject: [PATCH 25/28] chore: remove redundant code in `FileContentGenerator` class --- src/cli/core/FileContentGenerator.ts | 100 ++++----------------------- 1 file changed, 12 insertions(+), 88 deletions(-) diff --git a/src/cli/core/FileContentGenerator.ts b/src/cli/core/FileContentGenerator.ts index 0c0c3bfa..d0048a90 100644 --- a/src/cli/core/FileContentGenerator.ts +++ b/src/cli/core/FileContentGenerator.ts @@ -24,8 +24,6 @@ export class FileContentGenerator { this.regularClassnamesTypesTemplate() + '\n\n' + this.variantsTypeTemplate() + - // '\n\n' + - // this.pseudoClassnamesTypesTemplate() + '\n\n' + this.utilityFunctionsTemplate() + '\n\n' + @@ -71,93 +69,19 @@ export class FileContentGenerator { .join('\n'); }; - private pseudoClassnamesTypesTemplate = (): string => { - /** - * Let TypeScript show the types on demand, by using template literal types - * - * PROS: - * - better performance overall - * - low disk usage (~1.6 mb file) - * - fast code generation by CLI, low RAM usage - * - * CONS: - * - Typography, Borders and Backgrounds types cant be represented [ts(2590)]s - */ - - return Object.keys(this._generatedClassNames) - .map(categoryKey => { - return ( - `export type T${_.upperFirst(categoryKey)}PseudoClassnames = ` + - '`${TPseudoClassVariants}' + - this._configParser.getSeparator() + - this._configParser.getPrefix() + - '${T' + - _.upperFirst(categoryKey) + - '}`' - ); - }) - .join('\n\n'); - - /** - * Generate the classnames and write them to disk - * - * PROS: - * - no ts(2590) error, but these types does not load or take lots of time to load - * CONS: - * - Huge file size (~90 mb) - * - CLI takes a lot of time to generate the file - * - CLI takes lots of RAM and often fails due to heap allocation errors - * - Typography, Borders and Backgrounds are extremely slow to load, or does not load at all - * - overall bad performace interacting with files importing from the file. - * - - */ - - // let template = ''; - // for (const [keyOfCategory, value] of Object.entries(this._generatedClassNames)) { - // const categoryObject = this._generatedClassNames[keyOfCategory as keyof TAllClassnames]; - // if (categoryObject !== undefined) { - // const allClassnamesInCategory: string[] = Object.keys(value) - // .map(k => { - // return categoryObject[k as keyof typeof categoryObject]; - // }) - // .flat(); - // const pseudoClassnamesOfCategory = this._configParser.getVariants().flatMap(variant => { - // return allClassnamesInCategory.map(classname => { - // return ( - // variant + - // this._configParser.getSeparator() + - // this._configParser.getPrefix() + - // classname - // ); - // }); - // }); - // template = - // template + - // this.generateTypesTemplate( - // `${keyOfCategory}PseudoClassnames`, - // pseudoClassnamesOfCategory, - // undefined, - // true, - // ) + - // '\n\n'; - // } - // } - // return template; - }; - private utilityFunctionsTemplate = (): string => { - let template = `//////////// Utility Function generic type - -type TUtilityFunction = ( - ...args: Array< - | T - | \`\${TPseudoClassVariants}\${T}\` - | null - | undefined - | {[key in T | \`\${TPseudoClassVariants}\${T}\` | TTailwindString]?: boolean} - | TTailwindString - > -) => TTailwindString;`; + let template = + '//////////// Utility Function generic type\n\n' + + 'type TUtilityFunction = (\n' + + ' ...args: Array<\n' + + ' | T\n' + + ' | `${TPseudoClassVariants}${T}`\n' + + ' | null\n' + + ' | undefined\n' + + ' | {[key in T | `${TPseudoClassVariants}${T}` | TTailwindString]?: boolean}\n' + + ' | TTailwindString\n' + + ' >\n' + + ') => TTailwindString;'; for (const [categoryKey, value] of Object.entries(this._generatedClassNames)) { const subCategoriesTemplate = Object.keys(value) // sub-ctegories keys From 417adb16f39651395b25a9c0957b21b9138347a7 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Sun, 24 Oct 2021 14:02:31 +0200 Subject: [PATCH 26/28] fix: correctly generate border colors with no side `border-red-100` was generating: `border--red-100` --- src/cli/core/ClassnamesGenerator.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cli/core/ClassnamesGenerator.ts b/src/cli/core/ClassnamesGenerator.ts index 828ab5f8..baefebb6 100644 --- a/src/cli/core/ClassnamesGenerator.ts +++ b/src/cli/core/ClassnamesGenerator.ts @@ -442,7 +442,7 @@ export class ClassnamesGenerator { return Object.keys(colorValue).flatMap(shade => { if (utilName === 'border') { return ['', 't', 'r', 'b', 'l'].map( - side => `${utilName}-${side}-${colorName}-${shade}`, + side => `${utilName}-${side.length > 0 ? side + '-' : ''}${colorName}-${shade}`, ); } else { return `${utilName}-${colorName}-${shade}`; From 30e7a20b1a2a4bb493d5171c56edc3c8ae3a685d Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Mon, 1 Nov 2021 00:42:19 +0200 Subject: [PATCH 27/28] refactor: make `_generatedClassnames` field readonly in FileContentGenerator --- src/cli/core/FileContentGenerator.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cli/core/FileContentGenerator.ts b/src/cli/core/FileContentGenerator.ts index d0048a90..d0ec78e5 100644 --- a/src/cli/core/FileContentGenerator.ts +++ b/src/cli/core/FileContentGenerator.ts @@ -4,7 +4,7 @@ import {TailwindConfigParser} from './TailwindConfigParser'; export class FileContentGenerator { private _configParser: TailwindConfigParser; - private _generatedClassNames: TAllClassnames; + private readonly _generatedClassNames: TAllClassnames; /** * Initializes a new instance of the `FileContentGenerator` class. From ca1e8d1c496d52b101413ea9d3e586bbad37dbf8 Mon Sep 17 00:00:00 2001 From: Muhammad Sammy Date: Fri, 5 Nov 2021 14:22:27 +0200 Subject: [PATCH 28/28] feat: add classnames with important modifiers to utility functions --- src/cli/core/FileContentGenerator.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/cli/core/FileContentGenerator.ts b/src/cli/core/FileContentGenerator.ts index d0ec78e5..9da19ae3 100644 --- a/src/cli/core/FileContentGenerator.ts +++ b/src/cli/core/FileContentGenerator.ts @@ -75,10 +75,12 @@ export class FileContentGenerator { 'type TUtilityFunction = (\n' + ' ...args: Array<\n' + ' | T\n' + + ' | `!${T}`\n' + ' | `${TPseudoClassVariants}${T}`\n' + + ' | `${TPseudoClassVariants}!${T}`\n' + ' | null\n' + ' | undefined\n' + - ' | {[key in T | `${TPseudoClassVariants}${T}` | TTailwindString]?: boolean}\n' + + ' | {[key in T | `${TPseudoClassVariants}${T}` | `!${T}` | `${TPseudoClassVariants}!${T}` | TTailwindString]?: boolean}\n' + ' | TTailwindString\n' + ' >\n' + ') => TTailwindString;';