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

fix(cli): the internal order of the parts of the built css files was nondeterministic #2560

Merged
merged 2 commits into from
Oct 3, 2024
Merged

fix(cli): the internal order of the parts of the built css files was nondeterministic #2560

merged 2 commits into from
Oct 3, 2024

Conversation

unekinn
Copy link
Contributor

@unekinn unekinn commented Oct 2, 2024

Closes #2556

@changeset-bot changeset-bot
Copy link

changeset-bot bot commented Oct 2, 2024 •
edited
Loading

🦋 Changeset detected

Latest commit: 1c5980f

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@digdir/designsystemet Patch
@digdir/designsystemet-css Patch
@digdir/designsystemet-theme Patch
@digdir/designsystemet-react Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Oct 2, 2024 •
edited
Loading

Preview deployments for this pull request:

Storybook - 3. Oct 2024 - 09:45

@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Oct 2, 2024 •
edited
Loading

Coverage Report

Status Category Percentage Covered / Total
🔵 Lines 59.17% 3741 / 6322
🔵 Statements 59.17% 3741 / 6322
🔵 Functions 86.31% 164 / 190
🔵 Branches 75.36% 514 / 682
File CoverageNo changed files found.
Generated in workflow #177 for commit 1c5980f by the Vitest Coverage Report Action

unekinn
unekinn commented Oct 2, 2024
View reviewed changes
packages/cli/src/tokens/build/utils/entryfile.ts
Comment on lines +12 to +19
const sortOrder = [
'color-mode/light',
'typography/secondary',
'semantic',
'color-mode/dark',
'color-mode/contrast',
'typography/primary',
];
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This sort order keeps the brand css files unchanged from the existing commited files when running yarn build:tokens. But is there a reason for this exact ordering? The old sorting function would be equivalent to this:

const sortOrder = [
  'color-mode/light',
  'typography/secondary',
];

That is to say, these two would always come first, and then the rest in an unspecified — but usually the same — order.

However, wouldn't it make more sense for the things that are added to :root -- color-mode/light, typography/primary, and semantic, to be first, and then other color modes, then typography/secondary?

Any thoughts @Barsnes & @eirikbacker

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggest we create an issue of this and can as Mickey when he is back, and merge the rest of the changes - nice work 👏 🫶

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#2562

eirikbacker
eirikbacker approved these changes Oct 3, 2024
View reviewed changes
packages/cli/src/tokens/build/utils/entryfile.ts
Comment on lines +12 to +19
const sortOrder = [
'color-mode/light',
'typography/secondary',
'semantic',
'color-mode/dark',
'color-mode/contrast',
'typography/primary',
];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggest we create an issue of this and can as Mickey when he is back, and merge the rest of the changes - nice work 👏 🫶

