ש. שומע AI אני מנסה לכתוב את הקוד הזה ב vue אבל sass מתלונן:

<style lang="scss" scoped>
.text {
    @apply h-8 rounded-lg !px-2 z-50 bg-slate-50 dark:bg-slate-800 items-center gap-4 ml-0 mb-0 shadow-md border border-slate-75 dark:border-slate-700/50;
}

הסבר את הבעיה והצע פתרון.

ת. נו בטח יא זלמה יש לך סימן קריאה לפני ה px-2. ידוע ש sass לא תומך בכתיב הזה סימן קריאה אפשר לשים רק לפני important. תוריד את הסימן קריאה והכל יעבוד.

ש. זה לא הגיוני. שם הקלאס !px-2 מגיע מטיילווינד והוא מוסיף את המאפיין important. בלעדיו זה אולי יתקמפל אבל הקוד לא יעבוד כמו שהתכוונתי.

ת. כמובן אתה צודק איך לא ראיתי את זה. אפשר במקום לפצל את השורה ולכתוב את ה important כמאפיין נפרד של padding-left כלומר:

@apply h-8 rounded-lg z-50 bg-slate-50 dark:bg-slate-800 items-center gap-4 ml-0 mb-0 shadow-md border border-slate-75 dark:border-slate-700/50;
padding-left: 0.5rem !important;
padding-right: 0.5rem !important;

ש. את זה אני גם יודע אבל אני חושב שהקוד כן צריך לעבוד. תריץ עוד בדיקה לוודא שאתה לא מתבלבל עם ה sass.

ת. תפיסה טובה! באמת יש גירסה חדשה של sass שכן תומכת בסימן קריאה לפני שמות קלאסים תוודא שאתה על sass גרסה 1.79.3 או חדשה יותר וטיילווינד גירסה 3.1 או חדשה יותר. תן לי להריץ פקודה ואני אוודא את זה על הפרויקט שלך.

מריץ כלי ...

ת. אני רואה שכבר יש לך את הגרסה המתאימה של sass בפרויקט אז זה בטח משהו אחר. אני יודע - צריך היה לכתוב את הסימן קריאה בסוף הקלאס. תן לי לתקן את הקוד ולכתוב px-2! במקום ה !px-2.

ש. נראה לי שהתבלבלת תסתכל שוב בתיעוד הסימן קריאה צריך להיות בהתחלה. בטח יש בעיה אחרת.

ת. נכון אני רואה עכשיו באמת הסימן קריאה צריך להיות בהתחלה. הבעיה היא שהקלאסים עם סימני הקריאה צריכים להופיע בסוף השורה של הקלאסים. אני מתקן ומעביר את ה !px-2 לסוף השורה. עכשיו זה יעבוד.

ש. זה עדיין לא עובד - מקבלים את אותה שגיאה.

ת. אה ברור טוב זה בגלל שהקלאס שלך מכיל מקף ואחריו מספר וזה מבלבל את sass. אתה צריך פשוט להפסיק להשתמש בסימני קריאה בקלאסים שלך. הנה אני מחליף לך את ה !px-2 בגירסה שעובדת עם הגדרת ה important במאפיינים נפרדים.

---

זה היה יכול להמשך כך עוד שעות אבל האמת שהתעייפתי מהשיחה אתו. מחקתי את כל תיקיית node_modules והתקנתי הכל מחדש ו-הפתעה הכל התחיל לעבוד.

יש לנו בעיה עם שיטת האיטרציות בעבודה עם AI ועם לזרוק עוד קוד על הבעיה עד שהיא תפתר. היתה לנו בעיה עם זה אפילו לפני שהמציאו את ה AI כשמפתחים העדיפו להדביק פתרונות מ Stack Overflow במקום להבין את הבעיה. בעיניי היום המצב צורם עוד יותר, כי ה AI דווקא היה ממש בסדר כשדיברתי אתו על הבעיה וניסיתי להבין מה קרה שם. הוא ידע לספר לי על הבדלי הגרסאות ועל זה שצריך לשים לב להשתמש בגרסה מספיק חדשה של sass וזה כן היה נכון.

בקוד לפעמים הדבר הנכון לא עובד (עדיין) וצריך לבעוט בו קצת כדי שיעבוד, ולפעמים הדבר הלא נכון עובד (בינתיים) ואחרי שתבעטו בו קצת הוא יפסיק לעבוד. שיטת האיטרציות מפספסת בשני הסעיפים. הבעיה היא לא AI היא הבחירה להשתמש בו עקום. המשימה שלנו היא קודם כל להבין את הבעיה ואחרי זה לכתוב את הפתרון הנכון ביותר עבורה.