Skip to content

refactor: convert x-figure & x-blockquote to mixins#612

Merged
wesleyboar merged 5 commits intomainfrom
refactor/convert-x-figure-and-x-blockquote-to-mixins
Mar 26, 2026
Merged

refactor: convert x-figure & x-blockquote to mixins#612
wesleyboar merged 5 commits intomainfrom
refactor/convert-x-figure-and-x-blockquote-to-mixins

Conversation

@wesleyboar
Copy link
Copy Markdown
Member

@wesleyboar wesleyboar commented Mar 26, 2026

Overview / Changes

Use @define-mixin and @mixin for figure and blockquote mixins.

Tip

Backwards-compatible.

Related

Testing

  1. npm run build:css
  2. No functional change to /dist.1

UI

Skipped.

Footnotes

  1. Diff of /dist is build-noise from mixin expansion + selector de-grouping; behavior is unchanged; deprecated .x-figure* and .x-blockquote* compatibility exists, just as separate rulesets. I manually reviewed and suspected this. A.I. verified it independently.

@wesleyboar wesleyboar merged commit ecad7fa into main Mar 26, 2026
@wesleyboar wesleyboar deleted the refactor/convert-x-figure-and-x-blockquote-to-mixins branch March 26, 2026 19:32
wesleyboar added a commit to TACC/Core-CMS that referenced this pull request Mar 26, 2026
## Overview

Use figure and blockquote styles form Core-Styles via `@mixin` not
`@extend.

> [!IMPORTANT]
> - [ ] Install Core-Styles at version after releasing
TACC/Core-Styles#612

## Related

- requires TACC/Core-Styles#612
- required by TACC/tup-ui#537

## Changes

- **updates** Core-Styles
- **changes** `@extend .x-figure` to `@mixin figure`

## Testing

1. Build CSS for `main` and this branch such that you can compare diff:

    ```sh
    git checkout main
    git pull
    npm ci
    npm run build:css
    git add -f taccsite_cms/static/site_cms/css/build
    gco refactor/use-figure-and-blockquote-mixins-bot-extend
    git pull
    npm ci
    npm run build:css
    ```

2. Verify unstaged diff of
`taccsite_cms/static/site_cms/css/build/figure-caption-blockquote.css`
looks similar to diff of TACC/Core-Styles#612
`dist/elements/html-elements.docs.css`.
3. Stage the diff of new build:

    ```sh
    git add -f taccsite_cms/static/site_cms/css/build
    ```

4. Copy diff of TACC/Core-Styles#612
`dist/elements/html-elements.docs.css` into
`taccsite_cms/static/site_cms/css/build/figure-caption-blockquote.css`.
5. Verify diff is just the new selectors in
`taccsite_cms/static/site_cms/css/src/_imports/elements/figure-caption-blockquote.css`
and the unique rule at the bottom of it.

## UI

**Skipped.**

I will do manual integration test via
TACC/tup-ui#537. This is belated housekeeping to
allow me to properly fix illegible caption on
https://tacc.utexas.edu/use-tacc/visualization-services/.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant