postcss import

Postcss-Import

PostCSS-Plugin zur Transformation @import Regeln durch Inlining von Inhalten.

Dieses Plugin kann lokale Dateien, Knotenmodule oder Webmodule nutzen. Um den Pfad einer @import -Regel aufzulösen, kann sie in das Stammverzeichnis (standardmäßig process.cwd() ), web_modules , node_modules oder lokale Module schauen. Beim Importieren eines Moduls wird in den style oder main nach index.css oder einer Datei gesucht, auf die in package.json verwiesen wird. Sie können auch manuell mehrere Pfade angeben, die angezeigt werden sollen.

Hinweise:

• Dieses Plugin sollte wahrscheinlich als erstes Plugin Ihrer Liste verwendet werden. Auf diese Weise funktionieren andere Plugins auf dem AST so, als ob nur eine einzige Datei zu verarbeiten wäre, und werden wahrscheinlich wie erwartet funktionieren .

• Wenn Sie postcss-url nach postcss-import in Ihrer Plugin-Kette ausführen, können Sie Assets url() anpassen (oder sie sogar einbinden), nachdem Sie importierte Dateien eingebunden haben.

• Um die Ausgabe zu optimieren, importiert dieses Plugin eine Datei nur einmal in einem bestimmten Bereich (Root, Medienabfrage...). Tests werden anhand des Pfads und des Inhalts importierter Dateien durchgeführt (unter Verwendung einer Hash-Tabelle). Wenn dieses Verhalten nicht Ihren Wünschen entspricht, sehen Sie sich die Option skipDuplicates an

• Wenn Sie nach Glob Imports suchen, können Sie postcss-import-ext-glob verwenden, um postcss-import zu erweitern.

• Wenn Sie Remote-Quellen importieren möchten, können Sie postcss-import-url mit seiner dataUrls -Plugin-Option verwenden, um postcss-import zu erweitern.

• Importe, die nicht geändert wurden (durch options.filter oder weil es sich um Remote-Importe handelt), werden an den Anfang der Ausgabe verschoben.

• Dieses Plugin versucht, der CSS- @import -Spezifikation zu folgen ; @import -Anweisungen müssen vor allen anderen Anweisungen stehen (außer @charset ).

Installation

 $ npm install -D postcss-import

Verwendung

Sofern sich Ihr Stylesheet nicht an derselben Stelle befindet, an der Sie postcss ( process.cwd() ) ausführen, müssen Sie die Option from verwenden, damit relative Importe funktionieren.

 // Abhängigkeitenconst fs = require("fs")const postcss = require("postcss")const atImport = require("postcss-import")// zu verarbeitendes CSSconst css = fs.readFileSync("css/input.css" , „utf8“)// csspostcss() verarbeiten
  .use(atImport())
  .process(css, {// `from`-Option wird hier benötigt: „css/input.css“
  })
  .then((Ergebnis) => {const-Ausgabe = result.cssconsole.log(Ausgabe)
  })

css/input.css :

 /* Remote-URLs bleiben erhalten */@import "https://example.com/styles.css";/* können „node_modules“, „web_modules“ oder lokale Module nutzen */@import „cssrecipes-defaults“; /* == @import "../node_modules/cssrecipes-defaults/index.css"; */@import "normalize.css"; /* == @import "../node_modules/normalize.css/normalize.css"; */@import "foo.css"; /* relativ zu CSS/ gemäß der obigen Option „from“ *//* alle Standardnotationen des „url“-Wertes werden unterstützt */@import url(foo-1.css);@import url("foo-2. css");@import "bar.css" (min-width: 25em);@import 'baz.css' layer(baz-layer);body { background: black;
}

wird dir geben:

 @import "https://example.com/styles.css";/* ... Inhalt von ../node_modules/cssrecipes-defaults/index.css *//* ... Inhalt von ../node_modules/normalize .css/normalize.css *//* ... Inhalt von css/foo.css *//* ... Inhalt von css/foo-1.css *//* ... Inhalt von css/foo-2.css */@media (min-width: 25em) {/* ... Inhalt von css/bar.css */} @layer baz-layer {/* ... Inhalt von css/baz.css */}body { Hintergrund: schwarz;
}

