@eightshift/frontend-libs-tailwind 1.4.1 → 1.4.2

package/CHANGELOG.md

@@ -4,6 +4,10 @@ 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/).
 
+## [1.4.2] - 2024-10-03
+- Fixed bug with `combinations` output in `tailwindClasses` helper.
+- Fixed CSS `url()` imports for images not working because of Webpack config.
+
 ## [1.4.1] - 2024-10-01
 - `tailwindClasses` check will now work fine even if no `parts` are defined.
 
@@ -63,6 +67,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 
 [Unreleased]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/master...HEAD
 
+[1.4.2]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.1...1.4.2
 [1.4.1]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.4.0...1.4.1
 [1.4.0]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.3.3...1.4.0
 [1.3.3]: https://github.com/infinum/eightshift-frontend-libs-tailwind/compare/1.3.2...1.3.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eightshift/frontend-libs-tailwind",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "description": "A framework for creating modern Gutenberg themes with styling provided by Tailwind CSS.",
   "author": {
     "name": "Eightshift team",
@@ -43,7 +43,6 @@
     "eslint": "^9.11.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
-    "file-loader": "^6.2.0",
     "globals": "^15.9.0",
     "husky": "^9.1.6",
     "lightningcss": "^1.27.0",

package/scripts/editor/tailwindcss.js

@@ -435,12 +435,12 @@ const processCombination = (partName, combo, attributes, manifest) => {
 	for (const [attributeName, allowedValue] of Object.entries(combo?.attributes ?? {})) {
 		const optionValue = checkAttr(attributeName, attributes, manifest, true);
 
-		if (Array.isArray(allowedValue) && !allowedValue.includes(optionValue)) {
+		const isArrayCondition = Array.isArray(allowedValue);
+
+		if (isArrayCondition && !allowedValue.includes(optionValue)) {
 			matches = false;
 			break;
-		}
-
-		if (optionValue !== allowedValue) {
+		} else if (!isArrayCondition && optionValue !== allowedValue) {
 			matches = false;
 			break;
 		}

package/webpack/base.mjs

@@ -78,29 +78,6 @@ export default (options) => {
 		});
 	}
 
-	// Module for Images.
-	if (!options.overrides.includes('images')) {
-		module.rules.push({
-			test: /\.(png|svg|jpg|jpeg|gif|ico|webp)$/i,
-			use: [
-				{
-					loader: 'url-loader',
-					options: {
-						limit: 8192,
-					},
-				},
-			],
-			type: 'javascript/auto',
-		});
-
-		module.rules.push({
-			test: /\.(png|svg|jpg|jpeg|gif|ico|webp)$/i,
-			exclude: [/fonts/, /node_modules/],
-			use: 'file-loader?name=[name].[ext]',
-			dependency: { not: ['url'] },
-		});
-	}
-
 	// Module for CSS.
 	if (!options.overrides.includes('css')) {
 		module.rules.push({
@@ -128,6 +105,15 @@ export default (options) => {
 		});
 	}
 
+	// Module for Images.
+	if (!options.overrides.includes('images')) {
+		module.rules.push({
+			test: /\.(png|svg|jpg|jpeg|gif|ico|webp)$/i,
+			exclude: [/fonts/, /node_modules/],
+			type: 'asset/resource',
+		});
+	}
+
 	const resolve = {
 		symlinks: false,
 	};