From caecf0f186b08164b6c152ce6e6ba95645a3fcda Mon Sep 17 00:00:00 2001
From: Matt Swanson <matt@mdswanson.com>
Date: Mon, 14 Dec 2020 14:55:22 -0500
Subject: [PATCH] Code review recycle

---
 docs/reference/css_classes.md                         |  4 ++--
 packages/@stimulus/core/src/class_map.ts              | 11 +++--------
 .../@stimulus/core/src/tests/modules/class_tests.ts   |  6 +++---
 3 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/docs/reference/css_classes.md b/docs/reference/css_classes.md
index 6c54a86a..aa0c5d4a 100644
--- a/docs/reference/css_classes.md
+++ b/docs/reference/css_classes.md
@@ -64,7 +64,7 @@ Construct a CSS class attribute by joining together the controller identifier an
 </form>
 ```
 
-If you are working with utility classes and want to define multiple CSS classes for an attribute, separate the CSS class names with spaces.
+If you want to define multiple CSS classes for an attribute, separate the CSS class names with spaces.
 
 ## Properties
 
@@ -96,7 +96,7 @@ export default class extends Controller {
 
 **Note:** Stimulus will throw an error if you attempt to access a CSS class property when no matching CSS class attribute is present.
 
-If you are using utility classes, access the plural class property. You can apply the array of CSS classes to elements using [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax).
+If you want to use multiple classes, access the plural class property. You can apply the array of CSS classes to elements using [spread syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax).
 
 <meta data-controller="callout" data-callout-text-value="...this.loadingClasses">
 
diff --git a/packages/@stimulus/core/src/class_map.ts b/packages/@stimulus/core/src/class_map.ts
index fc0a1e1d..df246817 100644
--- a/packages/@stimulus/core/src/class_map.ts
+++ b/packages/@stimulus/core/src/class_map.ts
@@ -12,17 +12,12 @@ export class ClassMap {
   }
 
   get(name: string) {
-    return this.getAll(name)[0];
+    return this.getAll(name)[0]
   }
 
   getAll(name: string) {
-    const classAttribute = this.data.get(this.getDataKey(name));
-
-    if (classAttribute) {
-      return classAttribute.split(" ")
-    } else {
-      return []
-    }
+    const tokenString = this.data.get(this.getDataKey(name)) || ""
+    return tokenString.trim().split(/\s+/).filter(content => content.length)
   }
 
   getAttributeName(name: string) {
diff --git a/packages/@stimulus/core/src/tests/modules/class_tests.ts b/packages/@stimulus/core/src/tests/modules/class_tests.ts
index 70ee5cc7..ec85ee05 100644
--- a/packages/@stimulus/core/src/tests/modules/class_tests.ts
+++ b/packages/@stimulus/core/src/tests/modules/class_tests.ts
@@ -1,7 +1,7 @@
 import { ControllerTestCase } from "../cases/controller_test_case"
 import { ClassController } from "../controllers/class_controller"
 
-export default class ValueTests extends ControllerTestCase(ClassController) {
+export default class ClassTests extends ControllerTestCase(ClassController) {
   fixtureHTML = `
     <div data-controller="${this.identifier}"
       data-${this.identifier}-active-class="test--active"
@@ -27,11 +27,11 @@ export default class ValueTests extends ControllerTestCase(ClassController) {
     this.assert.equal(this.controller.loadingClass, "busy")
   }
 
-  "test utility classes map to array"() {
+  "test multiple classes map to array"() {
     this.assert.deepEqual(this.controller.successClasses, ["bg-green-400", "border", "border-green-600"])
   }
 
-  "test accessing a class property returns first class if utility classes are used"() {
+  "test accessing a class property returns first class if multiple classes are used"() {
     this.assert.equal(this.controller.successClass, "bg-green-400");
   }
 }