fix(eslint-plugin): lint @emotion/css like the build

.changepacks/changepack_log_eslint_emotion_css.json

@@ -0,0 +1 @@
+{"changes":{"packages/eslint-plugin/package.json":"Patch"},"note":"Lint `@emotion/css` like the build does: its `css`, `keyframes` and `injectGlobal` get the same rules as Devup UI's `css`, `keyframes` and `globalCss`, so a dynamic value the build rejects is reported in the editor too","date":"2026-11-15T00:00:00.000Z"}

packages/eslint-plugin/src/rules/css-utils-literal-only/__tests__/sources.test.ts

@@ -15,6 +15,7 @@ describe('css-utils-literal-only rule: libraries the build reads as Devup UI', (
   const styledComponents = `import styled, { css, keyframes, createGlobalStyle } from "styled-components";\n`
   const vanilla = `import { style, globalStyle, keyframes } from "@vanilla-extract/css";\n`
   const devup = `import { css, globalCss } from "@devup-ui/react";\n`
+  const emotionCss = `import { css, cx, injectGlobal } from "@emotion/css";\n`
   const error = { messageId: 'cssUtilsLiteralOnly' as const }
   const missing = (name: string) => ({
     messageId: 'missingGlobal' as const,
@@ -54,10 +55,9 @@ describe('css-utils-literal-only rule: libraries the build reads as Devup UI', (
         [vanilla, 'style({ color: "red" })'],
         [vanilla, 'globalStyle("body", { color: "red" })'],
         [devup, 'globalCss({ body: { color: "red" } })'],
-        [
-          `import { css } from "@emotion/css";\n`,
-          'css({ color: window.name })',
-        ],
+        [emotionCss, 'css({ color: "red" })'],
+        [emotionCss, 'injectGlobal({ body: { color: "red" } })'],
+        [emotionCss, 'cx(window.name)'],
         [`import { css } from "other";\n`, 'css({ color: window.name })'],
         [
           `import { jsx } from "@emotion/react";\n`,
@@ -115,6 +115,8 @@ describe('css-utils-literal-only rule: libraries the build reads as Devup UI', (
         [vanilla, 'let v = 1;\nglobalStyle("body", { color: v })'],
         [vanilla, 'let v = 1;\nkeyframes({ from: { opacity: v } })'],
         [devup, 'let v = 1;\nglobalCss({ body: { color: v } })'],
+        [emotionCss, 'css({ color: window.name })'],
+        [emotionCss, 'let v = 1;\ninjectGlobal({ body: { color: v } })'],
       ].map(([header, source]) => ({
         code: header + source,
         filename,

packages/eslint-plugin/src/utils/__tests__/import-sources.test.ts

@@ -72,7 +72,7 @@ describe('import sources', () => {
       'import styled, { css as e, createGlobalStyle } from "styled-components";',
       'import * as E from "@emotion/styled";',
       'import { style, globalStyle, other } from "@vanilla-extract/css";',
-      'import { css as skipped } from "@emotion/css";',
+      'import { css as f, cx, injectGlobal } from "@emotion/css";',
     ].join('\n'),
     'page.tsx',
     (storage) => {
@@ -90,6 +90,8 @@ describe('import sources', () => {
         E: 'styled',
         style: 'css',
         globalStyle: 'globalCss',
+        f: 'css',
+        injectGlobal: 'globalCss',
       })
     },
   )

packages/eslint-plugin/src/utils/__tests__/style-sources.test.ts

@@ -54,7 +54,7 @@ function elsewhere(source: string) {
   return [
     { code: `import { jsx } from "@emotion/react";\n${source}`, filename },
     { code: `import styled from "other-package";\n${source}`, filename },
-    { code: `import { css } from "@emotion/css";\n${source}`, filename },
+    { code: `import { cx } from "@emotion/css";\n${source}`, filename },
     { code: `${HEADERS.vanilla}${source}`, filename: 'src/styles.css.ts' },
     { code: `${HEADERS.devup}${source}`, filename: 'src/styles.css.js' },
   ]

packages/eslint-plugin/src/utils/import-storage.ts

@@ -12,6 +12,7 @@ const DEFAULT_IS_STYLED = new Set(['@emotion/styled', 'styled-components'])
 /** The packages whose named exports the build maps onto Devup UI's, as `DEFAULT_IMPORT_ALIASES` in `plugin-utils` lists them */
 const NAMED_ALIASES = new Set([
   '@emotion/react',
+  '@emotion/css',
   '@emotion/styled',
   'styled-components',
   '@vanilla-extract/css',
@@ -23,6 +24,8 @@ function devupEquivalent(source: string, imported: string): string | undefined {
     if (imported === 'style') return 'css'
     if (imported === 'globalStyle') return 'globalCss'
   }
+  if (source === '@emotion/css' && imported === 'injectGlobal')
+    return 'globalCss'
   switch (imported) {
     case 'css':
     case 'keyframes':