postcss import

importación postcss

Complemento PostCSS para transformar reglas @import incorporando contenido.

Este complemento puede consumir archivos locales, módulos de nodo o módulos web. Para resolver la ruta de una regla @import , puede buscar en el directorio raíz (de forma predeterminada process.cwd() ), web_modules , node_modules o módulos locales. Al importar un módulo, buscará index.css o el archivo al que se hace referencia en package.json en el style o en los campos main . También puede proporcionar manualmente varias rutas donde mirar.

Notas:

• Este complemento probablemente debería usarse como el primer complemento de su lista. De esta manera, otros complementos funcionarán en el AST como si solo hubiera un archivo para procesar y probablemente funcionarán como es de esperar .

• Ejecutar postcss-url después de postcss-import en su cadena de complementos le permitirá ajustar url() (o incluso integrarlos) después de insertar los archivos importados.

• Para optimizar la salida, este complemento solo importará un archivo una vez en un ámbito determinado (raíz, consulta de medios...). Las pruebas se realizan a partir de la ruta y el contenido de los archivos importados (usando una tabla hash). Si este comportamiento no es lo que desea, consulte la opción skipDuplicates

• Si está buscando Glob Imports , puede usar postcss-import-ext-glob para extender postcss-import.

• Si desea importar fuentes remotas, puede usar postcss-import-url con su opción de complemento dataUrls para extender postcss-import.

• Las importaciones que no se modifican (por options.filter o porque son importaciones remotas) se mueven a la parte superior de la salida.

• Este complemento intenta seguir la especificación CSS @import ; Las declaraciones @import deben preceder a todas las demás declaraciones (además de @charset ).

Instalación

 $ npm instalar -D postcss-importar

Uso

A menos que su hoja de estilo esté en el mismo lugar donde ejecuta postcss ( process.cwd() ), necesitará usar la opción from para que las importaciones relativas funcionen.

 // dependenciasconst fs = require("fs")const postcss = require("postcss")const atImport = require("postcss-import")// css a procesarconst css = fs.readFileSync("css/input.css" , "utf8")// proceso csspostcss()
  .use(enImportar())
  .process(css, {// Se necesita la opción `from` aquí: "css/input.css"
  })
  .luego((resultado) => {salida constante = resultado.cssconsole.log(salida)
  })

css/input.css :

 /* las URL remotas se conservan */@import "https://example.com/styles.css";/* puede consumir `node_modules`, `web_modules` o módulos locales */@import "cssrecipes-defaults"; /* == @import "../node_modules/cssrecipes-defaults/index.css"; */@importar "normalizar.css"; /* == @import "../node_modules/normalize.css/normalize.css"; */@import "foo.css"; /* relativo a css/ según la opción `from` anterior *//* se admiten todas las notaciones estándar del valor "url" */@import url(foo-1.css);@import url("foo-2. css");@import "bar.css" (ancho mínimo: 25em);@import capa 'baz.css'(baz-layer);body { fondo: negro;
}

te dará:

 @import "https://example.com/styles.css";/* ... contenido de ../node_modules/cssrecipes-defaults/index.css *//* ... contenido de ../node_modules/normalize .css/normalize.css *//* ... contenido de css/foo.css *//* ... contenido de css/foo-1.css *//* ... contenido de css/foo-2.css */@media (ancho mínimo: 25em) {/* ... contenido de css/bar.css */} @layer baz-layer {/* ... contenido de css/baz.css */}body { fondo: negro;
}

Consulte las pruebas para ver más ejemplos.

Opciones

filter

Tipo: Function
Predeterminado: () => true

Transforme únicamente las importaciones para las cuales la función de prueba devuelve true . Las importaciones para las cuales la función de prueba devuelve false se dejarán como están. La función obtiene la ruta a importar como argumento y debe devolver un valor booleano.

root

Tipo: String
Predeterminado: process.cwd() o nombre de directorio del postcss from

Defina la raíz donde resolver la ruta (por ejemplo: lugar donde están node_modules ). No debería usarse tanto.
Nota: @import anidado se beneficiará adicionalmente del nombre de directorio relativo de los archivos importados.

path

Tipo: String|Array
Por defecto: []

Una cadena o una serie de rutas donde buscar archivos.

plugins

Tipo: Array
Predeterminado: undefined

Una variedad de complementos que se aplicarán en cada archivo importado.

resolve

Tipo: Function
Predeterminado: null

Puede proporcionar un solucionador de ruta personalizado con esta opción. Esta función obtiene argumentos (id, basedir, importOptions, astNode) y debe devolver una ruta, una matriz de rutas o una promesa que resuelva las rutas. Si no devuelve una ruta absoluta, su ruta se resolverá en una ruta absoluta utilizando el solucionador predeterminado. Puedes usar resolver para esto.

load

Tipo: Function
Predeterminado: nulo

Puede sobrescribir la forma de carga predeterminada configurando esta opción. Esta función obtiene argumentos (filename, importOptions) y devuelve contenido o contenido prometido.

skipDuplicates

Tipo: Boolean
Predeterminado: true

De forma predeterminada, se omiten archivos similares (basados ​​en el mismo contenido). Es para optimizar la salida y omitir archivos similares como normalize.css , por ejemplo. Si este comportamiento no es lo que desea, simplemente configure esta opción en false para desactivarlo.

addModulesDirectories

Tipo: Array
Por defecto: []

Una serie de nombres de carpetas para agregar al solucionador de Node. Los valores se agregarán a los directorios de resolución predeterminados: ["node_modules", "web_modules"] .

Esta opción es sólo para agregar directorios adicionales al solucionador predeterminado. Si proporciona su propio solucionador a través de la opción de configuración resolve anterior, este valor se ignorará.

warnOnEmpty

Tipo: Boolean
Predeterminado: true

De forma predeterminada, postcss-import advierte cuando se importa un archivo vacío.
Establezca esta opción en false para desactivar esta advertencia.

Ejemplo con algunas opciones

 const postcss = require("postcss")const atImport = require("postcss-import")postcss()
  .use(atImport({ruta: ["src/css"],
  }))
  .proceso(cssString)
  .entonces((resultado) => {const {css} = resultado
  })

Soporte de mensajes dependency

postcss-import agrega un mensaje a result.messages para cada @import . Los mensajes tienen el siguiente formato:

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

Esto es principalmente para uso de corredores postcss que implementan la observación de archivos.

---

CONTRIBUYENDO

• ⇄ Las solicitudes de extracción y ★ las estrellas siempre son bienvenidas.

• Para errores y solicitudes de funciones, cree un problema.

• Las solicitudes de extracción deben ir acompañadas de la aprobación de pruebas automatizadas ( $ npm test ).

Registro de cambios

Licencia