Μετάβαση στο περιεχόμενο

Η οδηγία @source

Προβολή ως Markdown Επεξεργασία στο GitHub Τεκμηρίωση στο 3843abd

Το @source βρίσκεται στο CSS εισόδου σας. Οι μορφές του inline() προσθέτουν ή αφαιρούν υποψήφιες κλάσεις και λειτουργούν παντού. Οι μορφές διαδρομής ορίζουν τα αρχεία προτύπων που σαρώνονται για ονόματα κλάσεων· μόνο το CLI σαρώνει αρχεία και προς το παρόν δεν εφαρμόζει τις διαδρομές που του δίνετε (δείτε Πώς χρησιμοποιούνται οι διαδρομές).

CSS
@import "tailwindcss";
@source "./templates";

Οι οδηγίες @source διαβάζονται κατά τη μεταγλώττιση και αφαιρούνται από την έξοδο — δεν εμφανίζονται ποτέ στο παραγόμενο CSS. Οι διαδρομές πρέπει να περικλείονται σε εισαγωγικά· γίνονται δεκτά τόσο τα μονά όσο και τα διπλά εισαγωγικά.

Διαδρομές, μοτίβα glob και άρνηση

Η μορφή διαδρομής δέχεται έναν κατάλογο, ένα μοτίβο glob ή μια διαδρομή με άρνηση, ενώ οι οδηγίες προστίθενται σωρευτικά:

CSS
@source "./templates";              /* a directory */
@source "./components/**/*.php";    /* a glob */
@source not "./templates/legacy";   /* an exclusion */

Πώς χρησιμοποιούνται οι διαδρομές

Ο μεταγλωττιστής καταγράφει κάθε οδηγία διαδρομής στη λίστα sources του πίνακα που επιστρέφει το TailwindPHP\compile(), ως ['base' => …, 'pattern' => …, 'negated' => …] με το base να προέρχεται από την επιλογή μεταγλώττισης base. Δεν διαβάζει ποτέ ο ίδιος αρχεία.

  • Τα tw::generate(), tw::compile() και TailwindCompiler μεταγλωττίζουν μόνο το περιεχόμενο που τους περνάτε. Οι οδηγίες διαδρομής δεν έχουν επίδραση σε αυτές τις περιπτώσεις.
  • Το CLI διαβάζει το sources, αλλά στην τρέχουσα έκδοση σαρώνει αναδρομικά τον κατάλογο του αρχείου εισόδου για κάθε διαδρομή χωρίς άρνηση, ανεξάρτητα από τη διαδρομή ή το μοτίβο glob, και παραλείπει εντελώς τις διαδρομές not, οπότε δεν εξαιρούν τίποτα (#8). Η ενότητα Τι σαρώνει το CLI περιέχει λεπτομέρειες και μια διάταξη που λειτουργεί σήμερα.

Ενσωματωμένες υποψήφιες τιμές

Το @source inline(...) προσθέτει κλάσεις στην έξοδο ακόμη κι όταν δεν εμφανίζονται ποτέ στα αρχεία που σαρώνονται — χρήσιμο για ονόματα κλάσεων που δημιουργούνται δυναμικά κατά τον χρόνο εκτέλεσης:

CSS
@source inline("flex p-4 m-2");

Οι ενσωματωμένες υποψήφιες τιμές υποστηρίζουν και παραλλαγές:

CSS
@source inline("hover:bg-blue-500 focus:ring-2");

Ανάπτυξη αγκυλών

Τα ενσωματωμένα μοτίβα αναπτύσσουν ομάδες σε αγκύλες, ώστε να μπορείτε να απαριθμήσετε συνοπτικά πολλές υποψήφιες τιμές:

CSS
@source inline("p-{1,2,4}");
/* Generates p-1, p-2, and p-4 */

@source inline("text-{red,blue}-500");
/* Generates text-red-500 and text-blue-500 */

Εξαιρούμενες ενσωματωμένες υποψήφιες τιμές

Το @source not inline(...) κάνει το αντίθετο από το inline() — αφαιρεί από την έξοδο τις υποψήφιες τιμές που ταιριάζουν, ακόμη κι αν έχουν εντοπιστεί στο περιεχόμενό σας. Εδώ λειτουργεί επίσης η ανάπτυξη αγκυλών:

CSS
@source not inline("legacy");
@source not inline("p-{1,2}");

Κανόνες επικύρωσης

Το @source είναι δήλωση, όχι block. Ο μεταγλωττιστής απορρίπτει:

  • Μια οδηγία με σώμα — @source cannot have a body.
  • Μια εμφωλευμένη οδηγία (για παράδειγμα, μέσα σε @media) — @source cannot be nested.
  • Μια διαδρομή χωρίς εισαγωγικά — @source paths must be quoted.
CSS
/* Invalid — throws "`@source` cannot have a body." */
@source "./src" {
    .some-style { color: red; }
}

/* Invalid — throws "`@source` paths must be quoted." */
@source ./src;

Δείτε την ενότητα CLI για μεταγλωττίσεις βάσει αρχείων και την ενότητα Εισαγωγές για την επίλυση των @import και των εικονικών μονάδων.