Error building tokens in Windows

pinguet62 commented 4 months ago

I am opening an issue for

Design Tokens

Package version

all?

Description

On Windows build of tokens doesn't work.

GitHub repository

No response

Mock-up(s)

No response

What happened?

On Windows:

css
No properties for root.scss. File not created.
Create a file that assign CSS variables to SCSS variables
✔︎ node_modules\@mozaic-ds\tokens\build\css/_variables.scss

scss
No properties for _tokens.scss. File not created.

android
No properties for font_dimens.xml. File not created.
No properties for colors.xml. File not created.

js
No properties for tokensObject.js. File not created.
No properties for tokens.js. File not created.

ios-swift
No properties for StyleDictionaryColor.swift. File not created.
No properties for StyleDictionarySize.swift. File not created.

ios
No properties for StyleDictionaryColor.h. File not created.
No properties for StyleDictionaryColor.m. File not created.
No properties for StyleDictionarySize.h. File not created.
No properties for StyleDictionarySize.m. File not created.
node:fs:581
  return binding.open(
                 ^

Error: ENOENT: no such file or directory, open 'C:\Users\10131571\Documents\pastop\src\assets\tokens\js\tokens.js'
    at Object.openSync (node:fs:581:18)
    at Object.readFileSync (node:fs:457:35)
    at Object.<anonymous> (C:\Users\10131571\Documents\pastop\mozaic.postinstall.cjs:12:33)
    at Module._compile (node:internal/modules/cjs/loader:1376:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1435:10)
    at Module.load (node:internal/modules/cjs/loader:1207:32)
    at Module._load (node:internal/modules/cjs/loader:1023:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:135:12)
    at node:internal/main/run_main_module:28:49 {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\Users\\10131571\\Documents\\pastop\\src\\assets\\tokens\\js\\tokens.js'
}

Node.js v21.4.0
npm ERR! code 1
npm ERR! path C:\Users\10131571\Documents\pastop
npm ERR! command failed
npm ERR! command C:\windows\system32\cmd.exe /d /s /c node mozaic.postinstall.cjs

npm ERR! A complete log of this run can be found in: C:\Users\10131571\AppData\Local\npm-cache\_logs\2024-03-04T20_01_29_068Z-debug-0.log

What is expected?

On Linux:

css
✔︎ node_modules/@mozaic-ds/tokens/build/css/root.scss
Create a file that assign CSS variables to SCSS variables
✔︎ node_modules/@mozaic-ds/tokens/build/css/_variables.scss

scss
✔︎ node_modules/@mozaic-ds/tokens/build/scss/_tokens.scss

android
✔︎ node_modules/@mozaic-ds/tokens/build/android/font_dimens.xml
✔︎ node_modules/@mozaic-ds/tokens/build/android/colors.xml

js
✔︎ node_modules/@mozaic-ds/tokens/build/js/tokensObject.js
✔︎ node_modules/@mozaic-ds/tokens/build/js/tokens.js

ios-swift
✔︎ node_modules/@mozaic-ds/tokens/build/ios/StyleDictionaryColor.swift
✔︎ node_modules/@mozaic-ds/tokens/build/ios/StyleDictionarySize.swift

ios
✔︎ node_modules/@mozaic-ds/tokens/build/ios/StyleDictionaryColor.h
✔︎ node_modules/@mozaic-ds/tokens/build/ios/StyleDictionaryColor.m
✔︎ node_modules/@mozaic-ds/tokens/build/ios/StyleDictionarySize.h
✔︎ node_modules/@mozaic-ds/tokens/build/ios/StyleDictionarySize.m

To Reproduce

Very easy!!!

npm create vue@latest pastop
cd pastop
npm install @mozaic-ds/vue-3
npx mozaic-tokens-build

Code example

No response

Is this a regression?

[ ] Yes
[ ] No
[ ] I don't know

Additional comments

Since style-dictionary@3.9.1: it upgrade of glob from 7.2.0 to 10.3.10 style-dictionary issue: https://github.com/amzn/style-dictionary/issues/1066

ℹ️ Will be fixed in style-dictionary@4.0.0. style-dictionary fix: https://github.com/amzn/style-dictionary/pull/1070 But yet in beta version.

So the solution is to freeze version in packages/tokens/package.json to 3.9.0.

tiloyi commented 4 months ago

Hi @pinguet62 , Thank you for your issue.

This problem has already been identified. There have been some discussions on support about it, for example:

As you've seen, the problem doesn't come from our library directly but from the glob library, which is itself a dependency of style-dictionary.

The solution you propose has already been tried and does not correct the problem.

The real solution would be to fix this problem on the style-dictionary side first.

We're aware of current developments on the style-dictionary side, and we'll update our package once version 4 of style-dictionary is stable, which isn't the case at the moment, as version 4 is still under development.

In the meantime (as you'll see from the links in the discussions above), we suggest that users who encounter (There are not many of them at ADEO at the moment.) this problem:

Either Install an inferior version of style-dictionary or glob directly in their project.
Or, for Mozaic-Vue users, which seems to be your case, consume the tokens that are directly present in the package in @mozaic-ds/vue-3/src/tokens.

Available if needed :v:

pinguet62 commented 4 months ago

The real solution would be to fix this problem on the style-dictionary side first.

"réelle solution" ... pas vraiment !

Oui la root cause du bug est style-dictionary qui n'a pas testé et respecté le SemVer.

ℹ️ Une bibliothèque et ses bibliothèques dont elle dépend représente un arbre de dépendances transitives. Si 1 seule dépendance racine est boguée, il serait absurde que toute la ramification descendante soit boguée. Dire "on ne corrige pas parce qu'on attend que la sous-sous-dépendance soit corrigée" : alors il n'y aurait quasiment aucune bibliothèque qui fonctionnerait, car il y a énormément de dépendances transitives et régulièrement des bugs. 👉 C'est pour cela que chaque bibliothèque doit définir précisément ses dépendance pour qu'elle fonctionne, notamment avec bonne version et la bonne "précision" (^ ou ~ ou fixe).

De plus, en admettons que corriger style-dictionary soit "la réelle solution". Ici le correctif style-dictionary@4.x.x ne résoudrait pas le problème. En effet, @mozaic-ds/tokens déclare style-dictionary@^3.9.1 donc la version 4.x.x ne sera pas appliquée. 👉 D'où le fait que c'est au niveau de @mozaic-ds/tokens de définir la bonne version de sa dépendance : 1 fix en figeant style-dictionary@3.9.0, et dans un 2nd temps un upgrade de version vers le correctif style-dictionary@^4.0.0.

Either Install an inferior version of style-dictionary or glob directly in their project.

J'ai tenté ceci :

"dependencies": {
    "style-dictionary": "3.9.0"
}

sans succès, car la dépendance @mozaic-ds/tokens > style-dictionary utilise toujours la version 3.9.2.

The solution you propose has already been tried and does not correct the problem.

Je trouve ça étrange, car en définissant ceci :

"overrides": {
  "@mozaic-ds/tokens": {
    "style-dictionary": "3.9.0"
  }
}

et ici cela surcharge la dépendance transitive @mozaic-ds/tokens > style-dictionary avec succès 👍

❓ Comment avez-vous testé ?

J'ai git clone adeo/mozaic-design-system pour tenter un correctif, mais je ne maitrise/connait pas Lerna/Yarn. ❓ Connaitrais tu la commande pour mettre à jour la dépendance style-dictionary dans packages/tokens/package.json ? (ex : yarn upgrade ...)

tiloyi commented 4 months ago

Hi @pinguet62 , I don't know if you read my message correctly, but I explained that we were already proposing alternative solutions to users who encounter this problem (and who are in the minority to date), while the problem is corrected on the style-dictionary side and we update our package.

As for the rest of your comment, I'd rather not get into an endless debate.

pinguet62 commented 3 months ago

@tiloyi #1563 😉

adeo / mozaic-design-system