{"id":16327995,"url":"https://github.com/alexandremasy/postcss-salt-typography","last_synced_at":"2026-05-18T10:02:54.481Z","repository":{"id":71639268,"uuid":"92650837","full_name":"alexandremasy/postcss-salt-typography","owner":"alexandremasy","description":"PostCSS plugin to add a collection of mixins, helpers related to font management for you CSS.","archived":false,"fork":false,"pushed_at":"2017-06-15T05:00:12.000Z","size":49,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-05-15T03:42:47.307Z","etag":null,"topics":["postcss","postcss-plugins","salt","salt-plugins"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/alexandremasy.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-05-28T09:08:09.000Z","updated_at":"2019-08-28T16:52:33.000Z","dependencies_parsed_at":"2023-02-22T00:45:15.702Z","dependency_job_id":null,"html_url":"https://github.com/alexandremasy/postcss-salt-typography","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alexandremasy/postcss-salt-typography","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandremasy%2Fpostcss-salt-typography","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandremasy%2Fpostcss-salt-typography/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandremasy%2Fpostcss-salt-typography/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandremasy%2Fpostcss-salt-typography/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexandremasy","download_url":"https://codeload.github.com/alexandremasy/postcss-salt-typography/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexandremasy%2Fpostcss-salt-typography/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33174091,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-18T09:27:30.708Z","status":"ssl_error","status_checked_at":"2026-05-18T09:27:28.300Z","response_time":71,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["postcss","postcss-plugins","salt","salt-plugins"],"created_at":"2024-10-10T23:13:21.441Z","updated_at":"2026-05-18T10:02:54.422Z","avatar_url":"https://github.com/alexandremasy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [WIP] Salt - Typography\n\n\u003e PostCSS plugin to add a collection of utilities related to font management for you CSS. This plugin is part of [Salt](https://github.com/alexandremasy/salt), a collection of tool to help you enforce a set of rule througout your application.\n\n\n\n## Functionalities\n\n1. **[Typography definition](#configuration)** Provide a way to declare the definition and relation of all the typographies used in an application.\n   ​\n2. **[Importer](https://github.com/alexandremasy/postcss-salt-typography-importer)** Import all the font available in the font definition. It handle properly diverse font provider `local`, `hosted`,  `Google`.\n   ​\n3. **[Parser](https://github.com/alexandremasy/postcss-salt-typography-parser)** Walk through you css declarations to find the dynamic font values and enforce a predefined one;\n   ​\n4. **[Default](https://github.com/alexandremasy/postcss-salt-typography-default)** Declare default typographics values for the body, html based on the typography definition. \n\n\n\n## Getting started\n\nInstallation is as easy as:\n\n```shell\nnpm install --save postcss-salt-typography\n```\n\n\n\n**PostCSS**\n\nInclude the plugin in you build process:\n\n```\n@TODO\n```\n\n\n\n**Gulp**\n\nInclude the plugin in your build process:\n\n```javascript\n@TODO\n```\n\n\n\nThis plugins depends on :\n\n- [PostCSS](https://github.com/postcss/postcss)\n- [Salt - Typography - Helper](https://github.com/alexandremasy/postcss-salt-typography-helper)\n- [Salt - Typography - Parser](https://github.com/alexandremasy/postcss-salt-typography-parser)\n- [Salt - Typography - Font-Face](https://github.com/alexandremasy/postcss-salt-typography-font-face)\n- [Salt - Layout - Breakpoint](https://github.com/alexandremasy/postcss-salt-layout-breakpoint)\n\n\n\n\n\n## Configuration\n\n### Syntax\n\nThe font definition setting is used by *[@font-face](https://github.com/alexandremasy/postcss-salt-typography-font-face)*, *[font-family](https://github.com/alexandremasy/postcss-salt-typography-parser#font-family)*, *[font-size](https://github.com/alexandremasy/postcss-salt-typography-parser#font-size)*, *[font-style](https://github.com/alexandremasy/postcss-salt-typography-parser#font-style)*, *[line-height](https://github.com/alexandremasy/postcss-salt-typography-parser#line-height)* properties. Here is the formal syntax:\n\n```css\n@*font{\n  [ name:         \t\u003cstring\u003e; ] ||\n  [ family:       \t\u003cstring\u003e; ] ||\n  [ fallback:\t  \t\u003cstring\u003e; ] ||\n  [ format:\t\t  \t[ eot || woff || svg || ttf ]# ||\n  [ typefaces:\t\t[ [ \u003cweight\u003e \u003cstyle\u003e? \u003cprovider\u003e ]# ; ] ||\n  [ sizes:        \t[ [ \u003cscale\u003e [ \u003clength\u003e | \u003clength\u003e \u003clength\u003e ] ]#; ]# ||\n  [ line-height:  \t[ [ \u003cscale\u003e [ \u003clength\u003e | \u003clength\u003e \u003clength\u003e ] ]#; ]# \n};\n\nwhere\n\t\u003cstyle\u003e = [ normal | italic | oblique ]\n\t\u003cprovider\u003e = [ local(\u003cstring\u003e) | \u003curl\u003e | google ]+ default? ]\n```\n\n\n\n| Property                   | Type   | Description                              |\n| -------------------------- | ------ | ---------------------------------------- |\n| `name` **required**        | String | The name of the font set. This is the key to use in your css file to reference a font collection. |\n| `family` **required**      | String | The font-family name.                    |\n| `fallback` *optional*      | String | The fallback for the given font          |\n| `format` *optional*        | List   | The font format to consider while importing. Used by the `hosted` font files. If no value provided, all the format will be imported. |\n| `typefaces` **required**   | List   | A map containing all the weight and associated information on how to load the font. More information in the [typefaces definition](#typefaces-definition) section. |\n| `sizes` **required**       | List   | A map containing the size definition for each scale. More information in the [size definition](#sizes-definition) section |\n| `line-height` **required** | List   | A map containing the line-height definition for each scale. More information in the [line-height definition](#line-height-definition) section. |\n\n\n\n### Typefaces definition\n\nThe typefaces section contains the exhaustive definition of the fonts available in your project. It is a `Array` where each entry describe a particular variant of the same typeface. Here is the allowed keyword to define an entry:  \n\n|           | Description                              |\n| --------- | ---------------------------------------- |\n| `weight`  | The [weight](#weight) of the declared font. Please find the [allowed values bellow](#weight). |\n| `style`   | The [style](#style) of the declared font. Please find the [allowed values bellow](#style). |\n| `default` | Set the given font as the default font. The font will be declared on the body as the font-family. |\n| `local`   | Allow you to declare a local font file. The function allow one parameter, the `font-name`, the name of the font on the local system. |\n| `url`     | Declare a file to load via http/https.   |\n| `google`  | Will load the font from Google Fonts     |\n\n\n\n#### Weight\n\nHere is the list of allowed weight. Use the values listed bellow as a key in the `typefaces` definition. \n\n| Value         | Description                           |\n| ------------- | ------------------------------------- |\n| `thin`        | Set the font-weight value to be `100` |\n| `ultra-light` | Set the font-weight value to be `200` |\n| `light`       | Set the font-weight value to be `300` |\n| `normal`      | Set the font-weight value to be `400` |\n| `medium`      | Set the font-weight value to be `500` |\n| `semi-bold`   | Set the font-weight value to be `600` |\n| `bold`        | Set the font-weight value to be `700` |\n| `extra-bold`  | Set the font-weight value to be `800` |\n| `black`       | Set the font-weight value to be `900` |\n\n\n\n#### Style\n\nHere is the list of the allowed font-style. \n\n| Value     | Description                 |\n| --------- | --------------------------- |\n| `normal`  | Label the font as *normal*. |\n| `italic`  | Label the font as *italic*  |\n| `oblique` | Label the font as *oblique* |\n\n\n\n------\n\n\n\n#### Sizes definition\n\n|          | Description                              |\n| -------- | ---------------------------------------- |\n| `scale`  | The scale for which the size is declared |\n| `length` | The font-size value for the given scale. If two css [length value](https://developer.mozilla.org/en-US/docs/Web/CSS/length) are provided then the first one is used as the minimum breakpoint's boundery (\u003c=xxs) while the second one is used as the maximum breakpoint's boundery (\u003exxl). Everything in between is proportional. |\n\n\n\n------\n\n\n\n#### Line-Height definition\n\n|          | Description                              |\n| -------- | ---------------------------------------- |\n| `scale`  | The scale for which the line-height is declared |\n| `length` | The line-height value for the given scale. If two css [length value](https://developer.mozilla.org/en-US/docs/Web/CSS/length) are provided then the first one is used as the minimum breakpoint's boundery (\u003c=xxs) while the second one is used as the maximum breakpoint's boundery (\u003exxl). Everything in between is proportional. |\n\n\n\n## Example\n\nThis sample:\n\n```css\nhtml{\n  *font-family: heading;\n  *font-size: xs;\n}\n```\n\nWith this configuration:\n\n```javascript\nvar helvetica = {\n  name: \"heading\",\n  family:  \"Helvetica Neue\",\n  typefaces: [\n    \"normal default\",\n    \"bold\"\n  ],\n  sizes:{\n    xxs:    [\".512rem\",  \".579rem\"],\n    xs:     [\".64rem\",   \".694rem\"],\n    s:      [\".8rem\",    \".833rem\"],\n    m:      [\"1rem\",     \"1rem\"],\n    l:      [\"1.25rem\",  \"1.2rem\"],\n    xl:     [\"1.563rem\", \"1.44rem\"],\n    xxl:    [\"1.953rem\", \"1.728rem\"]\n  },\n  lineHeight: {\n    xxs:    [\"1.2rem\",   \"1.2rem\"],\n    xs:     [\"1.2rem\",   \"1.2rem\"],\n    s:      [\"1.2rem\",   \"1.2rem\"],\n    m:      [\"1.3rem\",   \"1.2rem\"],\n    l:      [\"1.35rem\",  \"1.3rem\"],\n    xl:     [\"1.4rem\",   \"1.4rem\"],\n    xxl:    [\"1.45rem\",  \"1.4rem\"]\n  }\n};\n```\n\n\n\n**will yield**:\n\n```css\nhtml{\n  font-family: Helvetica Neue;\n  font-size: .64rem;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandremasy%2Fpostcss-salt-typography","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexandremasy%2Fpostcss-salt-typography","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexandremasy%2Fpostcss-salt-typography/lists"}