postcss import
14.0.0
Plugin PostCSS pour transformer les règles
@importen insérant du contenu.
Ce plugin peut consommer des fichiers locaux, des modules de nœuds ou des web_modules. Pour résoudre le chemin d'une règle @import , il peut consulter le répertoire racine (par défaut process.cwd() ), web_modules , node_modules ou les modules locaux. Lors de l'importation d'un module, il recherchera index.css ou le fichier référencé dans package.json dans les champs style ou main . Vous pouvez également fournir manuellement plusieurs chemins à consulter.
Remarques :
Ce plugin devrait probablement être utilisé comme premier plugin de votre liste. De cette façon, les autres plugins fonctionneront sur l'AST comme s'il n'y avait qu'un seul fichier à traiter, et fonctionneront probablement comme vous pouvez vous y attendre .
L'exécution de postcss-url après postcss-import dans votre chaîne de plugins vous permettra d'ajuster les actifs url() (ou même de les intégrer) après avoir intégré les fichiers importés.
Afin d'optimiser le rendu, ce plugin n'importera un fichier qu'une seule fois sur un scope donné (racine, media query...). Les tests sont effectués à partir du chemin et du contenu des fichiers importés (à l'aide d'une table de hachage). Si ce comportement n'est pas ce que vous souhaitez, regardez l'option skipDuplicates
Si vous recherchez Glob Imports , vous pouvez utiliser postcss-import-ext-glob pour étendre postcss-import.
Si vous souhaitez importer des sources distantes, vous pouvez utiliser postcss-import-url avec son option de plugin dataUrls pour étendre postcss-import.
Les importations qui ne sont pas modifiées (par options.filter ou parce qu'il s'agit d'importations distantes) sont déplacées en haut de la sortie.
Ce plugin tente de suivre la spécification CSS @import ; Les instructions @import doivent précéder toutes les autres instructions (en plus de @charset ).
$ npm install -D postcss-import
À moins que votre feuille de style ne se trouve au même endroit où vous exécutez postcss ( process.cwd() ), vous devrez utiliser l'option from pour faire fonctionner les importations relatives.
// dépendancesconst fs = require("fs")const postcss = require("postcss")const atImport = require("postcss-import")// css à traiterconst css = fs.readFileSync("css/input.css" , "utf8")// processus csspostcss()
.use(atImport())
.process(css, {// l'option `from` est nécessaire ici : "css/input.css"
})
.then((result) => {const output = result.cssconsole.log(output)
}) css/input.css :
/* les URL distantes sont préservées */@import "https://example.com/styles.css";/* peuvent consommer `node_modules`, `web_modules` ou des modules locaux */@import "cssrecipes-defaults"; /* == @import "../node_modules/cssrecipes-defaults/index.css"; */@import "normalize.css" ; /* == @import "../node_modules/normalize.css/normalize.css"; */@import "foo.css"; /* par rapport à css/ selon l'option `from` ci-dessus *//* toutes les notations standard de la valeur "url" sont prises en charge */@import url(foo-1.css);@import url("foo-2. css");@import "bar.css" (largeur minimale : 25em);@import 'baz.css' layer(baz-layer);body { background: black;
}vous donnera :
@import "https://example.com/styles.css";/* ... contenu de ../node_modules/cssrecipes-defaults/index.css *//* ... contenu de ../node_modules/normalize .css/normalize.css *//* ... contenu de css/foo.css *//* ... contenu de css/foo-1.css *//* ... contenu de css/foo-2.css */@media (largeur min : 25em) {/* ... contenu de css/bar.css */} @layer baz-layer {/* ... contenu de css/baz.css */}body { background : black;
}Consultez les tests pour plus d’exemples.
filter Type : Function
Par défaut : () => true
Transformez uniquement les importations pour lesquelles la fonction de test renvoie true . Les importations pour lesquelles la fonction de test renvoie false seront laissées telles quelles. La fonction obtient le chemin à importer en tant qu'argument et doit renvoyer un booléen.
root Type : String
Par défaut : process.cwd() ou nom du répertoire du postcss from
Définissez la racine où résoudre le chemin (par exemple : l'endroit où se trouvent node_modules ). Ne devrait pas être autant utilisé.
Remarque : @import imbriqué bénéficiera en outre du nom de répertoire relatif des fichiers importés.
path Type : String|Array
Défaut: []
Une chaîne ou un tableau de chemins où rechercher les fichiers.
plugins Type : Array
Par défaut : undefined
Un tableau de plugins à appliquer sur chaque fichier importé.
resolve Type : Function
Par défaut : null
Vous pouvez fournir un résolveur de chemin personnalisé avec cette option. Cette fonction obtient les arguments (id, basedir, importOptions, astNode) et doit renvoyer un chemin, un tableau de chemins ou une promesse résolvant le(s) chemin(s). Si vous ne renvoyez pas de chemin absolu, votre chemin sera résolu en chemin absolu à l'aide du résolveur par défaut. Vous pouvez utiliser la résolution pour cela.
load Type : Function
Par défaut : nul
Vous pouvez remplacer le mode de chargement par défaut en définissant cette option. Cette fonction récupère les arguments (filename, importOptions) et renvoie le contenu ou le contenu promis.
skipDuplicates Type : Boolean
Par défaut : true
Par défaut, les fichiers similaires (basés sur le même contenu) sont ignorés. Il s'agit d'optimiser la sortie et d'ignorer les fichiers similaires comme normalize.css par exemple. Si ce comportement ne vous convient pas, définissez simplement cette option sur false pour la désactiver.
addModulesDirectories Type : Array
Défaut: []
Un tableau de noms de dossiers à ajouter au résolveur de Node. Les valeurs seront ajoutées aux répertoires de résolution par défaut : ["node_modules", "web_modules"] .
Cette option sert uniquement à ajouter des répertoires supplémentaires au résolveur par défaut. Si vous fournissez votre propre résolveur via l'option de configuration resolve ci-dessus, cette valeur sera ignorée.
warnOnEmpty Type : Boolean
Par défaut : true
Par défaut, postcss-import avertit lorsqu'un fichier vide est importé.
Définissez cette option sur false pour désactiver cet avertissement.
const postcss = require("postcss")const atImport = require("postcss-import")postcss()
.use(atImport({chemin : ["src/css"],
}))
.processus(cssString)
.then((résultat) => {const { css } = résultat
})dependency postcss-import ajoute un message à result.messages pour chaque @import . Les messages sont au format suivant :
{
type: 'dependency',
file: absoluteFilePath,
parent: fileContainingTheImport
}Ceci est principalement destiné aux exécuteurs postcss qui implémentent la surveillance des fichiers.
⇄ Pull request et ★ Les étoiles sont toujours les bienvenues.
Pour les bogues et les demandes de fonctionnalités, veuillez créer un problème.
Les demandes de tirage doivent être accompagnées de tests automatisés réussis ( $ npm test ).
