chore(ui-codemods): add codemod to rename getComputedStyle to getCSSStyleDeclaration

ToMESSKa · ToMESSKa · commit 65858bf59f63 · 2025-08-06T13:31:19.000+02:00
INSTUI-4626
diff --git a/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test1.input.tsx b/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test1.input.tsx
@@ -0,0 +1,19 @@
+// @ts-nocheck
+
+// test for basic import renaming
+import { getComputedStyle } from '@instructure/ui-dom-utils'
+
+function test() {
+  const oldStyles = getComputedStyle(element)
+  const newStyles = getCSSStyleDeclaration(element)
+
+  document.defaultView.getComputedStyle(element)
+
+  window.getComputedStyle()
+
+  getComputedStyle(element, ':before')
+
+  registerFunction(getComputedStyle)
+
+  return getComputedStyle()
+}
diff --git a/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test1.output.tsx b/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test1.output.tsx
@@ -0,0 +1,19 @@
+// @ts-nocheck
+
+// test for basic import renaming
+import { getCSSStyleDeclaration } from '@instructure/ui-dom-utils'
+
+function test() {
+  const oldStyles = getCSSStyleDeclaration(element)
+  const newStyles = getCSSStyleDeclaration(element)
+
+  document.defaultView.getComputedStyle(element)
+
+  window.getComputedStyle()
+
+  getCSSStyleDeclaration(element, ':before')
+
+  registerFunction(getCSSStyleDeclaration)
+
+  return getCSSStyleDeclaration()
+}
diff --git a/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test2.input.tsx b/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test2.input.tsx
@@ -0,0 +1,11 @@
+// @ts-nocheck
+
+import { getComputedStyle as getStyle } from '@instructure/ui-dom-utils'
+
+function test() {
+  const styles = getStyle(element)
+  window.getComputedStyle()
+  getComputedStyle()
+
+  obj.getComputedStyle(element)
+}
diff --git a/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test2.output.tsx b/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test2.output.tsx
@@ -0,0 +1,11 @@
+// @ts-nocheck
+
+import { getCSSStyleDeclaration as getStyle } from '@instructure/ui-dom-utils'
+
+function test() {
+  const styles = getStyle(element)
+  window.getComputedStyle()
+  getComputedStyle()
+
+  obj.getComputedStyle(element)
+}
diff --git a/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test3.input.tsx b/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test3.input.tsx
@@ -0,0 +1,10 @@
+// @ts-nocheck
+
+import { getComputedStyle, otherFunc } from '@instructure/ui-dom-utils'
+
+function test() {
+  const oldStyles = getComputedStyle(element)
+  const newStyles = getCSSStyleDeclaration(element)
+  window.getComputedStyle()
+  return getComputedStyle()
+}
diff --git a/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test3.output.tsx b/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test3.output.tsx
@@ -0,0 +1,10 @@
+// @ts-nocheck
+
+import { getCSSStyleDeclaration, otherFunc } from '@instructure/ui-dom-utils'
+
+function test() {
+  const oldStyles = getCSSStyleDeclaration(element)
+  const newStyles = getCSSStyleDeclaration(element)
+  window.getComputedStyle()
+  return getCSSStyleDeclaration()
+}
diff --git a/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test4.input.tsx b/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test4.input.tsx
@@ -0,0 +1,11 @@
+// @ts-nocheck
+
+import { getComputedStyle } from '@instructure/ui-dom-utils'
+
+function test() {
+  const getComputedStyle = () => {}
+  return getComputedStyle(element)
+}
+
+getComputedStyle()
+const styles = getComputedStyle<HTMLElement>(element)
diff --git a/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test4.output.tsx b/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test4.output.tsx
@@ -0,0 +1,11 @@
+// @ts-nocheck
+
+import { getCSSStyleDeclaration } from '@instructure/ui-dom-utils'
+
+function test() {
+  const getComputedStyle = () => {}
+  return getComputedStyle(element)
+}
+
+getCSSStyleDeclaration()
+const styles = getCSSStyleDeclaration<HTMLElement>(element)
diff --git a/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test5.input.tsx b/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test5.input.tsx
@@ -0,0 +1,8 @@
+// @ts-nocheck
+
+import { getComputedStyle } from '@instructure/ui-dom-utils'
+
+function test() {
+  const styleFunc = getComputedStyle
+  return styleFunc(element)
+}
diff --git a/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test5.output.tsx b/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test5.output.tsx
@@ -0,0 +1,8 @@
+// @ts-nocheck
+
+import { getCSSStyleDeclaration } from '@instructure/ui-dom-utils'
+
+function test() {
+  const styleFunc = getCSSStyleDeclaration
+  return styleFunc(element)
+}
diff --git a/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test6.input.tsx b/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test6.input.tsx
@@ -0,0 +1,12 @@
+// @ts-nocheck
+
+import * as DOMUtils from '@instructure/ui-dom-utils'
+
+function test() {
+  DOMUtils.getComputedStyle()
+  getComputedStyle()
+  window.getComputedStyle()
+  const styles = DOMUtils.getComputedStyle(element)
+  const { getComputedStyle } = window
+  const styles2 = getComputedStyle(element)
+}
diff --git a/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test6.output.tsx b/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test6.output.tsx
@@ -0,0 +1,12 @@
+// @ts-nocheck
+
+import * as DOMUtils from '@instructure/ui-dom-utils'
+
+function test() {
+  DOMUtils.getCSSStyleDeclaration()
+  getComputedStyle()
+  window.getComputedStyle()
+  const styles = DOMUtils.getCSSStyleDeclaration(element)
+  const { getComputedStyle } = window
+  const styles2 = getComputedStyle(element)
+}
diff --git a/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test7.input.tsx b/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test7.input.tsx
@@ -0,0 +1,9 @@
+// @ts-nocheck
+import { getComputedStyle } from '@instructure/ui-dom-utils'
+import * as DOMUtils from '@instructure/ui-dom-utils'
+
+function test() {
+  getComputedStyle(element)
+  DOMUtils.getComputedStyle(element)
+  window.getComputedStyle(element)
+}
diff --git a/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test7.output.tsx b/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test7.output.tsx
@@ -0,0 +1,9 @@
+// @ts-nocheck
+import { getCSSStyleDeclaration } from '@instructure/ui-dom-utils'
+import * as DOMUtils from '@instructure/ui-dom-utils'
+
+function test() {
+  getCSSStyleDeclaration(element)
+  DOMUtils.getCSSStyleDeclaration(element)
+  window.getComputedStyle(element)
+}
diff --git a/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test8.input.tsx b/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test8.input.tsx
@@ -0,0 +1,9 @@
+// @ts-nocheck
+import { getComputedStyle } from '@instructure/ui-dom-utils'
+
+function test() {
+  getComputedStyle()
+
+  const getComputedStyle = window.getComputedStyle()
+  getComputedStyle()
+}
diff --git a/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test8.output.tsx b/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test8.output.tsx
@@ -0,0 +1,9 @@
+// @ts-nocheck
+import { getCSSStyleDeclaration } from '@instructure/ui-dom-utils'
+
+function test() {
+  getCSSStyleDeclaration()
+
+  const getComputedStyle = window.getComputedStyle()
+  getComputedStyle()
+}
diff --git a/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test9.input.tsx b/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test9.input.tsx
@@ -0,0 +1,4 @@
+// @ts-nocheck
+import * as DOMUtils from '@instructure/ui-dom-utils'
+
+const { getComputedStyle } = DOMUtils
diff --git a/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test9.output.tsx b/packages/ui-codemods/lib/__node_tests__/__testfixtures__/renameGetComputedStyleToGetCSSStyleDeclaration/test9.output.tsx
@@ -0,0 +1,4 @@
+// @ts-nocheck
+import * as DOMUtils from '@instructure/ui-dom-utils'
+
+const { getCSSStyleDeclaration } = DOMUtils
diff --git a/packages/ui-codemods/lib/__node_tests__/codemods.test.ts b/packages/ui-codemods/lib/__node_tests__/codemods.test.ts
@@ -28,6 +28,7 @@ import removeAsFromInstUISettingsProvider from '../removeAsFromInstUISettingsPro
 import renameCanvasThemesCodemod from '../renameCanvasThemesCodemod'
 import updateCodeEditorImport from '../updateCodeEditorImport'
 import removeMaxWidthFromTag from '../removeMaxWidthFromTag'
