Fluent design tokens pipeline - #34701
Conversation
| * names, but the index also carries the version for the message and needs no generated output. | ||
| * Reusing getBridgeFiles() is what keeps the scope from drifting away from the generator. | ||
| */ | ||
| async function validateConsumedTokens() { |
There was a problem hiding this comment.
The check reads scss/widgets/fluent-next//*.scss, but build:tokens declares only {projectRoot}/build/tokens//* and pnpm-lock.yaml as inputs. So Nx replays the cache whenever only a stylesheet changed, and the check silently does not run.
Two options:
- add {projectRoot}/scss/widgets/fluent-next/**/* to the build:tokens inputs, or
- move the integration half into tests/consumed-tokens.test.ts - that target already has inputs: ["{projectRoot}/**/*"] and dependsOn: ["build:tokens"], and styles.yml runs it. The pure functions are already there, so the integration case fits naturally.
| "@devexpress/design-tokens-internal" | ||
| ], | ||
| "automerge": false, | ||
| "minimumReleaseAge": null |
There was a problem hiding this comment.
automerge: false is right, but minimumReleaseAge: null drops the 7-day soak from the * rule, so a PR is opened immediately on every publish of this exact-pinned internal package. That PR then waits for the designers' signal while occupying 1 of only 2 prConcurrentLimit slots, starving every other dependency update for as long as it sits.
For "update manually on a signal", dependencyDashboardApproval: true fits better: the update is visible on the dashboard, no PR until someone approves, no slot taken. minimumReleaseAge: null only makes sense paired with that.
The repo also already has an idiom for packages that must be bumped by hand — {"matchPackageNames": ["devexpress-gantt", "devexpress-diagram", "rrule", "sass-embedded", "systemjs"], "enabled": false} - worth following if no PR is wanted at all.
| } | ||
|
|
||
| $validation-summary-margin-block-start: ds.$spacing-200 !default; | ||
| $validation-message-padding: ds.$spacing-100 !default; |
There was a problem hiding this comment.
This name collides semantically with $validation-message-padding-block / $validation-message-padding-inline declared above: it reads as "the message's padding on all sides", but it actually feeds the base config $validation-message-content-padding - a different element. Please rename to $validation-message-content-padding to match the base parameter.
Also: both new declarations sit after the @if $size branches, ~15 lines away from the padding-block/padding-inline pair they clash with. Moving them up into the unconditional group makes the distinction visible.
| * uncounted. That under-reports rather than failing wrongly, no theme stylesheet does it today, and | ||
| * fluent-next-naming.test.ts strips comments the same way. | ||
| */ | ||
| export const stripScssComments = (content: string): string => content |
There was a problem hiding this comment.
stripComments (line 65 of this file) is identical copy of stripScssComments.
That commit created the pure module precisely so this could be shared - import { stripScssComments } from '../build/tokens/consumed-tokens'; works from here.
| * valid `spacing-40` and report the stylesheet as verified. | ||
| */ | ||
| export const collectTokenReferences = (content: string): string[] => [ | ||
| ...stripScssComments(content).matchAll(/\bds\.\$([\w-]+)/g), |
There was a problem hiding this comment.
The regex only scans ds.$, so var(--dxds-…) inside an at-rule parameter (e.g. @use "../../base/x" with (
| `components/core/theme/${THEME_NAME}`, | ||
| ]; | ||
| /* | ||
| * Source files behind the SCSS bridge. The component tier is deliberately absent: its 601 tokens |
There was a problem hiding this comment.
The count 601 is hardcoded in prose here and again in _design-system.scss. The enforced copy lives in tools/naming/registries.json (componentTokenCount: 601, checked by the naming test); these two are unenforced and will rot on the next package bump - which is the exact scenario this PR is about. You already removed 1578 from this file in the last commit; same treatment here (drop the number or say "~600").
|
|
||
| // adduse | ||
|
|
||
| $map-marker-tooltip-margin: ds.$spacing-100 !default; |
There was a problem hiding this comment.
$map-marker-tooltip-margin:
| @use "../../base/validation" as baseValidation with ( | ||
| $validation-summary-margin-top: ds.$spacing-200, | ||
| $validation-message-content-padding: ds.$spacing-100, | ||
| $validation-summary-margin-top: validationSizes.$validation-summary-margin-block-start, |
There was a problem hiding this comment.
Two blank lines left over from the removed declaration.
| "declaration-block-no-redundant-longhand-properties": null, | ||
| "declaration-no-important": true, | ||
| "declaration-property-value-disallowed-list": [ | ||
| { "/.*/": ["/var\\(\\s*--dxds-/"] }, |
There was a problem hiding this comment.
Same rule, same intent as line 17, but the message drops the closing "The public --dx-* properties are unaffected." - that's the sentence that stops someone from thinking the rule bans all custom properties, so it's worth keeping in both. The override above (line 78) also carries a "comment" key while this one doesn't.
| ] | ||
| }, | ||
| "build:npm:scss": { | ||
| "executor": "devextreme-nx-infra-plugin:scss-assemble", |
There was a problem hiding this comment.
[high, question should be resolve] The commit message says "Earlier tokens were included in a package accidently", but this change guarantees they're included: scss-assemble globs scss//* with no excludes, so dependsOn: build:tokens makes scss/_design-system/ always present in the published npm scss.
If the message means "inclusion used to depend on build ordering, now it's deterministic" - the diff is right, and then the decision being made is internal design tokens ship in the public devextreme package. fluent-next is marked internal (themebuilder filters it out), yet its SCSS and the bridge do get copied to artifacts/npm/devextreme/scss. Could you state that intent explicitly, and confirm it with whoever owns packaging?
(No clean/copy race here, I checked: targetDefaults.build.dependsOn: ["^build"] makes devextreme-scss:build - which starts with clean:tokens - finish before devextreme:build, and build:npm:scss is uncached, so the new dependsOn can't serve a stale output.)
There was a problem hiding this comment.
Will revert to resolve on the next task
65845e1 to
b6c79cb
Compare
50cd66a
into
DevExpress:feature/26_2_new_fluent_theme_with_design_tokens
No description provided.