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

Console output from design tokens build is very verbose #8124

Open
3 tasks
jcfranco opened this issue Nov 4, 2023 · 2 comments
Open
3 tasks

Console output from design tokens build is very verbose #8124

jcfranco opened this issue Nov 4, 2023 · 2 comments
Labels
0 - new New issues that need assignment. estimate - 3 A day or two of work, likely requires updates to tests. p - low Issue is non core or affecting less that 10% of people using the library tooling Issues relating to build system fixes or improvements.
Milestone
2025-08-26 - Aug ...

Comments

@jcfranco
Copy link
Member

jcfranco commented Nov 4, 2023 •
edited by alisonailea
Loading

Summary

Possibly related, but the output also includes warning messages, such as:

  • ! dist/<format>/brand-light.<format>, does not exist
  • No properties for brand-dark.js. File not created.
  •   ⚠️ dist/js/calcite-dark.js
  While building calcite-dark.js, token collisions were found; output may be unexpected.
  • * This many-to-one issue is usually caused by some combination of:
  * conflicting or similar paths/names in property definitions
  * platform transforms/transformGroups affecting names, especially when removing specificity
  * overly inclusive file filters

Suggested Approach

  • Add logger to build script
  • Add a build script tag "--dev"
  • Capture all logs and filter out style dictionary warning logs unless in "--dev" mode.

Desired Outcome

Trimmed down console output showing high-level status/results.

Resources

Example build output.
@jcfranco jcfranco added tooling Issues relating to build system fixes or improvements. 0 - new New issues that need assignment. needs triage Planning workflow - pending design/dev review. labels Nov 4, 2023
@jcfranco
Copy link
Member Author

The build output is now reduced after changes introduced by #8215 (v2), but still shows the following warnings:

⚠️ /Users/juan6600/dev/projects/calcite-design-system/packages/calcite-design-tokens/dist/scss/global.scss
While building global.scss, filtered out token references were found; output may be unexpected. Here are the references that are used but not defined in the file
    core.size.default.none
    core.size.default.1
    core.size.relative.half
    core.size.relative.full
    core.size.default.5
    core.size.default.7
    core.size.default.9
    core.size.default.0
    core.box-shadow.0
    core.box-shadow.1
    core.box-shadow.2
    core.color.neutral.blk-240
    core.opacity.4
    core.opacity.0
    core.box-shadow.3
    core.box-shadow.4
    core.opacity.8
    core.color.high-saturation.blue.h-bb-060
    core.color.vibrant.blue.v-bb-160
    core.color.high-saturation.blue.h-bb-070
    core.color.high-saturation.blue.h-bb-080
    core.opacity.40
    core.color.dark.blue.d-bb-420
    core.color.neutral.blk-005
    core.color.neutral.blk-190
    core.color.neutral.blk-000
    core.opacity.85
    core.opacity.80
    core.color.neutral.blk-200
    core.color.neutral.blk-010
    core.color.neutral.blk-210
    core.color.neutral.blk-020
    core.color.neutral.blk-220
    core.color.high-saturation.blue.h-bb-010
    core.color.neutral.blk-170
    core.color.neutral.blk-060
    core.color.neutral.blk-140
    core.color.neutral.blk-090
    core.color.neutral.blk-050
    core.color.neutral.blk-160
    core.color.neutral.blk-040
    core.color.neutral.blk-030
    core.color.neutral.blk-180
    core.color.neutral.blk-100
    core.color.neutral.blk-130
    core.color.vibrant.blue.v-bb-140
    core.color.high-saturation.blue.h-bb-090
    core.color.high-saturation.green.h-gg-060
    core.color.dark.green.d-gg-420
    core.color.high-saturation.green.h-gg-070
    core.color.vibrant.green.v-gg-140
    core.color.high-saturation.green.h-gg-080
    core.color.vibrant.green.v-gg-160
    core.color.high-saturation.yellow.h-yy-060
    core.color.dark.yellow.d-yy-420
    core.color.high-saturation.yellow.h-yy-070
    core.color.vibrant.yellow.v-yy-140
    core.color.high-saturation.yellow.h-yy-080
    core.color.vibrant.yellow.v-yy-160
    core.color.high-saturation.red.h-rr-060
    core.color.dark.red.d-rr-420
    core.color.high-saturation.red.h-rr-080
    core.color.vibrant.red.v-rr-160
    core.color.high-saturation.red.h-rr-070
    core.color.vibrant.red.v-rr-140
    core.container-size.154
    core.container-size.328
    core.container-size.504
    core.container-size.678
    core.container-size.854
    core.container-size.320
    core.container-size.476
    core.container-size.768
    core.container-size.1152
    core.container-size.1440
    core.font.family.primary
    core.font.weight.light
    core.font.weight.regular
    core.font.weight.medium
    core.font.weight.demi
    core.font.weight.bold
    core.size.default.4
    core.size.default.6
    core.size.default.8
    core.font.style.italic
    core.font.line-height.relative.default
    core.font.line-height.relative.tight
    core.font.line-height.relative.snug
    core.font.line-height.relative.normal
    core.font.line-height.relative.relaxed
    core.font.line-height.relative.loose
    core.font.letter-spacing.tight
    core.font.letter-spacing.normal
    core.font.letter-spacing.wide
    core.font.paragraph-spacing.normal
    core.font.text-decoration.none
    core.font.text-decoration.underline
    core.font.text-case.none
    core.font.text-case.uppercase
    core.font.text-case.lowercase
    core.font.text-case.capitalize
    core.opacity.50
    core.opacity.100
    core.size.default.2
    core.size.default.3
    core.size.default.11
    core.size.default.14
    core.size.default.15
    core.size.default.17
    core.size.default.20
    core.z-index.0
    core.z-index.1
    core.z-index.3
    core.z-index.4
    core.z-index.5
    core.z-index.6
    core.z-index.7
    core.z-index.8
    core.z-index.9
