1mpacto-sass 0.0.2 → 0.0.4

package/_engine.scss

@@ -599,6 +599,7 @@ $browser-prefixes: (
     $whitelist-responsive,
     $whitelist-hover,
     $whitelist-focus,
+    $whitelist-placeholder,
     $class-prefix: '',
     $var-prefix: ''
 
@@ -646,4 +647,35 @@ $browser-prefixes: (
             @include generate-utility($class, $static-map, $dynamic-map, $var-prefix);
         }
     }
+
+    // 5. Placeholder
+    @each $class in $whitelist-placeholder {
+        $prefixed-class: apply-class-prefix($class, $class-prefix);
+        $selector-base: escape-classname('placeholder:' + $prefixed-class);
+
+        // Webkit
+        .#{$selector-base}::-webkit-input-placeholder {
+            @include generate-utility($class, $static-map, $dynamic-map, $var-prefix);
+        }
+
+        // Moz
+        .#{$selector-base}::-moz-placeholder {
+            @include generate-utility($class, $static-map, $dynamic-map, $var-prefix);
+        }
+
+        // IE 10+
+        .#{$selector-base}:-ms-input-placeholder {
+            @include generate-utility($class, $static-map, $dynamic-map, $var-prefix);
+        }
+
+        // Edge
+        .#{$selector-base}::-ms-input-placeholder {
+            @include generate-utility($class, $static-map, $dynamic-map, $var-prefix);
+        }
+
+        // Standard
+        .#{$selector-base}::placeholder {
+            @include generate-utility($class, $static-map, $dynamic-map, $var-prefix);
+        }
+    }
 }

package/_preflight.scss

