Tailwind helpers - updates and fixes

CHANGELOG.md

@@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file.
 
 This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a CHANGELOG](https://keepachangelog.com/).
 
+## [9.1.0]
+
+### Fixed
+- Default Tailwind config - PHP files are watched now only in the root folder and anything within `src/`
+- Fixed Tailwind outputs not working properly with booleans.
+- `twClasses` and `twClassesEditor` can now be passed as an array
+- Fixed a couple of bugs related to Tailwind class output.
+- Tweaked default Prettier config for new projects.
+
 ## [9.0.2]
 
 ### Changed
@@ -177,7 +186,7 @@ This is a major release that includes PHP8+ support. We tested it on the PHP 8.2
 - Missing type hinting.
 - New command to change version number.
 - Better copy for `checkAttr`` helper if key is missing.
-- Every enqueue script now has `is<>Used` method that is by default true. 
+- Every enqueue script now has `is<>Used` method that is by default true.
 
 ### Removed
 - Blocks "old" version functions.
@@ -453,21 +462,21 @@ MAYOR BREAKING CHANGES
 
 ## [2.2.2] - 2020-05-15
 
-### Added 
+### Added
 - New helper method for making responsive selectors.
 
 ## [2.2.1] - 2020-05-13
 
 ### Removed
 - PHP version 7.0 from Travis build.
 
-### Added 
+### Added
 - Check for block manifest validation.
 
 ## [2.2.0] - 2020-05-06
 
 ### Changed
-* Removed config dependency from the Asset classes and exposed config through Manifest. 
+* Removed config dependency from the Asset classes and exposed config through Manifest.
 * `editor-color-palette` - Add theme support for editor color palette built from global manifest.json.
 
 ## [2.1.1] - 2020-03-05
@@ -624,6 +633,7 @@ Init setup
 
 [Unreleased]: https://github.com/infinum/eightshift-libs/compare/main...HEAD
 
+[9.1.0]: https://github.com/infinum/eightshift-libs/compare/9.0.2...9.1.0
 [9.0.2]: https://github.com/infinum/eightshift-libs/compare/9.0.1...9.0.2
 [9.0.1]: https://github.com/infinum/eightshift-libs/compare/9.0.0...9.0.1
 [9.0.0]: https://github.com/infinum/eightshift-libs/compare/8.0.7...9.0.0

src/Helpers/TailwindTrait.php

@@ -53,11 +53,15 @@ public static function getTwBreakpoints($desktopFirst = false)
 	public static function getTwPart($part, $manifest, ...$custom)
 	{
 		if (!$part || !$manifest || !isset($manifest['tailwind']) || \array_keys($manifest['tailwind']) === []) {
-			return '';
+			return $custom ? Helpers::classnames($custom) : ''; // @phpstan-ignore-line
 		}
 
 		$partClasses = $manifest['tailwind']['parts'][$part]['twClasses'] ?? '';
 
+		if (\is_array($partClasses)) {
+			$partClasses = \implode(' ', $partClasses);
+		}
+
 		return Helpers::classnames([$partClasses, ...$custom]);
 	}
 
@@ -76,16 +80,20 @@ public static function getTwPart($part, $manifest, ...$custom)
 	public static function getTwDynamicPart($part, $attributes, $manifest, ...$custom)
 	{
 		if (!$part || !$manifest || !isset($manifest['tailwind']) || \array_keys($manifest['tailwind']) === []) {
-			return '';
+			return $custom ? Helpers::classnames($custom) : ''; // @phpstan-ignore-line
 		}
 
 		$baseClasses = $manifest['tailwind']['parts'][$part]['twClasses'] ?? '';
 
+		if (\is_array($baseClasses)) {
+			$baseClasses = \implode(' ', $baseClasses);
+		}
+
 		$mainClasses = [];
 
 		if (isset($manifest['tailwind']['options'])) {
 			foreach ($manifest['tailwind']['options'] as $attributeName => $value) {
-				if (isset($value['part']) && $value['part'] !== $part) {
+				if (!isset($value['part']) || $value['part'] !== $part) {
 					continue;
 				}
 
@@ -111,7 +119,13 @@ public static function getTwDynamicPart($part, $attributes, $manifest, ...$custo
 				}
 
 				if (!$responsive) {
-					$mainClasses = [...$mainClasses, $twClasses[$value]];
+					$output = $twClasses[$value] ?? '';
+
+					if (\is_array($output)) {
+						$output = \implode(' ', $output);
+					}
+
+					$mainClasses = [...$mainClasses, $output];
 					continue;
 				}
 
@@ -124,6 +138,10 @@ public static function getTwDynamicPart($part, $attributes, $manifest, ...$custo
 
 					$currentClasses = $twClasses[$value[$breakpoint]] ?? '';
 
+					if (\is_array($currentClasses)) {
+						$currentClasses = \implode(' ', $currentClasses);
+					}
+
 					if (!$currentClasses) {
 						return $curr;
 					}
@@ -157,11 +175,15 @@ public static function getTwDynamicPart($part, $attributes, $manifest, ...$custo
 	public static function getTwClasses($attributes, $manifest, ...$custom)
 	{
 		if (!$attributes || !$manifest || !isset($manifest['tailwind']) || \array_keys($manifest['tailwind']) === []) {
-			return '';
+			return $custom ? Helpers::classnames($custom) : ''; // @phpstan-ignore-line
 		}
 
 		$baseClasses = $manifest['tailwind']['base']['twClasses'] ?? '';
 
+		if (\is_array($baseClasses)) {
+			$baseClasses = \implode(' ', $baseClasses);
+		}
+
 		$mainClasses = [];
 
 		if (isset($manifest['tailwind']['options'])) {
@@ -192,7 +214,13 @@ public static function getTwClasses($attributes, $manifest, ...$custom)
 				}
 
 				if (!$responsive) {
-					$mainClasses = [...$mainClasses, $twClasses[$value]];
+					$output = $twClasses[$value] ?? '';
+
+					if (\is_array($output)) {
+						$output = \implode(' ', $output);
+					}
+
+					$mainClasses = [...$mainClasses, $output];
 					continue;
 				}
 
@@ -230,6 +258,10 @@ public static function getTwClasses($attributes, $manifest, ...$custom)
 				$conditions = $value['attributes'];
 				$twClasses = $value['twClasses'];
 
+				if (\is_array($twClasses)) {
+					$twClasses = \implode(' ', $twClasses);
+				}
+
 				$matches = true;
 
 				foreach ($conditions as $key => $attrConditions) {

src/InitSetup/tailwind/plugin/.prettierrc

@@ -6,5 +6,9 @@
 	"jsxSingleQuote": true,
 	"singleQuote": true,
 	"singleAttributePerLine": true,
-	"printWidth": 120
+	"printWidth": 120,
+	"arrowParens": "always",
+	"bracketSpacing": true,
+	"semi": true,
+	"trailingComma": "all"
 }

src/InitSetup/tailwind/plugin/package.json

@@ -12,13 +12,13 @@
 	},
 	"devDependencies": {
 		"husky": "^9.0.11",
-		"webpack": "^5.91.0",
+		"webpack": "^5.93.0",
 		"webpack-cli": "^5.1.4"
 	},
 	"dependencies": {
-		"@eightshift/ui-components": "^1.2.2",
-		"fluid-tailwind": "^1.0.2",
-		"tailwindcss": "^3.4.4",
+		"@eightshift/ui-components": "^1.4.7",
+		"fluid-tailwind": "^1.0.3",
+		"tailwindcss": "^3.4.10",
 		"tailwindcss-animate": "^1.0.7"
 	},
 	"husky": {

src/InitSetup/tailwind/theme/.prettierrc

@@ -6,5 +6,9 @@
 	"jsxSingleQuote": true,
 	"singleQuote": true,
 	"singleAttributePerLine": true,
-	"printWidth": 120
+	"printWidth": 120,
+	"arrowParens": "always",
+	"bracketSpacing": true,
+	"semi": true,
+	"trailingComma": "all"
 }

src/InitSetup/tailwind/theme/package.json

@@ -11,14 +11,14 @@
 		"build": "webpack --mode production"
 	},
 	"devDependencies": {
-		"husky": "^9.0.11",
-		"webpack": "^5.91.0",
+		"husky": "^9.1.5",
+		"webpack": "^5.93.0",
 		"webpack-cli": "^5.1.4"
 	},
 	"dependencies": {
-		"@eightshift/ui-components": "^1.2.2",
-		"fluid-tailwind": "^1.0.2",
-		"tailwindcss": "^3.4.4",
+		"@eightshift/ui-components": "^1.4.7",
+		"fluid-tailwind": "^1.0.3",
+		"tailwindcss": "^3.4.10",
 		"tailwindcss-animate": "^1.0.7",
 		"micromodal": "^0.4.10"
 	},