Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

CSS - Add useFontWeightAsNumbers flag #7

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+21 −5
Open

CSS - Add useFontWeightAsNumbers flag #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion exporters/css/config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
[{
[
{
"key": "showGeneratedFileDisclaimer",
"type": "boolean",
"default": true,
Expand Down Expand Up @@ -40,6 +41,13 @@
"title": "Use References",
"description": "When enabled, values will use references to other tokens where applicable"
},
{
"key": "useFontWeightAsNumbers",
"type": "boolean",
"default": false,
"title": "Use Font Weight As Numbers",
"description": "When enabled, font weight values will be resolved as numbers if possible"
},
{
"key": "tokenNameStyle",
"type": "enum",
Expand Down
2 changes: 2 additions & 0 deletions exporters/css/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,8 @@ export type ExporterConfiguration = {
showDescriptions: boolean
/** When enabled, values will use references to other tokens where applicable */
useReferences: boolean
/** When enabled, font weight values will be resolved as numbers if possible */
useFontWeightAsNumbers: boolean
/** Style of exported token names */
tokenNameStyle: StringCase
/** Format of the exported colors */
Expand Down
2 changes: 1 addition & 1 deletion exporters/css/dist/build.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion exporters/css/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@supernovaio/exporter-css",
"version": "2.0.1",
"version": "2.0.2",
"description": "Export your design system tokens into CSS variables and definitions using Supernova.io export engine",
"main": "index.js",
"scripts": {
Expand Down
10 changes: 8 additions & 2 deletions exporters/css/src/content/token.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,26 @@
import { NamingHelper, CSSHelper } from "@supernovaio/export-helpers"
import { Token, TokenGroup } from "@supernovaio/sdk-exporters"
import { Token, TokenGroup, TokenType } from "@supernovaio/sdk-exporters"
import { exportConfiguration } from ".."

export function convertedToken(token: Token, mappedTokens: Map<string, Token>, tokenGroups: Array<TokenGroup>): string {
// First creating the name of the token, using helper function which turns any token name / path into a valid variable name
const name = tokenVariableName(token, tokenGroups)

// Then creating the value of the token, using another helper function
const value = CSSHelper.tokenToCSS(token, mappedTokens, {
let value: string | number = CSSHelper.tokenToCSS(token, mappedTokens, {
allowReferences: exportConfiguration.useReferences,
decimals: exportConfiguration.colorPrecision,
colorFormat: exportConfiguration.colorFormat,
tokenToVariableRef: (t) => {
return `var(--${tokenVariableName(t, tokenGroups)})`
},
})

if (exportConfiguration.useFontWeightAsNumbers && token.tokenType === TokenType.fontWeight) {
let candidate = +(value?.replaceAll('"', ''))
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

As we discussed, it should never return the value wrapped in quotes for font-weight, that's invalid CSS then. So the current behavior of this flag (when turned off) will lead to incorrect values

  • when i see useFontWeightAsNumbers flag, my expectations are that string values (such as bold, semibold, normal, etc) will be returned as 700, 600, 500 instead of the word. But it's not what this does

Here is a mapping table from OpenType specs:
CleanShot 2024-08-25 at 11 52 48@2x

value = Number.isNaN(candidate) ? value : candidate
}

const indentString = " ".repeat(exportConfiguration.indent)

if (exportConfiguration.showDescriptions && token.description) {
Expand Down