[eslint-plugin] Add transform-media-query rule and soft validation config

packages/@stylexjs/babel-plugin/__tests__/validation-stylex-create-test.js

@@ -591,6 +591,78 @@ describe('@stylexjs/babel-plugin', () => {
         }).toThrow(messages.INVALID_PSEUDO_OR_AT_RULE);
       });
 
+      test('soft validation: invalid media query does not throw with softMediaQueryValidation enabled', () => {
+        const consoleWarnSpy = jest
+          .spyOn(console, 'warn')
+          .mockImplementation(() => {});
+
+        expect(() => {
+          transform(
+            `
+            import * as stylex from '@stylexjs/stylex';
+            const styles = stylex.create({
+              root: {
+                'color': {
+                  '@media not ((not (min-width: 400px))': 'blue'
+                },
+              },
+            });
+          `,
+            { enableMediaQueryOrder: true, softMediaQueryValidation: true },
+          );
+        }).not.toThrow();
+
+        expect(consoleWarnSpy).toHaveBeenCalledWith(
+          expect.stringContaining('Invalid media query syntax'),
+        );
+
+        consoleWarnSpy.mockRestore();
+      });
+
+      test('soft validation: invalid media query still throws without softMediaQueryValidation', () => {
+        expect(() => {
+          transform(
+            `
+            import * as stylex from '@stylexjs/stylex';
+            const styles = stylex.create({
+              root: {
+                'color': {
+                  '@media not ((not (min-width: 400px))': 'blue'
+                },
+              },
+            });
+          `,
+            { enableMediaQueryOrder: true, softMediaQueryValidation: false },
+          );
+        }).toThrow(messages.INVALID_MEDIA_QUERY_SYNTAX);
+      });
+
+      test('soft validation: valid media query does not warn', () => {
+        const consoleWarnSpy = jest
+          .spyOn(console, 'warn')
+          .mockImplementation(() => {});
+
+        expect(() => {
+          transform(
+            `
+            import * as stylex from '@stylexjs/stylex';
+            const styles = stylex.create({
+              root: {
+                'color': {
+                  '@media (min-width: 768px)': 'blue'
+                },
+              },
+            });
+          `,
+            { enableMediaQueryOrder: true, softMediaQueryValidation: true },
+          );
+        }).not.toThrow();
+
+        expect(consoleWarnSpy).not.toHaveBeenCalled();
+
+        consoleWarnSpy.mockRestore();
+      });
+
       test('valid object value: key is "default"', () => {
         expect(() => {
           transform(`

packages/@stylexjs/babel-plugin/src/shared/common-types.js

@@ -53,6 +53,7 @@ export type StyleXOptions = $ReadOnly<{
   enableDevClassNames?: ?boolean,
   enableFontSizePxToRem?: ?boolean,
   enableMediaQueryOrder?: ?boolean,
+  softMediaQueryValidation?: ?boolean,
   enableLegacyValueFlipping?: ?boolean,
   enableLogicalStylesPolyfill?: ?boolean,
   enableLTRRTLComments?: ?boolean,

packages/@stylexjs/babel-plugin/src/shared/preprocess-rules/flatten-raw-style-obj.js

@@ -31,7 +31,17 @@ export function flattenRawStyleObject(
       ? lastMediaQueryWinsTransform(style)
       : style;
   } catch (error) {
-    throw new Error(messages.INVALID_MEDIA_QUERY_SYNTAX);
+    if (options.softMediaQueryValidation) {
+      console.warn(
+        `StyleX: ${messages.INVALID_MEDIA_QUERY_SYNTAX}\n` +
+          'Media query order will not be respected. ' +
+          'This could be due to invalid media query syntax or unsupported edge cases in style-value-parser.\n' +
+          `Error: ${error.message || error}`,
+      );
+      processedStyle = style;
+    } else {
+      throw new Error(messages.INVALID_MEDIA_QUERY_SYNTAX);
+    }
   }
   return _flattenRawStyleObject(processedStyle, [], options);
 }

packages/@stylexjs/babel-plugin/src/shared/utils/default-options.js

@@ -18,6 +18,7 @@ export const defaultOptions: StyleXOptions = {
   enableDebugDataProp: true,
   enableFontSizePxToRem: false,
   enableMediaQueryOrder: false,
+  softMediaQueryValidation: false,
   enableLegacyValueFlipping: false,
   enableLogicalStylesPolyfill: false,
   enableLTRRTLComments: false,

packages/@stylexjs/babel-plugin/src/utils/state-manager.js

@@ -97,6 +97,7 @@ export type StyleXOptions = $ReadOnly<{
   enableDevClassNames?: boolean,
   enableInlinedConditionalMerge?: boolean,
   enableMediaQueryOrder?: boolean,
+  softMediaQueryValidation?: boolean,
   enableLegacyValueFlipping?: boolean,
   enableLogicalStylesPolyfill?: boolean,
   enableLTRRTLComments?: boolean,
@@ -254,6 +255,14 @@ export default class StateManager {
         'options.enableMediaQueryOrder',
       );
 
+    const softMediaQueryValidation: StyleXStateOptions['softMediaQueryValidation'] =
+      z.logAndDefault(
+        z.boolean(),
+        options.softMediaQueryValidation ?? false,
+        false,
+        'options.softMediaQueryValidation',
+      );
+
     const enableLegacyValueFlipping: StyleXStateOptions['enableLegacyValueFlipping'] =
       z.logAndDefault(
         z.boolean(),
@@ -388,6 +397,7 @@ export default class StateManager {
       enableInlinedConditionalMerge,
       enableMinifiedKeys,
       enableMediaQueryOrder,
+      softMediaQueryValidation,
       enableLegacyValueFlipping,
       enableLogicalStylesPolyfill,
       enableLTRRTLComments,

packages/@stylexjs/eslint-plugin/__tests__/stylex-transform-media-queries-test.js

@@ -0,0 +1,83 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+jest.disableAutomock();
+
+const { RuleTester: ESLintTester } = require('eslint');
+const rule = require('../src/stylex-transform-media-queries');
+
+const eslintTester = new ESLintTester({
+  parser: require.resolve('hermes-eslint'),
+  parserOptions: {
+    ecmaVersion: 6,
+    sourceType: 'module',
+  },
+});
+
+eslintTester.run('stylex-transform-media-queries', rule.default, {
+  valid: [
+    {
+      code: `
+      import * as stylex from '@stylexjs/stylex';
+      const styles = stylex.create({
+        main: {
+          color: 'red',
+        },
+      })
+    `,
+    },
+    {
+      code: `
+      import * as stylex from '@stylexjs/stylex';
+      const styles = stylex.create({
+        main: {
+          color: {
+            default: 'yellow',
+            '@media (min-width: 768px)': 'blue',
+            '@media (min-width: 1024px)': 'green',
+          },
+        },
+      })
+    `,
+    },
+    {
+      code: `
+      import * as stylex from '@stylexjs/stylex';
+      const styles = stylex.create({
+        main: {
+          color: {
+            '@media (max-width: 768px)': 'red',
+            default: 'blue',
+          },
+        },
+      })
+    `,
+    },
+  ],
+  invalid: [
+    {
+      code: `
+      import * as stylex from '@stylexjs/stylex';
+      const styles = stylex.create({
+        main: {
+          color: {
+            '@media not ((not (min-width: 400px))': 'blue',
+          },
+        },
+      })
+    `,
+      errors: [
+        {
+          message:
+            /Media query order may not be respected\. Invalid media query syntax or unsupported edge cases in style-value-parser\. Error:/,
+        },
+      ],
+    },
+  ],
+});

packages/@stylexjs/eslint-plugin/package.json

@@ -18,7 +18,8 @@
   "dependencies": {
     "css-shorthand-expand": "^1.2.0",
     "micromatch": "^4.0.5",
-    "postcss-value-parser": "^4.2.0"
+    "postcss-value-parser": "^4.2.0",
+    "style-value-parser": "*"
   },
   "files": [
     "flow_modules/*",

packages/@stylexjs/eslint-plugin/src/index.js

@@ -15,6 +15,7 @@ import noUnused from './stylex-no-unused';
 import sortKeys from './stylex-sort-keys';
 import validShorthands from './stylex-valid-shorthands';
 import validStyles from './stylex-valid-styles';
+import transformMediaQueries from './stylex-transform-media-queries';
 
 const rules: {
   'enforce-extension': typeof enforceExtension,
@@ -25,6 +26,7 @@ const rules: {
   'sort-keys': typeof sortKeys,
   'valid-shorthands': typeof validShorthands,
   'valid-styles': typeof validStyles,
+  'transform-media-queries': typeof transformMediaQueries,
 } = {
   'enforce-extension': enforceExtension,
   'no-legacy-contextual-styles': noLegacyContextualStyles,
@@ -34,6 +36,7 @@ const rules: {
   'sort-keys': sortKeys,
   'valid-shorthands': validShorthands,
   'valid-styles': validStyles,
+  'transform-media-queries': transformMediaQueries,
 };
 
 export { rules };