+import renameGetComputedStyleToGetCSSStyleDeclaration from '../renameGetComputedStyleToGetCSSStyleDeclaration'
 
 describe('test codemods', () => {
   it('test InstUI v10 color codemods', () => {
@@ -49,4 +50,8 @@ describe('test codemods', () => {
   it('test removing "maxWidth" from Tag', () => {
     runTest(removeMaxWidthFromTag)
   })
+
+  it('test renaming "getComputedStyle" to getCSSStyleDeclaration', () => {
+    runTest(renameGetComputedStyleToGetCSSStyleDeclaration)
+  })
 })
diff --git a/packages/ui-codemods/lib/index.ts b/packages/ui-codemods/lib/index.ts
@@ -28,12 +28,14 @@ import removeAsFromInstUISettingsProvider from './removeAsFromInstUISettingsProv
 import { renameCanvasThemes } from './renameCanvasThemesCodemod'
 import updateCodeEditorImport from './updateCodeEditorImport'
 import removeMaxWidthFromTag from './removeMaxWidthFromTag'
+import renameGetComputedStyleToGetCSSStyleDeclaration from './renameGetComputedStyleToGetCSSStyleDeclaration'
 
 export {
   updateV10Breaking,
   instUIv11Codemods,
   removeAsFromInstUISettingsProvider,
   renameCanvasThemes,
   updateCodeEditorImport,
-  removeMaxWidthFromTag
+  removeMaxWidthFromTag,
+  renameGetComputedStyleToGetCSSStyleDeclaration
 }
diff --git a/packages/ui-codemods/lib/renameGetComputedStyleToGetCSSStyleDeclaration.ts b/packages/ui-codemods/lib/renameGetComputedStyleToGetCSSStyleDeclaration.ts
