@aleph-alpha/config-css 0.21.2 → 1.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@aleph-alpha/config-css",
   "license": "Apache-2.0",
-  "version": "0.21.2",
+  "version": "1.0.0",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",
   "prettier": "@aleph-alpha/prettier-config-frontend",
@@ -25,7 +25,7 @@
     "style-dictionary": "^4.0.1",
     "vite-plugin-dts": "^4.0.0",
     "@aleph-alpha/eslint-config-frontend": "0.5.0",
-    "@aleph-alpha/prettier-config-frontend": "0.4.0"
+    "@aleph-alpha/prettier-config-frontend": "2.0.0"
   },
   "scripts": {
     "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/sd.config.js

@@ -38,7 +38,10 @@ StyleDictionary.registerTransform({
     return token.type === 'typography';
   },
   transform: function (token) {
-    return token.name.split('-').splice(1, token.name.split('-').length).join('-');
+    return token.name
+      .split('-')
+      .splice(1, token.name.split('-').length)
+      .join('-');
   },
 });
 
@@ -85,7 +88,9 @@ StyleDictionary.registerTransform({
 
     const css = {};
     keys.forEach((key) => {
-      const newKey = key.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
+      const newKey = key
+        .replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2')
+        .toLowerCase();
 
       if (allowedKeys.includes(newKey)) {
         css[newKey] = value[key];
@@ -110,7 +115,8 @@ StyleDictionary.registerTransform({
     if (!value) return;
 
     if (value['font-family']) {
-      value['font-family'] = `var(--custom-font-family, ${value['font-family']})`;
+      value['font-family'] =
+        `var(--custom-font-family, ${value['font-family']})`;
     }
 
     return value;

package/src/index.ts

@@ -2,11 +2,11 @@ import { definePreset, Preset, presetTypography, presetWind } from 'unocss';
 import { presetAnimations } from 'unocss-preset-animations';
 import presetTheme from 'unocss-preset-theme';
 import presetLegacyCompat from '@unocss/preset-legacy-compat';
-import boxShadowsSet from '../sd-output/box-shadows.json';
-import darkModeSet from '../sd-output/dark-mode.json';
-import lightModeSet from '../sd-output/light-mode.json';
-import spacingsSet from '../sd-output/spacings.json';
-import typographySet from '../sd-output/typography.json';
+import boxShadowsSet from '#sd-output/box-shadows.json';
+import darkModeSet from '#sd-output/dark-mode.json';
+import lightModeSet from '#sd-output/light-mode.json';
+import spacingsSet from '#sd-output/spacings.json';
+import typographySet from '#sd-output/typography.json';
 import { presetWebFontsAlephAlpha } from './presetWebFontsAlephAlpha';
 
 type Theme = {
@@ -106,7 +106,10 @@ const tokenPreset: Preset<Theme> = definePreset<Theme>(() => {
         },
       },
     ],
-    rules: [...Object.entries(typographySet), ['h-screen', { height: '100vh' }]],
+    rules: [
+      ...Object.entries(typographySet),
+      ['h-screen', { height: '100vh' }],
+    ],
     theme: {
       colors: lightModeSet,
       spacing: spacingsSet,

package/src/presetWebFontsAlephAlpha.ts

@@ -12,7 +12,10 @@ import { inter500 } from './assets/fonts/inter500.woff2';
 import { inter600 } from './assets/fonts/inter600.woff2';
 import { inter700 } from './assets/fonts/inter700.woff2';
 
-const normalizeEmbeddedFontDataUri = (fontDataUri: string, mimeType = 'font/woff2') => {
+const normalizeEmbeddedFontDataUri = (
+  fontDataUri: string,
+  mimeType = 'font/woff2',
+) => {
   const normalizedUri = fontDataUri.trim();
   const legacyPrefixes = [
     'data:@file/octet-stream;base64,',
@@ -21,7 +24,9 @@ const normalizeEmbeddedFontDataUri = (fontDataUri: string, mimeType = 'font/woff
     'data:%40file/binary;base64,',
   ];
 
-  const matchedPrefix = legacyPrefixes.find((prefix) => normalizedUri.startsWith(prefix));
+  const matchedPrefix = legacyPrefixes.find((prefix) =>
+    normalizedUri.startsWith(prefix),
+  );
   if (matchedPrefix) {
     return `data:${mimeType};base64,${normalizedUri.slice(matchedPrefix.length)}`;
   }

package/src/utils/convert-fonts.js

@@ -32,7 +32,9 @@ const args = process.argv.slice(2);
 
 if (args.length < 2) {
   console.log('Usage: node convert-fonts.js <input.woff2> <output.ts>');
-  console.log('Example: node convert-fonts.js montserrat600.woff2 montserrat600.woff2.ts');
+  console.log(
+    'Example: node convert-fonts.js montserrat600.woff2 montserrat600.woff2.ts',
+  );
   process.exit(1);
 }
 

package/tsconfig.json

@@ -7,7 +7,10 @@
     "lib": ["ES2021.String"],
     "moduleResolution": "node",
     "resolveJsonModule": true,
-    "skipLibCheck": true
+    "skipLibCheck": true,
+    "paths": {
+      "#sd-output/*": ["sd-output/*"]
+    }
   },
   "exclude": ["node_modules"],
   "include": ["src/**/*.ts"]

package/vite.config.ts

@@ -1,7 +1,16 @@
+import { resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
 import { defineConfig } from 'vite';
 import dts from 'vite-plugin-dts';
 
+const dirname = fileURLToPath(new URL('.', import.meta.url));
+
 export default defineConfig({
+  resolve: {
+    alias: {
+      '#sd-output': resolve(dirname, 'sd-output'),
+    },
+  },
   build: {
     lib: {
       entry: './src/index.ts',
@@ -12,5 +21,7 @@ export default defineConfig({
       external: ['unocss', 'unocss-preset-theme', 'unocss/preset-uno'],
     },
   },
-  plugins: [dts({ rollupTypes: true })],
+  // Use tsconfig `paths` for token JSON (not `../sd-output/`) so `rollupTypes` + API
+  // Extractor do not fail (see vite-plugin-dts FAQ: baseUrl + non-standard imports).
+  plugins: [dts({ rollupTypes: true, tsconfigPath: './tsconfig.json' })],
 });