Skip to content

Commit

Permalink
feat(codemod): add codemod for transparent color vars
Browse files Browse the repository at this point in the history
  • Loading branch information
@fulcanellee
fulcanellee committed Jan 14, 2025
1 parent b471259 commit c89f4ff
Show file tree
Hide file tree
Showing 7 changed files with 222 additions and 38 deletions.
1 change: 0 additions & 1 deletion bin/export-css-custom-properties-as-js-vars.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ const PALETTES = [
'colors-qualitative',
'colors-sequential',
'colors-students',
'colors-transparent',
'colors-x5',
'shadows-bluetint',
'shadows-indigo',
Expand Down
35 changes: 28 additions & 7 deletions packages/codemod/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ $ npx @alfalab/core-components-codemod --transformers=button-xs,button-views --g
## Список доступных трансформеров

| Название | Описание |
|-----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| paragraph | Меняет компонент `Paragraph` из `arui-feather` на актульный компонент из `core-components` |
| label | Меняет компонент `Label` из `arui-feather` на актульный компонент из `core-components` |
| heading | Меняет компонент `Heading` из `arui-feather` на актульный компонент из `core-components` |
Expand All @@ -43,12 +43,12 @@ $ npx @alfalab/core-components-codemod --transformers=button-xs,button-views --g
| | `--color-static-bg-neutral-light`: `--color-static-bg-quaternary-light` |
| | `--color-static-bg-neutral-dark`: `--color-static-bg-quaternary-dark` |
| delete-dist | Удаляет '/dist' в импортах отдельных пакетов. Может принимать дополнительный аргумент командной строки --packages, в котором указывается список компонентов, импорты которых нужно обработать, например (--packages="modal,button") |
| button-breakpoint-768 | Добавляет свойство breakpoint со значением 768 к респонсивной кнопке |
| button-views-45 | Меняет вид кнопки с view `tertiary` на `outlined`, `link` на `transparent`, `ghost` на `text` |
| skeleton-blur | Добавляет свойство `allowBackdropBlur` со значение true к компоненту Skeleton |
| status-soft | Изменяет view компонента Status с `soft` на `muted-alt`|
| input-type-card | Заменяет атрибут type со значением 'card' на inputMode со значением 'numeric' в компоненте Input |
| spinner | Меняет `size` на `preset` |
| button-breakpoint-768 | Добавляет свойство breakpoint со значением 768 к респонсивной кнопке |
| button-views-45 | Меняет вид кнопки с view `tertiary` на `outlined`, `link` на `transparent`, `ghost` на `text` |
| skeleton-blur | Добавляет свойство `allowBackdropBlur` со значение true к компоненту Skeleton |
| status-soft | Изменяет view компонента Status с `soft` на `muted-alt` |
| input-type-card | Заменяет атрибут type со значением 'card' на inputMode со значением 'numeric' в компоненте Input |
| spinner | Меняет `size` на `preset` |

### 42 мажорный релиз

Expand Down Expand Up @@ -198,6 +198,27 @@ $ npx @alfalab/core-components-codemod --transformers=button-xs,button-views --g
npx @alfalab/core-components-codemod --transformers=42-autocomplete,42-button,42-calendar,42-calendar-input,42-checkbox-group,42-code-input,42-confirmation,42-date-range-input,42-date-time-input,42-filter-tag,42-form-control,42-input,42-modal,42-picker-button,42-plate,42-radio-group,42-select,42-side-panel,42-system-message,42-tabs,42-tag,42-toast,42-toast-plate,42-tooltip --glob='src/**/*.tsx'
```

### 49 мажорный релиз

<table>
<thead>
<tr>
<th>Название</th>
<th>Описание</th>
</tr>
</thead>
<tbody>
<tr>
<td>49-replace-transparent-color-vars</td>
<td>
Заменяет цветовые токены из палитры <code>colors-transparent.css</code> <br/><br/>
<b>Запуск</b><br/>
<code>npx @alfalab/core-components-codemod --transformers=49-replace-transparent-color-vars --glob='src/**/*.tsx' </code>
</td>
</tr>
</tbody>
</table>

## Разработка

Под капотом - [jscodeshift](https://github.com/facebook/jscodeshift).
Expand Down
2 changes: 1 addition & 1 deletion packages/codemod/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@alfalab/core-components-codemod",
"version": "2.7.0",
"version": "2.8.0",
"description": "Codemod tools for code transforms",
"keywords": [],
"license": "MIT",
Expand Down
131 changes: 131 additions & 0 deletions packages/codemod/src/49-replace-transparent-color-vars/__test__/transform.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
import { applyTransform } from '@codeshift/test-utils';

import * as transformer from '../transform';

const inputCss = `
:root {
--color-1: var(--color-dynamic-nulled);
--color-2: var(--color-dynamic-primary-dark);
--color-3: var(--color-dynamic-primary-light);
--color-4: var(--color-dynamic-quaternary-dark);
--color-5: var(--color-dynamic-quaternary-light);
--color-6: var(--color-dynamic-quinary-dark);
--color-7: var(--color-dynamic-quinary-light);
--color-8: var(--color-dynamic-secondary-dark);
--color-9: var(--color-dynamic-secondary-light);
--color-10: var(--color-dynamic-senary-dark);
--color-11: var(--color-dynamic-senary-light);
--color-12: var(--color-dynamic-tertiary-dark);
--color-13: var(--color-dynamic-tertiary-light);
--color-14: var(--color-static-nulled);
--color-15: var(--color-static-primary-dark);
--color-16: var(--color-static-primary-light);
--color-17: var(--color-static-quaternary-dark);
--color-18: var(--color-static-quaternary-light);
--color-19: var(--color-static-quinary-dark);
--color-20: var(--color-static-quinary-light);
--color-21: var(--color-static-secondary-dark);
--color-22: var(--color-static-secondary-light);
--color-23: var(--color-static-senary-dark);
--color-24: var(--color-static-senary-light);
--color-25: var(--color-static-tertiary-dark);
--color-26: var(--color-static-tertiary-light);
}
.a {
color: var(--color-dynamic-nulled);
color: var(--color-dynamic-primary-dark);
color: var(--color-dynamic-primary-light);
color: var(--color-dynamic-quaternary-dark);
color: var(--color-dynamic-quaternary-light);
color: var(--color-dynamic-quinary-dark);
background-color: var(--color-dynamic-quinary-light);
background-color: var(--color-dynamic-secondary-dark);
background-color: var(--color-dynamic-secondary-light);
background-color: var(--color-dynamic-senary-dark);
background-color: var(--color-dynamic-senary-light);
background-color: var(--color-dynamic-tertiary-dark);
border: 1px solid var(--color-dynamic-tertiary-light);
border: 1px solid var(--color-static-nulled);
border: 1px solid var(--color-static-primary-dark);
border: 1px solid var(--color-static-primary-light);
border: 1px solid var(--color-static-quaternary-dark);
border: 1px solid var(--color-static-quaternary-light);
background: var(--color-static-quinary-dark);
background: var(--color-static-quinary-light);
background: var(--color-static-secondary-dark);
background: var(--color-static-secondary-light);
background: var(--color-static-senary-dark);
background: var(--color-static-senary-light);
background: var(--color-static-tertiary-dark);
background: var(--color-static-tertiary-light);
}
`;

const expectedCss = `
":root {
--color-1: var(--color-light-transparent-default);
--color-2: var(--color-dark-monochrome-white-8);
--color-3: var(--color-light-monochrome-white-8);
--color-4: var(--color-dark-monochrome-white-32);
--color-5: var(--color-light-monochrome-white-32);
--color-6: var(--color-dark-monochrome-white-16);
--color-7: var(--color-light-monochrome-white-16);
--color-8: var(--color-dark-monochrome-white-64);
--color-9: var(--color-light-monochrome-white-64);
--color-10: var(--color-dark-monochrome-white-12);
--color-11: var(--color-light-monochrome-white-12);
--color-12: var(--color-dark-monochrome-white-48);
--color-13: var(--color-light-monochrome-white-48);
--color-14: var(--color-light-transparent-default);
--color-15: var(--color-static-monochrome-black-8);
--color-16: var(--color-static-monochrome-white-8);
--color-17: var(--color-static-monochrome-black-32);
--color-18: var(--color-static-monochrome-white-32);
--color-19: var(--color-static-monochrome-black-16);
--color-20: var(--color-static-monochrome-white-16);
--color-21: var(--color-static-monochrome-black-64);
--color-22: var(--color-static-monochrome-white-64);
--color-23: var(--color-static-monochrome-black-12);
--color-24: var(--color-static-monochrome-white-12);
--color-25: var(--color-static-monochrome-black-48);
--color-26: var(--color-static-monochrome-white-48);
}
.a {
color: var(--color-light-transparent-default);
color: var(--color-dark-monochrome-white-8);
color: var(--color-light-monochrome-white-8);
color: var(--color-dark-monochrome-white-32);
color: var(--color-light-monochrome-white-32);
color: var(--color-dark-monochrome-white-16);
background-color: var(--color-light-monochrome-white-16);
background-color: var(--color-dark-monochrome-white-64);
background-color: var(--color-light-monochrome-white-64);
background-color: var(--color-dark-monochrome-white-12);
background-color: var(--color-light-monochrome-white-12);
background-color: var(--color-dark-monochrome-white-48);
border: 1px solid var(--color-light-monochrome-white-48);
border: 1px solid var(--color-light-transparent-default);
border: 1px solid var(--color-static-monochrome-black-8);
border: 1px solid var(--color-static-monochrome-white-8);
border: 1px solid var(--color-static-monochrome-black-32);
border: 1px solid var(--color-static-monochrome-white-32);
background: var(--color-static-monochrome-black-16);
background: var(--color-static-monochrome-white-16);
background: var(--color-static-monochrome-black-64);
background: var(--color-static-monochrome-white-64);
background: var(--color-static-monochrome-black-12);
background: var(--color-static-monochrome-white-12);
background: var(--color-static-monochrome-black-48);
background: var(--color-static-monochrome-white-48);
}"
`;

describe('css-codemod#replace-color-vars transform', () => {
it('should transform correctly', async () => {
const result = await applyTransform(transformer, inputCss);

expect(result).toMatchInlineSnapshot(expectedCss);
});
});
62 changes: 62 additions & 0 deletions packages/codemod/src/49-replace-transparent-color-vars/transform.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
/* eslint-disable no-param-reassign */
import postcss, { Plugin } from 'postcss';

// Vars for replacement {old-var: new-var}
const replacement = {
'--color-dynamic-nulled': '--color-light-transparent-default',
'--color-dynamic-primary-dark': '--color-dark-monochrome-white-8',
'--color-dynamic-primary-light': '--color-light-monochrome-white-8',
'--color-dynamic-quaternary-dark': '--color-dark-monochrome-white-32',
'--color-dynamic-quaternary-light': '--color-light-monochrome-white-32',
'--color-dynamic-quinary-dark': '--color-dark-monochrome-white-16',
'--color-dynamic-quinary-light': '--color-light-monochrome-white-16',
'--color-dynamic-secondary-dark': '--color-dark-monochrome-white-64',
'--color-dynamic-secondary-light': '--color-light-monochrome-white-64',
'--color-dynamic-senary-dark': '--color-dark-monochrome-white-12',
'--color-dynamic-senary-light': '--color-light-monochrome-white-12',
'--color-dynamic-tertiary-dark': '--color-dark-monochrome-white-48',
'--color-dynamic-tertiary-light': '--color-light-monochrome-white-48',
'--color-static-nulled': '--color-light-transparent-default',
'--color-static-primary-dark': '--color-static-monochrome-black-8',
'--color-static-primary-light': '--color-static-monochrome-white-8',
'--color-static-quaternary-dark': '--color-static-monochrome-black-32',
'--color-static-quaternary-light': '--color-static-monochrome-white-32',
'--color-static-quinary-dark': '--color-static-monochrome-black-16',
'--color-static-quinary-light': '--color-static-monochrome-white-16',
'--color-static-secondary-dark': '--color-static-monochrome-black-64',
'--color-static-secondary-light': '--color-static-monochrome-white-64',
'--color-static-senary-dark': '--color-static-monochrome-black-12',
'--color-static-senary-light': '--color-static-monochrome-white-12',
'--color-static-tertiary-dark': '--color-static-monochrome-black-48',
'--color-static-tertiary-light': '--color-static-monochrome-white-48',
};

const plugin = (): Plugin => {
const processed = Symbol('processed');

return {
postcssPlugin: 'ReplaceColorTokens',
Declaration: (decl) => {
if (decl[processed]) {
return;
}
if (decl.value.includes('--color-')) {
const fullVars = decl.value.match(/--color[\w-]+/g) || [];
const values = fullVars.map(
(color) => color.match(/([\w-]+?)(?=-tint|-alpha|-shade|$)/g)[0],
);

values.forEach((value) => {
if (replacement[value]) {
decl.value = decl.value.replace(value, replacement[value]);
}
});
}
decl[processed] = true;
},
};
};

export default function transformer(file) {
return postcss([plugin()]).process(file.source).css;
}
28 changes: 0 additions & 28 deletions packages/vars/src/colors-transparent.css
View file

This file was deleted.

1 change: 0 additions & 1 deletion packages/vars/src/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
@import './colors.css'; /* deprecated */
@import './colors-bluetint.css';
@import './colors-addons.css';
@import './colors-transparent.css';
@import './shadows-bluetint.css';
@import './border-radius.css';
@import './gaps.css';
Expand Down

0 comments on commit c89f4ff

Please sign in to comment.