Failing at yarn workspace @open-condo/ui build

[petergetbueno]

When I am running yarn workspace @open-condo/ui build, I end up getting erros, because variables.css and variables.less files are not created.

It is starting up seemingly fine:

$ yarn workspace @open-condo/ui build
✓ Set global is processed

web
No properties for variables.less. File not created.
No properties for variables.css. File not created.
Extracting global colors...
Generating types from schema...
Linting generated types file...

All done!
Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest
Why you should do it regularly: https://github.com/browserslist/update-db#readme
Browserslist: caniuse-lite is outdated. Please run:
npx update-browserslist-db@latest
Why you should do it regularly: https://github.com/browserslist/update-db#readme
(node:22708) [DEP0180] DeprecationWarning: fs.Stats constructor is deprecated.
(Use node --trace-deprecation ... to show where the warning was created)

Then it throws errors because of the missing files:

ERROR in ./src/components/ActionBar/style.less (./src/components/ActionBar/style.less.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/components/ActionBar/style.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):

@import "antd/lib/affix/style/index.less";
@import (reference) "@open-condo/ui/src/tokens/variables.less";
^
Less resolver error:
'@open-condo/ui/src/tokens/variables.less' wasn't found. Tried - C:\Users...\condo\packages\ui\src\components\ActionBar@open-condo\ui\src\tokens\variables.less,npm://@open-condo\ui\src\tokens\variables.less,@open-condo\ui\src\tokens\variables.less

Webpack resolver error details:
resolve '@open-condo/ui/src/tokens/variables.less' in 'C:\Users...\condo\packages\ui\src\components\ActionBar'
Parsed request is a module
using description file: C:\Users...\condo\packages\ui\package.json (relative path: ./src/components/ActionBar)
using description file: C:\Users...\condo\packages\ui\package.json (relative path: ./src/components/ActionBar/@open-condo/ui/src/tokens/variables.less)
no extension
C:\Users...\condo\packages\ui\src\components\ActionBar@open-condo\ui\src\tokens\variables.less doesn't exist
.less
C:\Users...\condo\packages\ui\src\components\ActionBar@open-condo\ui\src\tokens\variables.less.less doesn't exist
.css
C:\Users...\condo\packages\ui\src\components\ActionBar@open-condo\ui\src\tokens\variables.less.css doesn't exist
as directory
C:\Users...\condo\packages\ui\src\components\ActionBar@open-condo\ui\src\tokens\variables.less doesn't exist
resolve as module
self reference
existing directory C:\Users...\condo\packages\ui
using description file: C:\Users...\condo\packages\ui\package.json (relative path: .)
using exports field: ./src/tokens/variables.less
using description file: C:\Users...\condo\packages\ui\package.json (relative path: ./src/tokens/variables.less)
no extension
C:\Users...\condo\packages\ui\src\tokens\variables.less doesn't exist
.less
C:\Users...\condo\packages\ui\src\tokens\variables.less.less doesn't exist
.css
C:\Users...\condo\packages\ui\src\tokens\variables.less.css doesn't exist
as directory
C:\Users...\condo\packages\ui\src\tokens\variables.less doesn't exist
C:\Users...\condo\packages\ui\src\components\ActionBar\node_modules doesn't exist or is not a directory
C:\Users...\condo\packages\ui\src\components\node_modules doesn't exist or is not a directory
C:\Users...\condo\packages\ui\src\node_modules doesn't exist or is not a directory
looking for modules in C:\Users...\condo\packages\ui\node_modules
C:\Users...\condo\packages\ui\node_modules@open-condo\ui doesn't exist
C:\Users...\condo\packages\node_modules doesn't exist or is not a directory
looking for modules in C:\Users...\condo\node_modules
existing directory C:\Users...\condo\node_modules@open-condo\ui
using description file: C:\Users...\condo\node_modules@open-condo\ui\package.json (relative path: .)
using exports field: ./src/tokens/variables.less
using description file: C:\Users...\condo\node_modules@open-condo\ui\package.json (relative path: ./src/tokens/variables.less)
no extension
C:\Users...\condo\node_modules@open-condo\ui\src\tokens\variables.less doesn't exist
.less
C:\Users...\condo\node_modules@open-condo\ui\src\tokens\variables.less.less doesn't exist
.css
C:\Users...\condo\node_modules@open-condo\ui\src\tokens\variables.less.css doesn't exist
as directory
C:\Users...\condo\node_modules@open-condo\ui\src\tokens\variables.less doesn't exist
C:\Users...\node_modules doesn't exist or is not a directory
C:\Users...\Source\node_modules doesn't exist or is not a directory
C:\Users...\node_modules doesn't exist or is not a directory
C:\Users\node_modules doesn't exist or is not a directory
C:\node_modules doesn't exist or is not a directory

Webpack resolver error missing:
undefined

  Error in C:\Users\...\condo\packages\ui\src\components\ActionBar\style.less (line 2, column 0)

@ ./src/components/ActionBar/style.less
@ ./src/components/ActionBar/index.ts 2:0-22
@ ./src/index.ts 2:0-51 2:0-51

ERROR in ./src/components/Alert/style.less (./src/components/Alert/style.less.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./src/components/Alert/style.less)
Module build failed (from ./node_modules/less-loader/dist/cjs.js):

@import "antd/lib/alert/style/index.less";
@import (reference) "@open-condo/ui/src/tokens/variables.less";
^
Less resolver error:
'@open-condo/ui/src/tokens/variables.less' wasn't found. Tried - C:\Users...\condo\packages\ui\src\components\Alert@open-condo\ui\src\tokens\variables.less,npm://@open-condo\ui\src\tokens\variables.less,@open-condo\ui\src\tokens\variables.less

Now the tokens.json file is there and has content, I guess that should be used somehow to generate the variables.css and variables.less files, but how?

[SavelevMatthew]

Hi, thanks for the feedback. The problem seems to be in these lines:

web
No properties for variables.less. File not created.
No properties for variables.css. File not created.

I assume this is Windows-related issue (probably some paths are handled incorrect during build), normal logs should looks like this at this point:

I'll try to dig into the problem a bit later, or pass it on to one of my less heavily loaded colleagues. If you happen to be able to figure it out sooner, feel free to open a PR with changes

[petergetbueno]

In packages/ui/bin/buildStyleVars/runner.js, this happened:

const SOURCE_PATH = path.join(TOKENS_DIR, 'sets/*.json')
...
const config = {
    source: [SOURCE_PATH],
    platforms: {},
}

I am not sure what os / environment handles that 'sets/*.json' automatically, but style-dictionary does not for sure.

I wrote a small logic to look up json files in the dictionary and pass that list of files to config.source.

Now the build generates the variables files. One more line cracked in the readme..

I cannot create a branch & PR tough, not sure how to get access to the repo.