packages/cli/src/tokens/build/utils/entryfile.ts Outdated Show resolved Hide resolved
@unekinn unekinn force-pushed the fix/nondeterministic-css-order branch from cef9732 to 5e80adc Compare October 3, 2024 07:30
@unekinn unekinn mentioned this pull request Oct 3, 2024
Open
@unekinn unekinn merged commit 5fe5050 into next Oct 3, 2024
6 checks passed
@unekinn unekinn deleted the fix/nondeterministic-css-order branch October 3, 2024 07:47
@github-actions github-actions bot mentioned this pull request Oct 3, 2024
Merged
Barsnes pushed a commit that referenced this pull request Oct 8, 2024
@github-actions
chore: new release candidate (next) (#2486)
8d3a3c5 
This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to next, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`next` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `next`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @digdir/designsystemet@1.0.0-next.35

### Minor Changes

- Fix crash when running CLI command `tokens build`:
([#2549](#2549))

    -   add --verbose option to `tokens build` for easier debugging
    -   `tokens build` crashed when run on result of `tokens create`

    Update tokens template used by CLI command `tokens create`

- removes `ingress`, renames `paragraph` to `body`, and adds `xl` size

### Patch Changes

- Make sure the internal order of sections in the CSS generated by the
CLI is deterministic, to avoid unnecessary git diffs
([#2560](#2560))

## @digdir/designsystemet-css@1.0.0-next.35

### Patch Changes

- Pagination:
([#2460](#2460))

    -   Remove attributes `currentPage` and `totalPages` on `Pagination`
    -   Replace `Pagination.Root` with `Paginaton`
- Replace `Pagination.Next`, `Pagination.Previous` and
`Pagination.Ellipsis` with `Paginaton.Button`
    -   Make `usePagination` return spreadable props for subcomponents
    -   Add support for `showPages` and `onChange` in `usePagination`

- Skiplink:
([#2577](#2577))

    -   Simplify DOM
    -   Add support for `forwardRef`

- Accordion: Animate open/close with CSS
([#2527](#2527))

    -   Replace onFound with onToggle

- Heading: ([#2525](#2525))

    -   Classes with data attributes
    -   Move base style to utility classes

-   Modal: ([#2440](#2440))

    -   Rename `Modal.Dialog` to `Modal`
    -   Rename `Modal.Root` to `Modal.Context`
    -   Replace `onInteractOutside` event with `backdropClose` boolean
- Replace `closeButton` and `closeButtonTitle` on `Modal.Header` with
`closeButton` on `Modal`
    -   Add border to `Modal.Header` and `Modal.Footer`
    -   Remove `Modal.Content`
    -   Remove `onBeforeClose`
    -   Remove `subtitle` from `Modal.Header`

- Body/Paragraph
([#2529](#2529))

    -   Add body-xl token
    -   Add xl paragraph
    -   Remove ingress tokens

- Ingress: Remove component
([#2515](#2515))

    -   Use `Paragraph variant='long'` instead

- Heading: Fix `md` heading size
([#2485](#2485))

-   Card: ([#2509](#2509))

    -   Allow `Card` with content placed directly inside
- Replace `Card.Header`, `Card.Content` and `Card.Footer` with
`Card.Block`
- Replace `isLink` with anchor-in-heading + `click` handler for better
accessibility

- Modal: Remove `Modal.Header` and `Modal.Footer`, replace with
`Modal.Block`
([#2583](#2583))

- SkipLink: Remove ds-sr-only class
([#2546](#2546))

- Paragraph: Add css classes and style with data attributes
([#2523](#2523))

-   Chip: ([#2493](#2493))
    -   Add `Chip.Button`
    -   Rename `Chip.Toggle` to `Chip.Radio` and `Chip.Checkbox`
    -   Remove `Chip.Group`

## @digdir/designsystemet-react@1.0.0-next.35

### Patch Changes

- Pagination:
([#2460](#2460))

    -   Remove attributes `currentPage` and `totalPages` on `Pagination`
    -   Replace `Pagination.Root` with `Paginaton`
- Replace `Pagination.Next`, `Pagination.Previous` and
`Pagination.Ellipsis` with `Paginaton.Button`
    -   Make `usePagination` return spreadable props for subcomponents
    -   Add support for `showPages` and `onChange` in `usePagination`

- Skiplink:
([#2577](#2577))

    -   Simplify DOM
    -   Add support for `forwardRef`

- Accordion: Animate open/close with CSS
([#2527](#2527))

    -   Replace onFound with onToggle

- Heading: ([#2525](#2525))

    -   Classes with data attributes
    -   Move base style to utility classes

-   Modal: ([#2440](#2440))

    -   Rename `Modal.Dialog` to `Modal`
    -   Rename `Modal.Root` to `Modal.Context`
    -   Replace `onInteractOutside` event with `backdropClose` boolean
- Replace `closeButton` and `closeButtonTitle` on `Modal.Header` with
`closeButton` on `Modal`
    -   Add border to `Modal.Header` and `Modal.Footer`
    -   Remove `Modal.Content`
    -   Remove `onBeforeClose`
    -   Remove `subtitle` from `Modal.Header`

- Body/Paragraph
([#2529](#2529))

    -   Add body-xl token
    -   Add xl paragraph
    -   Remove ingress tokens

- Ingress: Remove component
([#2515](#2515))

    -   Use `Paragraph variant='long'` instead

-   Card: ([#2509](#2509))

    -   Allow `Card` with content placed directly inside
- Replace `Card.Header`, `Card.Content` and `Card.Footer` with
`Card.Block`
- Replace `isLink` with anchor-in-heading + `click` handler for better
accessibility

- Modal: Remove `Modal.Header` and `Modal.Footer`, replace with
`Modal.Block`
([#2583](#2583))

- SkipLink: Remove ds-sr-only class
([#2546](#2546))

- Paragraph: Add css classes and style with data attributes
([#2523](#2523))

-   Chip: ([#2493](#2493))
    -   Add `Chip.Button`
    -   Rename `Chip.Toggle` to `Chip.Radio` and `Chip.Checkbox`
    -   Remove `Chip.Group`

## @digdir/designsystemet-theme@1.0.0-next.35

### Patch Changes

- Body/Paragraph
([#2529](#2529))
    -   Add body-xl token
    -   Add xl paragraph
    -   Remove ingress tokens

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@eirikbacker eirikbacker eirikbacker approved these changes

@mimarz mimarz Awaiting requested review from mimarz mimarz is a code owner

@Barsnes Barsnes Awaiting requested review from Barsnes Barsnes is a code owner

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Deterministic theme css files
2 participants
@unekinn @eirikbacker