fix composer installation, add mod() helper

README.md

@@ -42,7 +42,7 @@ define("KIRBY_HELPER_ATTR", false);
 <?php snippet('component', ['class' => 'w-1/2']) ?>
 
 // output
-<div class="h-full bg-neutral-100 w-1/2" data-attr="hello world!">[...]</div>
+<div class="w-1/2 h-full bg-neutral-100" data-attr="hello world!">[...]</div>
 ```
 
 ### `merge()`
@@ -59,7 +59,7 @@ define("KIRBY_HELPER_ATTR", false);
 <?php snippet('component', ['class' => 'w-1/2']) ?>
 
 // output
-<div class="h-full bg-neutral-100 w-1/2">[...]</div>
+<div class="w-1/2 h-full bg-neutral-100">[...]</div>
 ```
 
 ### `cls()`
@@ -81,11 +81,11 @@ define("KIRBY_HELPER_ATTR", false);
 
 // site/templates/home.php
 // output
-<div class="bg-neutral-white py-32 px-16">[...]</div>
+<div class="px-16 py-32 bg-neutral-white">[...]</div>
 
 // site/templates/article.php
 // output
-<div class="bg-neutral-white py-32">[...]</div>
+<div class="py-32 bg-neutral-white">[...]</div>
 ```
 
 ### Conditional merging
@@ -103,14 +103,61 @@ This conditional merge syntax using arrays can be used with the `merge()` and `a
     ]) ?>>[...]</div>
 ```
 
+### `mod($modifier, $classes)`
+
+`mod()` applies the specified modifier/variant to each class supplied in the `$class` string. It also applies Tailwind Merge behaviour and outputs the contents of class attribute. This is useful when you have a bunch of classes and want them all to activate at the same modifier.
+
+#### Example
+
+```php
+<div class="flex mb-4 <?= mod('lg', 'mb-2 flex-col') ?>">[...]</div>
+
+// output
+<div class="flex mb-4 lg:mb-2 lg:flex-col">[...]</div>
+```
+
+#### "But Tailwind won't parse my classes then!"
+
+I hear you, but thankfully Tailwind allows us to customize the parser to our needs. This is not a 100% perfect technique due to being reliant on regexing' the classes, but it works for most cases.
+
+With a custom transformer function to scan for the `mod()` function, your `tailwind.config.js` could look like this:
+
+```js
+module.exports = {
+  content: {
+    files: ["./site/**/*.php", "./src/index.js"],
+    transform: (code) => {
+      const variantGroupsRegex = /mod\(.([^,"']+)[^\[]+["'](.+)["']\)/g
+      const variantGroupMatches = [...code.matchAll(variantGroupsRegex)]
+
+      variantGroupMatches.forEach(([matchStr, variants, classes]) => {
+        const parsedClasses = classes
+          .split(" ")
+          .map((cls) => `${variants}:${cls}`)
+          .join(" ")
+
+        code = code.replaceAll(matchStr, parsedClasses)
+      })
+
+      return code
+    }
+  },
+  theme: {
+    extend: {}
+  },
+  plugins: []
+}
+```
+
+For simplicity in parsing the function with Tailwind, the `mod()` function doesn't support arrays. With this approach, you're also not aple to e.g. use a variable inside the function, but only direct strings.
+
+If you still want to use variables, that e.g. come from the CMS directly, you can add the generated classes to your [`safelist`](https://tailwindcss.com/docs/content-configuration#safelisting-classes) and they'll be generated to matter what.
+
 ## Options
 
-| Option          | Default | Description                            |
-| --------------- | ------- | -------------------------------------- |
-| `prefix`        | ``      | Set a prefix for your tailwind classes |
-| `helpers.attr`  | `true`  | Register the `attr()` helper function  |
-| `helpers.cls`   | `true`  | Register the `cls()` helper function   |
-| `helpers.merge` | `true`  | Register the `merge()` helper function |
+| Option   | Default | Description                            |
+| -------- | ------- | -------------------------------------- |
+| `prefix` | ``      | Set a prefix for your tailwind classes |
 
 Options allow you to fine tune the behaviour of the plugin. You can set them in your `config.php` file:
 

classes/TwMerge.php

@@ -67,4 +67,9 @@ public static function merge(...$classes): string
   {
     return self::attr('class', $classes) ?? ' ';
   }
+
+  public static function modify(string $modifier, string $classes): string
+  {
+    return self::cls($modifier . ':' . implode(" {$modifier}:", explode(' ', $classes)));
+  }
 }

composer.json

@@ -1,7 +1,7 @@
 {
   "name": "tobimori/kirby-tailwind-merge",
   "description": "Tailwind Merge for Kirby CMS",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "type": "kirby-plugin",
   "keywords": [
     "kirby",

helpers.php

@@ -2,7 +2,7 @@
 
 use tobimori\TwMerge;
 
-if (option('tobimori.tailwind-merge.helpers.attr', true)) {
+if (!function_exists('attr')) {
   /**
    * Generates a list of HTML attributes, and intelligently merges classes with Tailwind Merge.
    */
@@ -15,7 +15,7 @@ function attr(
   }
 }
 
-if (option('tobimori.tailwind-merge.helpers.merge', true)) {
+if (!function_exists('merge')) {
   /**
    * Outputs the class html attribute and intelligently merges classes with Tailwind Merge.
    */
@@ -25,7 +25,7 @@ function merge(...$classes): string
   }
 }
 
-if (option('tobimori.tailwind-merge.helpers.cls', true)) {
+if (!function_exists('cls')) {
   /**
    * Outputs the contents of the class html attribute and intelligently merges classes with Tailwind Merge.
    */
@@ -34,3 +34,13 @@ function cls(...$classes): string
     return TwMerge::cls($classes);
   }
 }
+
+if (!function_exists('mod')) {
+  /**
+   * Modifies all classes with the given modifier and intelligently merges classes with Tailwind Merge.
+   */
+  function mod(string $modifier, string $classes): string
+  {
+    return TwMerge::modify($modifier, $classes);
+  }
+}

index.php

@@ -6,11 +6,6 @@
 
 App::plugin('tobimori/tailwind-merge', [
   'options' => [
-    'prefix' => '',
-    'helpers' => [
-      'attr' => true,
-      'merge' => true,
-      'cls' => true
-    ]
+    'prefix' => ''
   ]
 ]);

tailwind.example.js

@@ -0,0 +1,24 @@
+module.exports = {
+  content: {
+    files: ['./site/**/*.php', './src/index.js'],
+    transform: (code) => {
+      const variantGroupsRegex = /mod\(.([^,"']+)[^\[]+["'](.+)["']\)/g
+      const variantGroupMatches = [...code.matchAll(variantGroupsRegex)]
+
+      variantGroupMatches.forEach(([matchStr, variants, classes]) => {
+        const parsedClasses = classes
+          .split(' ')
+          .map((cls) => `${variants}:${cls}`)
+          .join(' ')
+
+        code = code.replaceAll(matchStr, parsedClasses)
+      })
+
+      return code
+    }
+  },
+  theme: {
+    extend: {}
+  },
+  plugins: []
+}

vendor/composer/autoload_psr4.php

@@ -16,7 +16,7 @@
     'Psr\\SimpleCache\\' => array($vendorDir . '/psr/simple-cache/src'),
     'Psr\\Container\\' => array($vendorDir . '/psr/container/src'),
     'Kirby\\' => array($vendorDir . '/getkirby/composer-installer/src'),
-    'Illuminate\\Support\\' => array($vendorDir . '/illuminate/collections', $vendorDir . '/illuminate/conditionable', $vendorDir . '/illuminate/macroable', $vendorDir . '/illuminate/support'),
+    'Illuminate\\Support\\' => array($vendorDir . '/illuminate/macroable', $vendorDir . '/illuminate/conditionable', $vendorDir . '/illuminate/collections', $vendorDir . '/illuminate/support'),
     'Illuminate\\Contracts\\' => array($vendorDir . '/illuminate/contracts'),
     'Doctrine\\Inflector\\' => array($vendorDir . '/doctrine/inflector/lib/Doctrine/Inflector'),
     'Carbon\\' => array($vendorDir . '/nesbot/carbon/src/Carbon'),

vendor/composer/autoload_static.php

@@ -103,9 +103,9 @@ class ComposerStaticInit312d406bef150e9579cbbf902b985c58
         ),
         'Illuminate\\Support\\' => 
         array (
-            0 => __DIR__ . '/..' . '/illuminate/collections',
+            0 => __DIR__ . '/..' . '/illuminate/macroable',
             1 => __DIR__ . '/..' . '/illuminate/conditionable',
-            2 => __DIR__ . '/..' . '/illuminate/macroable',
+            2 => __DIR__ . '/..' . '/illuminate/collections',
             3 => __DIR__ . '/..' . '/illuminate/support',
         ),
         'Illuminate\\Contracts\\' => 

vendor/composer/installed.php

@@ -1,8 +1,8 @@
 <?php return array(
     'root' => array(
         'name' => 'tobimori/kirby-tailwind-merge',
-        'pretty_version' => '1.0.0',
-        'version' => '1.0.0.0',
+        'pretty_version' => '2.0.0',
+        'version' => '2.0.0.0',
         'reference' => NULL,
         'type' => 'kirby-plugin',
         'install_path' => __DIR__ . '/../../',
@@ -152,8 +152,8 @@
             ),
         ),
         'tobimori/kirby-tailwind-merge' => array(
-            'pretty_version' => '1.0.0',
-            'version' => '1.0.0.0',
+            'pretty_version' => '2.0.0',
+            'version' => '2.0.0.0',
             'reference' => NULL,
             'type' => 'kirby-plugin',
             'install_path' => __DIR__ . '/../../',