@@ -4,11 +4,13 @@
 @mixin preflight($font-family-map: (), $border-color: #e5e7eb) {
     // RESOLVE FONTS
     $sans-font: map.get($font-family-map, 'sans');
+
     @if not $sans-font {
         $sans-font: (ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
     }
 
     $mono-font: map.get($font-family-map, 'mono');
+
     @if not $mono-font {
         $mono-font: (ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
     }
@@ -26,10 +28,14 @@
     *,
     ::before,
     ::after {
-        box-sizing: border-box; /* 1 */
-        border-width: 0; /* 2 */
-        border-style: solid; /* 2 */
-        border-color: #{$border-color}; /* 2 */
+        box-sizing: border-box;
+        /* 1 */
+        border-width: 0;
+        /* 2 */
+        border-style: solid;
+        /* 2 */
+        border-color: #{$border-color};
+        /* 2 */
     }
 
     ::before,
@@ -49,14 +55,23 @@
 
     html,
     :host {
-        line-height: 1.5; /* 1 */
-        -webkit-text-size-adjust: 100%; /* 2 */
-        -moz-tab-size: 4; /* 3 */
-        tab-size: 4; /* 3 */
-        font-family: $sans-font; /* 4 */
-        font-feature-settings: normal; /* 5 */
-        font-variation-settings: normal; /* 6 */
-        -webkit-tap-highlight-color: transparent; /* 7 */
+        line-height: 1.5;
+        /* 1 */
+        -webkit-text-size-adjust: 100%;
+        /* 2 */
+        -moz-tab-size: 4;
+        /* 3 */
+        -o-tab-size: 4;
+        tab-size: 4;
+        /* 3 */
+        font-family: $sans-font;
+        /* 4 */
+        font-feature-settings: normal;
+        /* 5 */
+        font-variation-settings: normal;
+        /* 6 */
+        -webkit-tap-highlight-color: transparent;
+        /* 7 */
     }
 
     /*
@@ -65,8 +80,10 @@
     */
 
     body {
-        margin: 0; /* 1 */
-        line-height: inherit; /* 2 */
+        margin: 0;
+        /* 1 */
+        line-height: inherit;
+        /* 2 */
     }
 
     /*
@@ -76,9 +93,12 @@
     */
 
     hr {
-        height: 0; /* 1 */
-        color: inherit; /* 2 */
-        border-top-width: 1px; /* 3 */
+        height: 0;
+        /* 1 */
+        color: inherit;
+        /* 2 */
+        border-top-width: 1px;
+        /* 3 */
     }
 
     /*
@@ -86,6 +106,7 @@
     */
 
     abbr:where([title]) {
+        -webkit-text-decoration: underline dotted;
         text-decoration: underline dotted;
     }
 
@@ -132,10 +153,14 @@
     kbd,
     samp,
     pre {
-        font-family: $mono-font; /* 1 */
-        font-feature-settings: normal; /* 2 */
-        font-variation-settings: normal; /* 3 */
-        font-size: 1em; /* 4 */
+        font-family: $mono-font;
+        /* 1 */
+        font-feature-settings: normal;
+        /* 2 */
+        font-variation-settings: normal;
+        /* 3 */
+        font-size: 1em;
+        /* 4 */
     }
 
     /*
@@ -173,9 +198,12 @@
     */
 
     table {
-        text-indent: 0; /* 1 */
-        border-color: inherit; /* 2 */
-        border-collapse: collapse; /* 3 */
+        text-indent: 0;
+        /* 1 */
+        border-color: inherit;
+        /* 2 */
+        border-collapse: collapse;
+        /* 3 */
     }
 
     /*
@@ -189,15 +217,26 @@
     optgroup,
     select,
     textarea {
-        font-family: inherit; /* 1 */
-        font-feature-settings: inherit; /* 1 */
-        font-variation-settings: inherit; /* 1 */
-        font-size: 100%; /* 1 */
-        font-weight: inherit; /* 1 */
-        line-height: inherit; /* 1 */
-        color: inherit; /* 1 */
-        margin: 0; /* 2 */
-        padding: 0; /* 3 */
+        font-family: inherit;
+        /* 1 */
+        font-feature-settings: inherit;
+        /* 1 */
+        font-variation-settings: inherit;
+        /* 1 */
+        font-size: 100%;
+        /* 1 */
+        font-weight: inherit;
+        /* 1 */
+        line-height: inherit;
+        /* 1 */
+        letter-spacing: inherit;
+        /* 1 */
+        color: inherit;
+        /* 1 */
+        margin: 0;
+        /* 2 */
+        padding: 0;
+        /* 3 */
     }
 
     /*
@@ -215,12 +254,15 @@
     */
 
     button,
-    [type='button'],
-    [type='reset'],
-    [type='submit'] {
-        -webkit-appearance: button; /* 1 */
-        background-color: transparent; /* 2 */
-        background-image: none; /* 2 */
+    input:where([type='button']),
+    input:where([type='reset']),
+    input:where([type='submit']) {
+        -webkit-appearance: button;
+        /* 1 */
+        background-color: transparent;
+        /* 2 */
+        background-image: none;
+        /* 2 */
     }
 
     /*
@@ -262,8 +304,10 @@
     */
 
     [type='search'] {
-        -webkit-appearance: textfield; /* 1 */
-        outline-offset: -2px; /* 2 */
+        -webkit-appearance: textfield;
+        /* 1 */
+        outline-offset: -2px;
+        /* 2 */
     }
 
     /*
@@ -280,8 +324,10 @@
     */
 
     ::-webkit-file-upload-button {
-        -webkit-appearance: button; /* 1 */
-        font: inherit; /* 2 */
+        -webkit-appearance: button;
+        /* 1 */
+        font: inherit;
+        /* 2 */
     }
 
     /*
@@ -349,10 +395,20 @@
     2. Set the default placeholder color to the user's configured gray 400 color.
     */
 
+    input::-moz-placeholder,
+    textarea::-moz-placeholder {
+        opacity: 1;
+        /* 1 */
+        color: #9ca3af;
+        /* 2 */
+    }
+
     input::placeholder,
     textarea::placeholder {
-        opacity: 1; /* 1 */
-        color: #9ca3af; /* 2 */
+        opacity: 1;
+        /* 1 */
+        color: #9ca3af;
+        /* 2 */
     }
 
     /*
@@ -386,8 +442,10 @@
     iframe,
     embed,
     object {
-        display: block; /* 1 */
-        vertical-align: middle; /* 2 */
+        display: block;
+        /* 1 */
+        vertical-align: middle;
+        /* 2 */
     }
 
     /*
@@ -404,4 +462,4 @@
     [hidden] {
         display: none;
     }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "1mpacto-sass",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "sass generator for css utility first",
   "type": "module",
   "exports": {

package/readme.md

@@ -9,7 +9,7 @@ Generator ini dibuat sebagai pengganti Tailwind CSS untuk proyek yang membutuhka
 3.  **Arbitrary Values**: Mendukung nilai kustom langsung di classname, contoh: `w-[500px]`, `m-[calc(100%+20px)]`.
 4.  **Negative Values**: Mendukung nilai negatif dengan prefix `-`, contoh: `-m-4`, `-rotate-45`.
 5.  **Important Modifier**: Mendukung prefix `!` untuk `!important`, contoh: `!p-4`.
-6.  **Responsive & States**: Mendukung breakpoint (`sm:`, `md:`, dll) dan state (`hover:`, `focus:`).
+6.  **Responsive & States**: Mendukung breakpoint (`sm:`, `md:`, dll) dan state (`hover:`, `focus:`, `placeholder:`).
 7.  **Namespace Isolation**: Mendukung prefix global untuk semua class (misal `1ru-`) dan variable CSS untuk mencegah konflik.
 
 ---
@@ -383,10 +383,11 @@ $whitelistresponsive: (
 ```
 
 ### State Classes
-Class untuk hover atau focus.
+Class untuk hover, focus, atau placeholder.
 ```scss
 $whitelisthover: ('bg-gray-100', 'text-red-500'); // Menjadi .hover:bg-gray-100:hover
 $whitelistfocus: ('ring-2'); // Menjadi .focus:ring-2:focus
+$whitelistplaceholder: ('text-gray-400'); // Menjadi .placeholder:text-gray-400::placeholder
 ```
 
 ---
@@ -552,6 +553,8 @@ $whitelisthover : ();
 // Whitelist Hover
 $whitelistfocus : ();
 // Whitelist Focus
+$whitelistplaceholder : ();
+// Whitelist Placeholder
 
 
 @include engine.generatorStyle(config.$static-utilities-map,
@@ -582,6 +585,7 @@ $whitelistfocus : ();
     $whitelistresponsive,
     $whitelisthover,
     $whitelistfocus,
+    $whitelistplaceholder,
     'my-prefix-', // Custom Class Prefix (param ke-8)
     'my-var-' // Custom Var Prefix (param ke-9)
 );

package/tests/integration.test.scss

@@ -165,5 +165,6 @@ $test-cases-base: ( // --- STATIC UTILITIES ---
     $whitelist-responsive: ('sm': $test-cases-base, '2xl': $test-cases-base),
     $whitelist-hover: $test-cases-base,
     $whitelist-focus: $test-cases-base,
+    $whitelist-placeholder: $test-cases-base,
     $var-prefix: 'is'
 );

package/tests/run_tests.cjs

@@ -107,6 +107,9 @@ function parseRules(content) {
         } else if (cleanSelector.includes(':focus')) {
             variant = 'focus';
             cleanSelector = cleanSelector.replace(':focus', '');
+        } else if (cleanSelector.includes('::placeholder')) {
+            variant = 'placeholder';
+            cleanSelector = cleanSelector.replace('::placeholder', '');
         }
 
         // Remove leading dot
@@ -161,8 +164,8 @@ function assertRule(rules, testCase) {
             if (!checkProps(baseRule, testCase.expected, testCase.class, 'Base')) allVariantsPassed = false;
         }
 
-        // 2. Validate Pseudo-classes (hover, focus)
-        else if (variant === 'hover' || variant === 'focus') {
+        // 2. Validate Pseudo-classes (hover, focus, placeholder)
+        else if (variant === 'hover' || variant === 'focus' || variant === 'placeholder') {
             const pseudoClass = `${variant}:${testCase.class}`;
             const pseudoRule = rules.find(r => r.className === pseudoClass && r.variant === variant);
             if (!checkProps(pseudoRule, testCase.expected, pseudoClass, capitalize(variant))) allVariantsPassed = false;
@@ -222,90 +225,90 @@ function runTests() {
     // List of test cases covering all categories defined in integration.test.scss
     const testCases = [
         // --- STATIC UTILITIES ---
-        { class: 'block', expected: { 'display': 'block' }, variants: ['base', 'hover', 'focus', 'sm', '2xl'] },
-        { class: 'fixed', expected: { 'position': 'fixed' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'flex-row', expected: { 'flex-direction': 'row' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'items-center', expected: { 'align-items': 'center' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'text-center', expected: { 'text-align': 'center' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'border-none', expected: { 'border-style': 'none' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'cursor-pointer', expected: { 'cursor': 'pointer' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'truncate', expected: { 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'white-space': 'nowrap' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'flex-1', expected: { 'flex': '1 1 0%' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'justify-between', expected: { 'justify-content': 'space-between' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'uppercase', expected: { 'text-transform': 'uppercase' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'underline', expected: { 'text-decoration': 'underline' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'italic', expected: { 'font-style': 'italic' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'list-disc', expected: { 'list-style-type': 'disc' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'align-middle', expected: { 'vertical-align': 'middle' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'overflow-hidden', expected: { 'overflow': 'hidden' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'object-cover', expected: { 'object-fit': 'cover' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'bg-cover', expected: { 'background-size': 'cover' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'outline-none', expected: { 'outline': '2px solid transparent', 'outline-offset': '2px' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'border-collapse', expected: { 'border-collapse': 'collapse' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'select-none', expected: { 'user-select': 'none' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'appearance-none', expected: { 'appearance': 'none' }, variants: ['base', 'hover', 'focus', 'sm'] },
+        { class: 'block', expected: { 'display': 'block' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm', '2xl'] },
+        { class: 'fixed', expected: { 'position': 'fixed' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'flex-row', expected: { 'flex-direction': 'row' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'items-center', expected: { 'align-items': 'center' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'text-center', expected: { 'text-align': 'center' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'border-none', expected: { 'border-style': 'none' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'cursor-pointer', expected: { 'cursor': 'pointer' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'truncate', expected: { 'overflow': 'hidden', 'text-overflow': 'ellipsis', 'white-space': 'nowrap' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'flex-1', expected: { 'flex': '1 1 0%' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'justify-between', expected: { 'justify-content': 'space-between' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'uppercase', expected: { 'text-transform': 'uppercase' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'underline', expected: { 'text-decoration': 'underline' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'italic', expected: { 'font-style': 'italic' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'list-disc', expected: { 'list-style-type': 'disc' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'align-middle', expected: { 'vertical-align': 'middle' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'overflow-hidden', expected: { 'overflow': 'hidden' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'object-cover', expected: { 'object-fit': 'cover' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'bg-cover', expected: { 'background-size': 'cover' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'outline-none', expected: { 'outline': '2px solid transparent', 'outline-offset': '2px' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'border-collapse', expected: { 'border-collapse': 'collapse' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'select-none', expected: { 'user-select': 'none' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'appearance-none', expected: { 'appearance': 'none' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
 
         // --- DYNAMIC UTILITIES (SPACING) ---
-        { class: 'p-1', expected: { 'padding': '0.25rem' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'px-1', expected: { 'padding-left': '0.25rem', 'padding-right': '0.25rem' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'm-1', expected: { 'margin': '0.25rem' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: '-m-1', expected: { 'margin': '-0.25rem' }, variants: ['base', 'hover', 'focus', 'sm'] },
+        { class: 'p-1', expected: { 'padding': '0.25rem' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'px-1', expected: { 'padding-left': '0.25rem', 'padding-right': '0.25rem' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'm-1', expected: { 'margin': '0.25rem' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: '-m-1', expected: { 'margin': '-0.25rem' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
 
         // --- DYNAMIC UTILITIES (FLEX/GRID) ---
-        { class: 'gap-1', expected: { 'gap': '0.25rem' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'basis-1', expected: { 'flex-basis': '0.25rem' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'order-1', expected: { 'order': '1' }, variants: ['base', 'hover', 'focus', 'sm'] },
+        { class: 'gap-1', expected: { 'gap': '0.25rem' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'basis-1', expected: { 'flex-basis': '0.25rem' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'order-1', expected: { 'order': '1' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
 
         // --- DYNAMIC UTILITIES (POSITIONING) ---
-        { class: 'top-0', expected: { 'top': '0px' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'inset-0', expected: { 'top': '0px', 'right': '0px', 'bottom': '0px', 'left': '0px' }, variants: ['base', 'hover', 'focus', 'sm'] },
+        { class: 'top-0', expected: { 'top': '0px' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'inset-0', expected: { 'top': '0px', 'right': '0px', 'bottom': '0px', 'left': '0px' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
 
         // --- DYNAMIC UTILITIES (SIZING) ---
-        { class: 'w-full', expected: { 'width': '100%' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'h-screen', expected: { 'height': '100vh' }, variants: ['base', 'hover', 'focus', 'sm'] },
+        { class: 'w-full', expected: { 'width': '100%' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'h-screen', expected: { 'height': '100vh' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
 
         // --- DYNAMIC UTILITIES (TYPOGRAPHY) ---
-        { class: 'text-sm', expected: { 'font-size': '0.875rem', 'line-height': '1.25rem' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'text-primary', expected: { 'color': '#007bff' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'font-bold', expected: { 'font-weight': '700' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'leading-4', expected: { 'line-height': '1rem' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'tracking-wide', expected: { 'letter-spacing': '0.025em' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'line-clamp-2', expected: { 'overflow': 'hidden', 'display': '-webkit-box', '-webkit-line-clamp': '2' }, variants: ['base', 'hover', 'focus', 'sm'] },
+        { class: 'text-sm', expected: { 'font-size': '0.875rem', 'line-height': '1.25rem' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'text-primary', expected: { 'color': '#007bff' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'font-bold', expected: { 'font-weight': '700' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'leading-4', expected: { 'line-height': '1rem' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'tracking-wide', expected: { 'letter-spacing': '0.025em' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'line-clamp-2', expected: { 'overflow': 'hidden', 'display': '-webkit-box', '-webkit-line-clamp': '2' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
 
         // --- DYNAMIC UTILITIES (BACKGROUND) ---
-        { class: 'bg-primary', expected: { 'background-color': '#007bff' }, variants: ['base', 'hover', 'focus', 'sm'] },
+        { class: 'bg-primary', expected: { 'background-color': '#007bff' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
 
         // --- DYNAMIC UTILITIES (BORDER) ---
-        { class: 'border-primary', expected: { 'border-color': '#007bff' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'border-2', expected: { 'border-width': '2px' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'rounded-md', expected: { 'border-radius': '0.375rem' }, variants: ['base', 'hover', 'focus', 'sm'] },
+        { class: 'border-primary', expected: { 'border-color': '#007bff' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'border-2', expected: { 'border-width': '2px' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'rounded-md', expected: { 'border-radius': '0.375rem' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
 
-        { class: 'ring-2', expected: { 'box-shadow': 'var(--is-ring-inset, ) 0 0 0 2px var(--is-ring-color, #3b82f6)' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'outline-2', expected: { 'outline-width': '2px' }, variants: ['base', 'hover', 'focus', 'sm'] },
+        { class: 'ring-2', expected: { 'box-shadow': 'var(--is-ring-inset, ) 0 0 0 2px var(--is-ring-color, #3b82f6)' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'outline-2', expected: { 'outline-width': '2px' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
 
         // --- DYNAMIC UTILITIES (EFFECTS) ---
-        { class: 'opacity-50', expected: { 'opacity': '0.5' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'z-10', expected: { 'z-index': '10' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'shadow-sm', expected: { 'box-shadow': '0 1px 2px 0 var(--is-shadow-color, rgba(0, 0, 0, 0.05))' }, variants: ['base', 'hover', 'focus', 'sm'] },
+        { class: 'opacity-50', expected: { 'opacity': '0.5' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'z-10', expected: { 'z-index': '10' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'shadow-sm', expected: { 'box-shadow': '0 1px 2px 0 var(--is-shadow-color, rgba(0, 0, 0, 0.05))' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
 
         // --- DYNAMIC UTILITIES (TRANSFORM) ---
-        { class: 'scale-50', expected: { 'transform': 'scale(0.5)' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'rotate-45', expected: { 'transform': 'rotate(45deg)' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'skew-x-6', expected: { 'transform': 'skewX(6deg)' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'translate-x-4', expected: { 'transform': 'translateX(1rem)' }, variants: ['base', 'hover', 'focus', 'sm'] },
+        { class: 'scale-50', expected: { 'transform': 'scale(0.5)' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'rotate-45', expected: { 'transform': 'rotate(45deg)' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'skew-x-6', expected: { 'transform': 'skewX(6deg)' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'translate-x-4', expected: { 'transform': 'translateX(1rem)' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
 
         // --- DYNAMIC UTILITIES (TRANSITION) ---
-        { class: 'duration-300', expected: { 'transition-duration': '300ms' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'delay-100', expected: { 'transition-delay': '100ms' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'ease-in', expected: { 'transition-timing-function': 'cubic-bezier(0.4, 0, 1, 1)' }, variants: ['base', 'hover', 'focus', 'sm'] },
+        { class: 'duration-300', expected: { 'transition-duration': '300ms' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'delay-100', expected: { 'transition-delay': '100ms' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'ease-in', expected: { 'transition-timing-function': 'cubic-bezier(0.4, 0, 1, 1)' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
 
         // --- DYNAMIC ARBITRARY ---
-        { class: 'p-[17px]', expected: { 'padding': '17px' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'w-[33.3%]', expected: { 'width': '33.3%' }, variants: ['base', 'hover', 'focus', 'sm'] },
-        { class: 'm-[100px]', expected: { 'margin': '100px' }, variants: ['base', 'hover', 'focus', 'sm'] },
+        { class: 'p-[17px]', expected: { 'padding': '17px' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'w-[33.3%]', expected: { 'width': '33.3%' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
+        { class: 'm-[100px]', expected: { 'margin': '100px' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
 
         // --- BORDER SPACING ---
-        { class: 'border-spacing-2', expected: { 'border-spacing': 'var(--is-border-spacing-x) var(--is-border-spacing-y)' }, variants: ['base', 'hover', 'focus', 'sm'] },
+        { class: 'border-spacing-2', expected: { 'border-spacing': 'var(--is-border-spacing-x) var(--is-border-spacing-y)' }, variants: ['base', 'hover', 'focus', 'placeholder', 'sm'] },
     ];
 
     testCases.forEach(test => {