Weitere Beispiele finden Sie in den Tests.

Optionen

filter

Typ: Function
Standard: () => true

Transformieren Sie nur Importe, für die die Testfunktion true zurückgibt. Importe, bei denen die Testfunktion false zurückgibt, bleiben unverändert. Die Funktion erhält den zu importierenden Pfad als Argument und sollte einen booleschen Wert zurückgeben.

root

Typ: String
Standard: process.cwd() oder Verzeichnisname des Postcss from

Definieren Sie den Stamm, in dem der Pfad aufgelöst werden soll (z. B. der Ort, an dem sich node_modules befinden). Sollte nicht so oft verwendet werden.
Hinweis: Verschachteltes @import profitiert zusätzlich vom relativen Verzeichnisnamen der importierten Dateien.

path

Typ: String|Array
Standard: []

Eine Zeichenfolge oder ein Array von Pfaden, in denen nach Dateien gesucht werden soll.

plugins

Typ: Array
Standard: undefined

Eine Reihe von Plugins, die auf jede importierte Datei angewendet werden.

resolve

Typ: Function
Standard: null

Mit dieser Option können Sie einen benutzerdefinierten Pfadauflöser bereitstellen. Diese Funktion ruft (id, basedir, importOptions, astNode) Argumente ab und sollte einen Pfad, ein Array von Pfaden oder ein Versprechen zurückgeben, das in den/die Pfad(e) auflöst. Wenn Sie keinen absoluten Pfad zurückgeben, wird Ihr Pfad mit dem Standard-Resolver in einen absoluten Pfad aufgelöst. Sie können hierfür „resolve“ verwenden.

load

Typ: Function
Standard: null

Sie können die Standardlademethode überschreiben, indem Sie diese Option festlegen. Diese Funktion ruft Argumente (filename, importOptions) ab und gibt Inhalte oder versprochene Inhalte zurück.

skipDuplicates

Typ: Boolean
Standard: true

Standardmäßig werden ähnliche Dateien (basierend auf demselben Inhalt) übersprungen. Es dient dazu, die Ausgabe zu optimieren und ähnliche Dateien wie beispielsweise normalize.css zu überspringen. Wenn dieses Verhalten nicht Ihren Wünschen entspricht, setzen Sie diese Option einfach auf false um es zu deaktivieren.

addModulesDirectories

Typ: Array
Standard: []

Ein Array von Ordnernamen, die dem Resolver von Node hinzugefügt werden sollen. Werte werden an die Standardauflösungsverzeichnisse angehängt: ["node_modules", "web_modules"] .

Diese Option dient nur zum Hinzufügen zusätzlicher Verzeichnisse zum Standard-Resolver. Wenn Sie Ihren eigenen Resolver über die resolve oben bereitstellen, wird dieser Wert ignoriert.

warnOnEmpty

Typ: Boolean
Standard: true

Standardmäßig warnt postcss-import , wenn eine leere Datei importiert wird.
Setzen Sie diese Option auf false um diese Warnung zu deaktivieren.

Beispiel mit einigen Optionen

 const postcss = require("postcss")const atImport = require("postcss-import")postcss()
  .use(atImport({path: ["src/css"],
  }))
  .process(cssString)
  .then((result) => {const { css } = result
  })

dependency Nachrichtenunterstützung

postcss-import fügt für jeden @import eine Nachricht zu result.messages hinzu. Nachrichten haben das folgende Format:

{
  type: 'dependency',
  file: absoluteFilePath,
  parent: fileContainingTheImport
}

Dies ist hauptsächlich für die Verwendung durch PostCSS-Läufer gedacht, die die Dateiüberwachung implementieren.

---

BEITRAGEN

• ⇄ Pull-Anfragen und ★ Stars sind immer willkommen.

• Bei Fehlern und Funktionswünschen erstellen Sie bitte ein Problem.

• Pull-Anfragen müssen mit dem Bestehen automatisierter Tests ( $ npm test ) einhergehen.

Änderungsprotokoll

Lizenz