postcss import

importação postcss

Plug-in PostCSS para transformar regras @import incorporando conteúdo.

Este plugin pode consumir arquivos locais, módulos de nó ou web_modules. Para resolver o caminho de uma regra @import , ele pode procurar no diretório raiz (por padrão process.cwd() ), web_modules , node_modules ou módulos locais. Ao importar um módulo, ele procurará index.css ou arquivo referenciado em package.json nos campos style ou main . Você também pode fornecer manualmente vários caminhos para onde olhar.

Notas:

• Este plugin provavelmente deve ser usado como o primeiro plugin da sua lista. Dessa forma, outros plugins funcionarão no AST como se houvesse apenas um único arquivo para processar, e provavelmente funcionarão como você espera .

• Executar postcss-url após postcss-import em sua cadeia de plug-ins permitirá que você ajuste os ativos url() (ou até mesmo incorpore-os) após incorporar os arquivos importados.

• Para otimizar a saída, este plugin importará um arquivo apenas uma vez em um determinado escopo (raiz, consulta de mídia...). Os testes são feitos a partir do caminho e do conteúdo dos arquivos importados (usando uma tabela hash). Se esse comportamento não for o que você deseja, consulte a opção skipDuplicates

• Se você estiver procurando Glob Imports , poderá usar postcss-import-ext-glob para estender o postcss-import.

• Se quiser importar fontes remotas, você pode usar postcss-import-url com sua opção de plug-in dataUrls para estender o postcss-import.

• As importações que não são modificadas (por options.filter ou porque são importações remotas) são movidas para o topo da saída.

• Este plugin tenta seguir a especificação CSS @import ; As instruções @import devem preceder todas as outras instruções (além de @charset ).

Instalação

 $ npm instalar -D postcss-importar

Uso

A menos que sua folha de estilo esteja no mesmo local onde você executa o postcss ( process.cwd() ), você precisará usar a opção from para fazer as importações relativas funcionarem.

 // dependênciasconst fs = require("fs")const postcss = require("postcss")const atImport = require("postcss-import")// css a ser processadoconst css = fs.readFileSync("css/input.css" , "utf8")// processo csspostcss()
  .use(atImport())
  .process(css, {// a opção `from` é necessária aqui: "css/input.css"
  })
  .then((resultado) => {const saída = resultado.cssconsole.log(saída)
  })

css/input.css :

 /* urls remotos são preservados */@import "https://example.com/styles.css";/* podem consumir `node_modules`, `web_modules` ou módulos locais */@import "cssrecipes-defaults"; /* == @import "../node_modules/cssrecipes-defaults/index.css"; */@import "normalize.css"; /* == @import "../node_modules/normalize.css/normalize.css"; */@import "foo.css"; /* relativo ao css/ de acordo com a opção `from` acima *//* todas as notações padrão do valor "url" são suportadas */@import url(foo-1.css);@import url("foo-2. css");@import "bar.css" (largura mínima: 25em);@import 'baz.css' camada(baz-layer);corpo { fundo: preto;
}

lhe dará:

 @import "https://example.com/styles.css";/* ... conteúdo de ../node_modules/cssrecipes-defaults/index.css *//* ... conteúdo de ../node_modules/normalize .css/normalize.css *//* ... conteúdo de css/foo.css *//* ... conteúdo de css/foo-1.css *//* ... conteúdo de css/foo-2.css */@media (largura mínima: 25em) {/* ... conteúdo de css/bar.css */} @layer baz-layer {/* ... conteúdo de css/baz.css */}body { background: black;
}

Confira os testes para mais exemplos.

Opções

filter

Tipo: Function
Padrão: () => true

Transforme apenas as importações para as quais a função de teste retorna true . As importações para as quais a função de teste retorna false serão deixadas como estão. A função obtém o caminho para importar como argumento e deve retornar um booleano.

root

Tipo: String
Padrão: process.cwd() ou dirname do postcss from

Defina a raiz onde resolver o caminho (ex: local onde estão node_modules ). Não deveria ser muito usado.
Nota: @import aninhado também se beneficiará do nome de diretório relativo dos arquivos importados.

path

Tipo: String|Array
Padrão: []

Uma string ou uma matriz de caminhos onde procurar arquivos.

plugins

Tipo: Array
Padrão: undefined

Uma variedade de plug-ins a serem aplicados em cada arquivo importado.

resolve

Tipo: Function
Padrão: null

Você pode fornecer um resolvedor de caminho personalizado com esta opção. Esta função obtém argumentos (id, basedir, importOptions, astNode) e deve retornar um caminho, uma matriz de caminhos ou uma promessa resolvendo o(s) caminho(s). Se você não retornar um caminho absoluto, seu caminho será resolvido para um caminho absoluto usando o resolvedor padrão. Você pode usar resolver para isso.

load

Tipo: Function
Padrão: nulo

Você pode substituir o modo de carregamento padrão definindo esta opção. Esta função obtém argumentos (filename, importOptions) e retorna conteúdo ou conteúdo prometido.

skipDuplicates

Tipo: Boolean
Padrão: true

Por padrão, arquivos semelhantes (baseados no mesmo conteúdo) estão sendo ignorados. É para otimizar a saída e pular arquivos semelhantes como normalize.css por exemplo. Se este comportamento não for o que você deseja, basta definir esta opção como false para desativá-lo.

addModulesDirectories

Tipo: Array
Padrão: []

Uma matriz de nomes de pastas para adicionar ao resolvedor do Node. Os valores serão anexados aos diretórios de resolução padrão: ["node_modules", "web_modules"] .

Esta opção serve apenas para adicionar diretórios adicionais ao resolvedor padrão. Se você fornecer seu próprio resolvedor por meio da opção de configuração de resolve acima, esse valor será ignorado.

warnOnEmpty

Tipo: Boolean
Padrão: true

Por padrão, postcss-import avisa quando um arquivo vazio é importado.
Defina esta opção como false para desativar este aviso.

Exemplo com algumas opções

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

suporte de mensagem dependency

postcss-import adiciona uma mensagem a result.messages para cada @import . As mensagens estão no seguinte formato:

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

Isto é principalmente para uso por executores postcss que implementam observação de arquivos.

---

CONTRIBUINDO

• ⇄ Solicitações pull e ★ Estrelas são sempre bem-vindas.

• Para bugs e solicitações de recursos, crie um problema.

• As solicitações pull devem ser acompanhadas de aprovação em testes automatizados ( $ npm test ).

Registro de alterações

Licença