# to-scss-mixin-text-style

## Interface

```typescript
interface parser {
  name: 'to-scss-mixin-text-style';
  output: {
    type: 'file';
    filePath: string;
  };
  options?: {
    tokenNameTemplate?: string;
    exclude?: Array<
      | 'fontFamily'
      | 'fontWeight'
      | 'fontSize'
      | 'color'
      | 'fontFeatures'
      | 'lineHeight'
      | 'letterSpacing'
      | 'paragraphSpacing'
      | 'textAlignHorizontal'
      | 'textAlignVertical'
      | 'textDecoration'
      | 'textIndent'
      | 'textTransform'
    >;
    include?: Array<
      | 'fontFamily'
      | 'fontWeight'
      | 'fontSize'
      | 'color'
      | 'fontFeatures'
      | 'lineHeight'
      | 'letterSpacing'
      | 'paragraphSpacing'
      | 'textAlignHorizontal'
      | 'textAlignVertical'
      | 'textDecoration'
      | 'textIndent'
      | 'textTransform'
    >;
    genericFamily?: string;
  };
}
```

## Options

<table data-full-width="true"><thead><tr><th width="229">Parameter</th><th width="110">Required</th><th width="170">Type</th><th width="302">Default</th><th width="288">Description</th></tr></thead><tbody><tr><td><code>tokenNameTemplate</code></td><td><code>false</code></td><td><code>string</code></td><td><code>{{path}}-{{token}}-{{mode}}</code></td><td>The template the parser follows to name your tokens.<br><br>You can use the <code>path</code> of your tokens, their <code>token</code> name, and their respective <code>mode</code>.</td></tr><tr><td><code>exclude</code></td><td><code>false</code></td><td><code>Array&#x3C;string></code></td><td></td><td>List of properties to exclude in the SCSS mixins</td></tr><tr><td><code>include</code></td><td><code>false</code></td><td><code>Array&#x3C;string></code></td><td></td><td>List of properties to include in the SCSS mixins</td></tr><tr><td><code>genericFamily</code></td><td><code>false</code></td><td><code>string</code></td><td></td><td>The generic font family will be applied after the main font family</td></tr></tbody></table>

## Basic usage

{% tabs %}
{% tab title="Input" %}
{% code lineNumbers="true" %}

```json
{
  "Text styles": {
    "Body": {
      "$type": "textStyle",
      "$value": {
        "default": {
          "font": {
            "family": "Neue Haas Grotesk Text Pro",
            "postScriptName": "Neue Haas Grotesk Text Pro",
            "weight": "roman",
            "style": "normal",
            "files": []
          },
          "fontSize": {
            "value": 14,
            "unit": "px"
          },
          "color": null,
          "fontFeatures": null,
          "lineHeight": {
            "value": 21,
            "unit": "px"
          },
          "letterSpacing": {
            "value": 0.2,
            "unit": "px"
          },
          "paragraphSpacing": {
            "value": 0,
            "unit": "px"
          },
          "textAlignHorizontal": null,
          "textAlignVertical": null,
          "textDecoration": "none",
          "textIndent": {
            "value": 0,
            "unit": "px"
          },
          "textTransform": "none"
        }
      },
      "$extensions": {
        "com.specifyapp.figmaStyles.hangingList": false,
        "com.specifyapp.figmaStyles.leadingTrim": "NONE",
        "com.specifyapp.figmaStyles.listSpacing": 0,
        "com.specifyapp.figmaStyles.hangingPunctuation": false
      }
    },
    "Body-lg": {
      "$type": "textStyle",
      "$value": {
        "default": {
          "font": {
            "family": "Neue Haas Grotesk Text Pro",
            "postScriptName": "Neue Haas Grotesk Text Pro",
            "weight": "roman",
            "style": "normal",
            "files": []
          },
          "fontSize": {
            "value": 16,
            "unit": "px"
          },
          "color": null,
          "fontFeatures": null,
          "lineHeight": {
            "value": 150,
            "unit": "%"
          },
          "letterSpacing": {
            "value": 0.4,
            "unit": "px"
          },
          "paragraphSpacing": {
            "value": 0,
            "unit": "px"
          },
          "textAlignHorizontal": null,
          "textAlignVertical": null,
          "textDecoration": "none",
          "textIndent": {
            "value": 0,
            "unit": "px"
          },
          "textTransform": "none"
        }
      },
      "$extensions": {
        "com.specifyapp.figmaStyles.hangingList": false,
        "com.specifyapp.figmaStyles.leadingTrim": "NONE",
        "com.specifyapp.figmaStyles.listSpacing": 0,
        "com.specifyapp.figmaStyles.hangingPunctuation": false
      }
    },
    "Body-sm": {
      "$type": "textStyle",
      "$value": {
        "default": {
          "font": {
            "family": "Neue Haas Grotesk Text Pro",
            "postScriptName": "Neue Haas Grotesk Text Pro",
            "weight": "roman",
            "style": "normal",
            "files": []
          },
          "fontSize": {
            "value": 12,
            "unit": "px"
          },
          "color": null,
          "fontFeatures": null,
          "lineHeight": {
            "value": 150,
            "unit": "%"
          },
          "letterSpacing": {
            "value": 0.2,
            "unit": "px"
          },
          "paragraphSpacing": {
            "value": 0,
            "unit": "px"
          },
          "textAlignHorizontal": null,
          "textAlignVertical": null,
          "textDecoration": "none",
          "textIndent": {
            "value": 0,
            "unit": "px"
          },
          "textTransform": "none"
        }
      },
      "$extensions": {
        "com.specifyapp.figmaStyles.hangingList": false,
        "com.specifyapp.figmaStyles.leadingTrim": "NONE",
        "com.specifyapp.figmaStyles.listSpacing": 0,
        "com.specifyapp.figmaStyles.hangingPunctuation": false
      }
    }
  }
}
```

{% endcode %}
{% endtab %}

{% tab title="Config" %}
{% code title=".specifyrc.json" lineNumbers="true" %}

```json
{
  "version": "2",
  "repository": "@organization/repository",
  // Only use the personalAccessToken when working with the CLI
  "personalAccessToken": "<your-personal-access-token>",
  "rules": [
    {
      "name": "to-scss-mixin-text-style",
      "output": {
        "type": "file",
        "filePath": "public/text-styles.scss"
      },
      "options": {
        "genericFamily": "sans-serif"
      }
    }
  ]
}
```

{% endcode %}
{% endtab %}

{% tab title="Output" %}
{% code title="public/text-styles.scss" lineNumbers="true" %}

```scss
@mixin Text-styles-Body {
	font-family: Neue Haas Grotesk Text Pro, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.2px;
	font-weight: roman;
}
@mixin Text-styles-Body-lg {
	font-family: Neue Haas Grotesk Text Pro, sans-serif;
	font-size: 16px;
	line-height: 1.5;
	letter-spacing: 0.4px;
	font-weight: roman;
}
@mixin Text-styles-Body-sm {
	font-family: Neue Haas Grotesk Text Pro, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: 0.2px;
	font-weight: roman;
}
```

{% endcode %}
{% endtab %}
{% endtabs %}