diff --git a/bin/export-css-custom-properties-as-js-vars.js b/bin/export-css-custom-properties-as-js-vars.js index 9bfe86c02d..1398ed27fc 100644 --- a/bin/export-css-custom-properties-as-js-vars.js +++ b/bin/export-css-custom-properties-as-js-vars.js @@ -20,7 +20,6 @@ const PALETTES = [ 'colors-qualitative', 'colors-sequential', 'colors-students', - 'colors-transparent', 'colors-x5', 'shadows-bluetint', 'shadows-indigo', diff --git a/packages/codemod/README.md b/packages/codemod/README.md index d156199b86..db64468325 100644 --- a/packages/codemod/README.md +++ b/packages/codemod/README.md @@ -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` | @@ -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 мажорный релиз @@ -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 мажорный релиз + + + + + + + + + + + + + + +
НазваниеОписание
49-replace-transparent-color-vars + Заменяет цветовые токены из палитры colors-transparent.css

+ Запуск
+ npx @alfalab/core-components-codemod --transformers=49-replace-transparent-color-vars --glob='src/**/*.tsx' +
+ ## Разработка Под капотом - [jscodeshift](https://github.com/facebook/jscodeshift). diff --git a/packages/codemod/package.json b/packages/codemod/package.json index 4798b7074d..424469164b 100644 --- a/packages/codemod/package.json +++ b/packages/codemod/package.json @@ -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", diff --git a/packages/codemod/src/49-replace-transparent-color-vars/__test__/transform.spec.ts b/packages/codemod/src/49-replace-transparent-color-vars/__test__/transform.spec.ts new file mode 100644 index 0000000000..769f740255 --- /dev/null +++ b/packages/codemod/src/49-replace-transparent-color-vars/__test__/transform.spec.ts @@ -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); + }); +}); diff --git a/packages/codemod/src/49-replace-transparent-color-vars/transform.ts b/packages/codemod/src/49-replace-transparent-color-vars/transform.ts new file mode 100644 index 0000000000..a13015a248 --- /dev/null +++ b/packages/codemod/src/49-replace-transparent-color-vars/transform.ts @@ -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; +} diff --git a/packages/vars/src/colors-transparent.css b/packages/vars/src/colors-transparent.css deleted file mode 100644 index 53ccdd0488..0000000000 --- a/packages/vars/src/colors-transparent.css +++ /dev/null @@ -1,28 +0,0 @@ -:root { - --color-dynamic-nulled: rgba(0, 0, 0, 0); /* deprecated */ - --color-dynamic-primary-dark: rgba(0, 0, 0, 0.8); /* deprecated */ - --color-dynamic-primary-light: rgba(255, 255, 255, 0.8); /* deprecated */ - --color-dynamic-quaternary-dark: rgba(0, 0, 0, 0.32); /* deprecated */ - --color-dynamic-quaternary-light: rgba(255, 255, 255, 0.32); /* deprecated */ - --color-dynamic-quinary-dark: rgba(0, 0, 0, 0.16); /* deprecated */ - --color-dynamic-quinary-light: rgba(255, 255, 255, 0.16); /* deprecated */ - --color-dynamic-secondary-dark: rgba(0, 0, 0, 0.64); /* deprecated */ - --color-dynamic-secondary-light: rgba(255, 255, 255, 0.64); /* deprecated */ - --color-dynamic-senary-dark: rgba(0, 0, 0, 0.12); /* deprecated */ - --color-dynamic-senary-light: rgba(255, 255, 255, 0.12); /* deprecated */ - --color-dynamic-tertiary-dark: rgba(0, 0, 0, 0.48); /* deprecated */ - --color-dynamic-tertiary-light: rgba(255, 255, 255, 0.48); /* deprecated */ - --color-static-nulled: rgba(0, 0, 0, 0); /* deprecated */ - --color-static-primary-dark: rgba(0, 0, 0, 0.8); /* deprecated */ - --color-static-primary-light: rgba(255, 255, 255, 0.8); /* deprecated */ - --color-static-quaternary-dark: rgba(0, 0, 0, 0.32); /* deprecated */ - --color-static-quaternary-light: rgba(255, 255, 255, 0.32); /* deprecated */ - --color-static-quinary-dark: rgba(0, 0, 0, 0.16); /* deprecated */ - --color-static-quinary-light: rgba(255, 255, 255, 0.16); /* deprecated */ - --color-static-secondary-dark: rgba(0, 0, 0, 0.64); /* deprecated */ - --color-static-secondary-light: rgba(255, 255, 255, 0.64); /* deprecated */ - --color-static-senary-dark: rgba(0, 0, 0, 0.12); /* deprecated */ - --color-static-senary-light: rgba(255, 255, 255, 0.12); /* deprecated */ - --color-static-tertiary-dark: rgba(0, 0, 0, 0.48); /* deprecated */ - --color-static-tertiary-light: rgba(255, 255, 255, 0.48); /* deprecated */ -} diff --git a/packages/vars/src/index.css b/packages/vars/src/index.css index a0dc75bb04..0f52e5d2c2 100644 --- a/packages/vars/src/index.css +++ b/packages/vars/src/index.css @@ -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';