Download postcss font pack postcss font pack

postcss font pack

Baixar fonte

1.0.0

Baixar

POSTCSS-FONT-PACK

O plug-in do PostCSS para simplificar as declarações de fonte, validando apenas os pacotes de fontes configurados, adicionando fallbacks e valores de declaração de fonte legíveis por humanos e transpilizantes em CSS válidos.

Introdução

Lidar com fontes pode ser uma dor, especialmente em equipes, onde nem todos sabem onde encontrar as fontes exatas que podem usar. Como resultado, são cometidos erros, inconsistências são introduzidas e a manutenção se torna um pesadelo. O pacote de fontes PostCSS visa resolver esse problema com a configuração.

Configuração

Vamos começar com as seguintes suposições:

Estamos usando o "Times New Roman" porque é uma fonte com segurança comum. Ele também ilustra como usar fontes que precisam de cotações neste plug -in.
Instalamos o Roboto e já configuramos seu @font-face.

Essas fontes podem ser definidas no formato JSON. Você pode chamá-lo de font-packs.json :

{
	"times" : {
		"family" : [ " 'Times New Roman' " , " Times " , " serif " ],
		"propGroups" : [
			{},
			{
				"weight" : [ " bold " , 700 ]
			}
		]
	},
	"roboto" : {
		"family" : [ " Roboto " , " Arial " , " sans-serif " ],
		"propGroups" : [
			{
				"style" : " italic " ,
				"weight" : [ " light " , 300 ],
				"stretch" : " condensed " ,
				"variant" : " small-caps "
			}
		]
	}
}

Com a configuração acima, podemos escrever nossos CSs usando a propriedade abreviada da fonte:

. foo {
	font : bold 1 rem/1.2 times;
}

. bar {
	font : light condensed italic 1 rem/1.2 roboto;
}

Isso transpilaria para o seguinte:

. foo {
	font : 700 1 rem/1.2 'Times New Roman' , Times , serif;
}

. bar {
	font : 300 condensed italic 1 rem/1.2 Roboto , Arial , sans-serif;
}

Observe que o peso foi alterado de bold para 700 e da light para 300 . Isso veio dos aliases do valor da declaração da configuração, que foram definidos como "weight": ["bold", 700] e "weight": ["light", 300] , respectivamente. Você pode fazer isso com qualquer um dos grupos de suporte, mas, desde style: italic , stretch: condensed e variant: small-caps já são entendidas pelo navegador, só fazia sentido usar um alias para o peso neste caso. Você também poderia ter conectado o peso como "weight": 300 , mas isso não é tão legível por humanos quanto light , que o navegador não entende.

Além disso, observe que as fontes de fallback foram adicionadas à font-family . Isso permite que você mantenha sua sintaxe fácil de ler/escrever e deixe o plug -in fazer o trabalho sujo com a configuração.

Você não precisa usar a propriedade abreviada da fonte. Você também pode escrever cada declaração individualmente ou pode usar o plug-in postcss-nested-props para ativar uma sintaxe aninhada. Apenas certifique -se de desembrulhar o aninhado com esse plug -in antes de executar este.

LING

Este plug -in também lida com o linha para que você possa dormir, sabendo que ninguém está usando fontes ou combinações de declarações de fontes que não são suportadas ou vão contra o design do site. As regras a seguir lançariam o mesmo erro, "Pack não encontrado":

. foo {
	font-family : "Futura PT" ;
}

. bar {
	font-family : roboto , sans-serif;
}

. baz {
	font : light 1 rem/1.2 roboto;
}

Embora o peso light seja encontrado em sua configuração, não há pacote de fontes que use light sem também usar italic e condensed . Você tem que usar os três juntos para formar um pacote e passar o revestimento.

Como você pode ver, este plugin interromperá as declarações de fonte não suportadas mortas em suas trilhas.

Ignorando seções

Se você precisar ignorar uma declaração específica, mas não quiser ignorar toda a folha de estilo, você pode fazê -lo precedendo a declaração com um comentário especial:

. foo {
	/* postcss-font-pack: ignore-next */
	font : "Comic Sans" , cursive;
}

Isso fará com que o linhador ignore apenas o próximo seletor.

Você também pode ignorar as faixas:

 /* postcss-font-pack: start-ignore */
. foo {
	font : "Comic Sans" , cursive;
	font-size : 38 px ;
}
/* postcss-font-pack: end-ignore */

Instalação

 $ npm install postcss-font-pack

Uso

JavaScript

 postcss ( [
	require ( 'postcss-font-pack' ) ( {
		packs : require ( './font-packs.json' )
	} )
] ) ;

TypeScript

 import * as postcssFontPack from 'postcss-font-pack' ;

postcss ( [
	postcssFontPack ( {
		packs : require ( './font-packs.json' )
	} )
] ) ;

Opções

`ignoreDeclarations`

Tipo: { [prop: string]: string; } Requerido: false padrão: undefined

Uma coleção de declarações que você gostaria de ignorar. Estes podem ser hacks do CSS ou qualquer outra coisa que você realmente não deseja lançar erros de validação. Exemplo abaixo:

 {
	ignoreDeclarations : [
		{ font : '0/0 serif' }
	]
}

`requireSize`

Tipo: boolean necessário: false padrão: false

Quando true , um erro será lançado se você tiver uma regra com uma ou mais declarações de fonte, mas sem o tamanho da fonte.

. foo {
	font-family : roboto;
	/* missing required font-size */
}

Independentemente dessa opção, se você tiver uma regra com apenas um font-size especificado, receberá um erro:

. foo {
	font-size : 1 rem ;
	/* font-size missing required family */
}

`packs`

Tipo: Object necessário: true

Um objeto literal onde as teclas são fontes lisadas e os valores são pacotes de fontes. Cada pacote de fonte consiste em uma family necessária e em uma coleção opcional de grupos de propriedades, nomeados como propGroups .

`pack.family`

Tipo: string[] necessário: true

Se sua lesma de fonte for times , é aqui que você definiria o nome estendido da fonte junto com qualquer fallbacks.

NOTA: Se o seu nome de fonte exigir cotações, você mesmo deverá adicioná -las.

`pack.propGroups`

Tipo: PropGroup[] Necessário: false

Defina as combinações de propriedades que podem ser usadas juntas para fazer referência a uma fonte.

`pack.propGroups[n]`

Tipo: PropGroup

Cada grupo de suporte pode conter 0 ou mais das seguintes chaves:

weight
style
variant
stretch

Cada valor pode ser uma string ou uma string[] com dois valores. O primeiro valor é um valor lisado que você pode digitar no seu CSS para fazer referência à chave associada. O segundo valor é em que o primeiro valor será transpilado; portanto, verifique se eles são CSS-Valid. Os valores weight também podem ser números.

Se um objeto vazio for fornecido, isso indica que você deseja apoiar essa família de fontes com valores padrão do navegador para peso, estilo, variante e alongamento.

NOTA: Se você não incluir um objeto vazio, não poderá fazer referência a uma família sem também fazer referência a propriedades adicionais.