@aleph-alpha/config-css 0.21.0 → 0.21.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/README.md +1 -1
  3. package/dist/index.js +297 -287
  4. package/package.json +3 -3
  5. package/src/presetWebFontsAlephAlpha.ts +44 -13
  6. package/src/utils/convert-fonts.js +1 -1
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@aleph-alpha/config-css",
3
3
  "license": "Apache-2.0",
4
- "version": "0.21.0",
4
+ "version": "0.21.2",
5
5
  "main": "dist/index.js",
6
6
  "typings": "dist/index.d.ts",
7
7
  "prettier": "@aleph-alpha/prettier-config-frontend",
@@ -24,8 +24,8 @@
24
24
  "devDependencies": {
25
25
  "style-dictionary": "^4.0.1",
26
26
  "vite-plugin-dts": "^4.0.0",
27
- "@aleph-alpha/prettier-config-frontend": "0.4.0",
28
- "@aleph-alpha/eslint-config-frontend": "0.5.0"
27
+ "@aleph-alpha/eslint-config-frontend": "0.5.0",
28
+ "@aleph-alpha/prettier-config-frontend": "0.4.0"
29
29
  },
30
30
  "scripts": {
31
31
  "transform:global": "npx token-transformer ./tokens.json ./transformed-tokens/global.json global,\"Spark Border Radius/Mode 1\",\"Spark Spacings/Mode 1\",\"Spark Text/Mode 1\" \"Spark Colors/Light mode/primitives\" --throwErrorWhenNotResolved",
package/src/presetWebFontsAlephAlpha.ts CHANGED
@@ -12,6 +12,23 @@ import { inter500 } from './assets/fonts/inter500.woff2';
12
12
  import { inter600 } from './assets/fonts/inter600.woff2';
13
13
  import { inter700 } from './assets/fonts/inter700.woff2';
14
14
 
15
+ const normalizeEmbeddedFontDataUri = (fontDataUri: string, mimeType = 'font/woff2') => {
16
+ const normalizedUri = fontDataUri.trim();
17
+ const legacyPrefixes = [
18
+ 'data:@file/octet-stream;base64,',
19
+ 'data:@file/binary;base64,',
20
+ 'data:%40file/octet-stream;base64,',
21
+ 'data:%40file/binary;base64,',
22
+ ];
23
+
24
+ const matchedPrefix = legacyPrefixes.find((prefix) => normalizedUri.startsWith(prefix));
25
+ if (matchedPrefix) {
26
+ return `data:${mimeType};base64,${normalizedUri.slice(matchedPrefix.length)}`;
27
+ }
28
+
29
+ return normalizedUri;
30
+ };
31
+
15
32
  export const presetWebFontsAlephAlpha = (): Preset => ({
16
33
  name: '@aleph-alpha/ds-fonts',
17
34
  theme: {
@@ -25,28 +42,42 @@ export const presetWebFontsAlephAlpha = (): Preset => ({
25
42
  preflights: [
26
43
  {
27
44
  getCSS() {
45
+ const raleway500Src = normalizeEmbeddedFontDataUri(raleway500);
46
+ const raleway600Src = normalizeEmbeddedFontDataUri(raleway600);
47
+ const raleway700Src = normalizeEmbeddedFontDataUri(raleway700);
48
+ const roboto500Src = normalizeEmbeddedFontDataUri(roboto500);
49
+ const roboto700Src = normalizeEmbeddedFontDataUri(roboto700);
50
+ const montserrat500Src = normalizeEmbeddedFontDataUri(montserrat500);
51
+ const montserrat600Src = normalizeEmbeddedFontDataUri(montserrat600);
52
+ const montserrat700Src = normalizeEmbeddedFontDataUri(montserrat700);
53
+ const inter400Src = normalizeEmbeddedFontDataUri(inter400);
54
+ const inter500Src = normalizeEmbeddedFontDataUri(inter500);
55
+ const inter600Src = normalizeEmbeddedFontDataUri(inter600);
56
+ const inter700Src = normalizeEmbeddedFontDataUri(inter700);
57
+
28
58
  return `
59
+
29
60
  /* Raleway fonts (legacy support) */
30
61
  @font-face {
31
62
  font-display: swap;
32
63
  font-family: 'Raleway';
33
64
  font-style: normal;
34
65
  font-weight: 500;
35
- src: url('${raleway500}') format('woff2');
66
+ src: url('${raleway500Src}') format('woff2');
36
67
  }
37
68
  @font-face {
38
69
  font-display: swap;
39
70
  font-family: 'Raleway';
40
71
  font-style: normal;
41
72
  font-weight: 600;
42
- src: url('${raleway600}') format('woff2');
73
+ src: url('${raleway600Src}') format('woff2');
43
74
  }
44
75
  @font-face {
45
76
  font-display: swap;
46
77
  font-family: 'Raleway';
47
78
  font-style: normal;
48
79
  font-weight: 700;
49
- src: url('${raleway700}') format('woff2');
80
+ src: url('${raleway700Src}') format('woff2');
50
81
  }
51
82
 
52
83
  /* Roboto fonts (legacy support) */
@@ -55,21 +86,21 @@ export const presetWebFontsAlephAlpha = (): Preset => ({
55
86
  font-family: 'Roboto';
56
87
  font-style: normal;
57
88
  font-weight: 500;
58
- src: url('${roboto500}') format('woff');
89
+ src: url('${roboto500Src}') format('woff2');
59
90
  }
60
91
  @font-face {
61
92
  font-display: swap;
62
93
  font-family: 'Roboto';
63
94
  font-style: normal;
64
95
  font-weight: 600;
65
- src: url('${roboto500}') format('woff');
96
+ src: url('${roboto500Src}') format('woff2');
66
97
  }
67
98
  @font-face {
68
99
  font-display: swap;
69
100
  font-family: 'Roboto';
70
101
  font-style: normal;
71
102
  font-weight: 700;
72
- src: url('${roboto700}') format('woff');
103
+ src: url('${roboto700Src}') format('woff2');
73
104
  }
74
105
 
75
106
  /* Montserrat fonts (new design system) */
@@ -78,21 +109,21 @@ export const presetWebFontsAlephAlpha = (): Preset => ({
78
109
  font-family: 'Montserrat';
79
110
  font-style: normal;
80
111
  font-weight: 500;
81
- src: url('${montserrat500}') format('woff2');
112
+ src: url('${montserrat500Src}') format('woff2');
82
113
  }
83
114
  @font-face {
84
115
  font-display: swap;
85
116
  font-family: 'Montserrat';
86
117
  font-style: normal;
87
118
  font-weight: 600;
88
- src: url('${montserrat600}') format('woff2');
119
+ src: url('${montserrat600Src}') format('woff2');
89
120
  }
90
121
  @font-face {
91
122
  font-display: swap;
92
123
  font-family: 'Montserrat';
93
124
  font-style: normal;
94
125
  font-weight: 700;
95
- src: url('${montserrat700}') format('woff2');
126
+ src: url('${montserrat700Src}') format('woff2');
96
127
  }
97
128
 
98
129
  /* Inter fonts (new design system) */
@@ -101,28 +132,28 @@ export const presetWebFontsAlephAlpha = (): Preset => ({
101
132
  font-family: 'Inter';
102
133
  font-style: normal;
103
134
  font-weight: 400;
104
- src: url('${inter400}') format('woff2');
135
+ src: url('${inter400Src}') format('woff2');
105
136
  }
106
137
  @font-face {
107
138
  font-display: swap;
108
139
  font-family: 'Inter';
109
140
  font-style: normal;
110
141
  font-weight: 500;
111
- src: url('${inter500}') format('woff2');
142
+ src: url('${inter500Src}') format('woff2');
112
143
  }
113
144
  @font-face {
114
145
  font-display: swap;
115
146
  font-family: 'Inter';
116
147
  font-style: normal;
117
148
  font-weight: 600;
118
- src: url('${inter600}') format('woff2');
149
+ src: url('${inter600Src}') format('woff2');
119
150
  }
120
151
  @font-face {
121
152
  font-display: swap;
122
153
  font-family: 'Inter';
123
154
  font-style: normal;
124
155
  font-weight: 700;
125
- src: url('${inter700}') format('woff2');
156
+ src: url('${inter700Src}') format('woff2');
126
157
  }
127
158
  `;
128
159
  },
package/src/utils/convert-fonts.js CHANGED
@@ -16,7 +16,7 @@ function convertWoff2ToTs(inputFile, outputFile) {
16
16
 
17
17
  // Create the TypeScript content
18
18
  const tsContent = `export const ${fontName} =
19
- 'data:@file/octet-stream;base64,${base64}';`;
19
+ 'data:font/woff2;base64,${base64}';`;
20
20
 
21
21
  // Write the TypeScript file
22
22
  fs.writeFileSync(outputFile, tsContent);