This is caused when combining a filter and `outputReferences`.

css
⚠️ /Users/juan6600/dev/projects/calcite-design-system/packages/calcite-design-tokens/dist/css/global.css
While building global.css, filtered out token references were found; output may be unexpected. Here are the references that are used but not defined in the file
    core.size.default.none
    core.size.default.1
    core.size.relative.half
    core.size.relative.full
    core.size.default.5
    core.size.default.7
    core.size.default.9
    core.size.default.0
    core.box-shadow.0
    core.box-shadow.1
    core.box-shadow.2
    core.color.neutral.blk-240
    core.opacity.4
    core.opacity.0
    core.box-shadow.3
    core.box-shadow.4
    core.opacity.8
    core.color.high-saturation.blue.h-bb-060
    core.color.vibrant.blue.v-bb-160
    core.color.high-saturation.blue.h-bb-070
    core.color.high-saturation.blue.h-bb-080
    core.opacity.40
    core.color.dark.blue.d-bb-420
    core.color.neutral.blk-005
    core.color.neutral.blk-190
    core.color.neutral.blk-000
    core.opacity.85
    core.opacity.80
    core.color.neutral.blk-200
    core.color.neutral.blk-010
    core.color.neutral.blk-210
    core.color.neutral.blk-020
    core.color.neutral.blk-220
    core.color.high-saturation.blue.h-bb-010
    core.color.neutral.blk-170
    core.color.neutral.blk-060
    core.color.neutral.blk-140
    core.color.neutral.blk-090
    core.color.neutral.blk-050
    core.color.neutral.blk-160
    core.color.neutral.blk-040
    core.color.neutral.blk-030
    core.color.neutral.blk-180
    core.color.neutral.blk-100
    core.color.neutral.blk-130
    core.color.vibrant.blue.v-bb-140
    core.color.high-saturation.blue.h-bb-090
    core.color.high-saturation.green.h-gg-060
    core.color.dark.green.d-gg-420
    core.color.high-saturation.green.h-gg-070
    core.color.vibrant.green.v-gg-140
    core.color.high-saturation.green.h-gg-080
    core.color.vibrant.green.v-gg-160
    core.color.high-saturation.yellow.h-yy-060
    core.color.dark.yellow.d-yy-420
    core.color.high-saturation.yellow.h-yy-070
    core.color.vibrant.yellow.v-yy-140
    core.color.high-saturation.yellow.h-yy-080
    core.color.vibrant.yellow.v-yy-160
    core.color.high-saturation.red.h-rr-060
    core.color.dark.red.d-rr-420
    core.color.high-saturation.red.h-rr-080
    core.color.vibrant.red.v-rr-160
    core.color.high-saturation.red.h-rr-070
    core.color.vibrant.red.v-rr-140
    core.container-size.154
    core.container-size.328
    core.container-size.504
    core.container-size.678
    core.container-size.854
    core.container-size.320
    core.container-size.476
    core.container-size.768
    core.container-size.1152
    core.container-size.1440
    core.font.family.primary
    core.font.weight.light
    core.font.weight.regular
    core.font.weight.medium
    core.font.weight.demi
    core.font.weight.bold
    core.size.default.4
    core.size.default.6
    core.size.default.8
    core.font.style.italic
    core.font.line-height.relative.default
    core.font.line-height.relative.tight
    core.font.line-height.relative.snug
    core.font.line-height.relative.normal
    core.font.line-height.relative.relaxed
    core.font.line-height.relative.loose
    core.font.letter-spacing.tight
    core.font.letter-spacing.normal
    core.font.letter-spacing.wide
    core.font.paragraph-spacing.normal
    core.font.text-decoration.none
    core.font.text-decoration.underline
    core.font.text-case.none
    core.font.text-case.uppercase
    core.font.text-case.lowercase
    core.font.text-case.capitalize
    core.opacity.50
    core.opacity.100
    core.size.default.2
    core.size.default.3
    core.size.default.11
    core.size.default.14
    core.size.default.15
    core.size.default.17
    core.size.default.20
    core.z-index.0
    core.z-index.1
    core.z-index.3
    core.z-index.4
    core.z-index.5
    core.z-index.6
    core.z-index.7
    core.z-index.8
    core.z-index.9
This is caused when combining a filter and `outputReferences`.

@geospatialem geospatialem added the p - low Issue is non core or affecting less that 10% of people using the library label Jun 25, 2024
@alisonailea
Copy link
Contributor

added a suggested approach. Do we have a preferred logger?

@geospatialem geospatialem added estimate - 3 A day or two of work, likely requires updates to tests. needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. and removed needs triage Planning workflow - pending design/dev review. labels Aug 8, 2024
@DitwanP DitwanP added this to the 2025-08-26 - Aug Milestone milestone Jan 3, 2025
@DitwanP DitwanP removed the needs milestone Planning workflow - pending milestone assignment, has priority and/or estimate. label Jan 3, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
0 - new New issues that need assignment. estimate - 3 A day or two of work, likely requires updates to tests. p - low Issue is non core or affecting less that 10% of people using the library tooling Issues relating to build system fixes or improvements.
Projects
None yet
Milestone
2025-08-26 - Aug Milestone
Development

No branches or pull requests
4 participants
@jcfranco @alisonailea @geospatialem @DitwanP