fix: ensure unique classNames for pseudo classes & elems

Dwlad90 · Nov 4, 2024 · cb6cf70 · cb6cf70
1 parent 0aca03f
commit cb6cf70
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 48 deletions.
diff --git a/crates/stylex-shared/src/shared/transformers/tests/stylex_create_test.rs b/crates/stylex-shared/src/shared/transformers/tests/stylex_create_test.rs
@@ -791,31 +791,31 @@ mod stylex_create {
           "default",
           &[
             ("::before_color", "x16oeupf"),
-            (":hover_::before_color", "xeb2lg0 x18ezmze x14o3fp0"),
+            (":hover_::before_color", "xzzpreb x1gobd9t x1lvqgcc"),
           ],
         )],
         &[(
           "default",
           &[
+            ("x16oeupf", (".x16oeupf::before{color:red}", 8000.0)),
             (
-              "x14o3fp0",
-              (".x14o3fp0:hover::before:active{color:yellow}", 8300.0),
+              "x1gobd9t",
+              (".x1gobd9t:hover::before:hover{color:green}", 8260.0),
             ),
-            ("x16oeupf", (".x16oeupf::before{color:red}", 8000.0)),
             (
-              "x18ezmze",
-              (".x18ezmze:hover::before:hover{color:green}", 8260.0),
+              "x1lvqgcc",
+              (".x1lvqgcc:hover::before:active{color:yellow}", 8300.0),
             ),
-            ("xeb2lg0", (".xeb2lg0:hover::before{color:blue}", 8130.0)),
+            ("xzzpreb", (".xzzpreb:hover::before{color:blue}", 8130.0)),
           ],
         )],
         &[(
           "default",
           &[
-            ("x14o3fp0", &[":hover", "::before", ":active", "color"]),
             ("x16oeupf", &["::before", "color"]),
-            ("x18ezmze", &[":hover", "::before", ":hover", "color"]),
-            ("xeb2lg0", &[":hover", "::before", "default", "color"]),
+            ("x1gobd9t", &[":hover", "::before", ":hover", "color"]),
+            ("x1lvqgcc", &[":hover", "::before", ":active", "color"]),
+            ("xzzpreb", &[":hover", "::before", "default", "color"]),
           ],
         )],
       );

diff --git a/crates/stylex-shared/src/shared/utils/core/convert_style_to_class_name.rs b/crates/stylex-shared/src/shared/utils/core/convert_style_to_class_name.rs
@@ -8,6 +8,7 @@ use crate::shared::{
   utils::{
     common::create_hash,
     css::common::{generate_rule, transform_value_cached},
+    pre_rule::{sort_at_rules, sort_pseudos},
   },
 };
 
@@ -27,16 +28,18 @@ pub(crate) fn convert_style_to_class_name(
     kebab_case(key)
   };
 
-  let sorted_pseudos = &mut pseudos.to_vec();
-  sorted_pseudos.sort();
+  let unsorted_pseudos = &mut pseudos.to_vec();
+  let sorted_pseudos = sort_pseudos(unsorted_pseudos);
 
-  let sorted_at_rules = &mut at_rules.to_vec();
-  sorted_at_rules.sort();
+  let unsorted_at_rules = &mut at_rules.to_vec();
+  let sorted_at_rules = sort_at_rules(unsorted_at_rules);
 
   let at_rule_hash_string = sorted_at_rules.join("");
   let pseudo_hash_string = sorted_pseudos.join("");
 
   let modifier_hash_string = if at_rule_hash_string.is_empty() && pseudo_hash_string.is_empty() {
+    // NOTE: 'null' is used to keep existing hashes stable.
+    // This should be removed in a future version.
     "null".to_string()
   } else {
     // TODO: set correct order when will be answer from the Meta team

diff --git a/crates/stylex-shared/src/shared/utils/core/tests/convert_to_class_name_test.rs b/crates/stylex-shared/src/shared/utils/core/tests/convert_to_class_name_test.rs
@@ -1,7 +1,10 @@
 #[cfg(test)]
 mod convert_style_to_class_name {
   use crate::shared::{
-    structures::{pre_rule::PreRuleValue, state_manager::StateManager, stylex_options::StyleResolution, stylex_state_options::StyleXStateOptions},
+    structures::{
+      pre_rule::PreRuleValue, state_manager::StateManager, stylex_options::StyleResolution,
+      stylex_state_options::StyleXStateOptions,
+    },
     utils::core::convert_style_to_class_name::convert_style_to_class_name,
   };
   fn convert(styles: (&str, &PreRuleValue)) -> String {

diff --git a/...te_call_pseudo_elements.rs/transforms_pseudo_elements_sandwiched_within_pseudo_classes.js b/...te_call_pseudo_elements.rs/transforms_pseudo_elements_sandwiched_within_pseudo_classes.js
@@ -1,15 +1,15 @@
-//__stylex_metadata_start__[{"class_name":"x16oeupf","style":{"rtl":null,"ltr":".x16oeupf::before{color:red}"},"priority":8000},{"class_name":"xeb2lg0","style":{"rtl":null,"ltr":".xeb2lg0:hover::before{color:blue}"},"priority":8130},{"class_name":"x18ezmze","style":{"rtl":null,"ltr":".x18ezmze:hover::before:hover{color:green}"},"priority":8260},{"class_name":"xnj3kot","style":{"rtl":null,"ltr":".xnj3kot:hover::before:active{color:purple}"},"priority":8300}]__stylex_metadata_end__
+//__stylex_metadata_start__[{"class_name":"x16oeupf","style":{"rtl":null,"ltr":".x16oeupf::before{color:red}"},"priority":8000},{"class_name":"xzzpreb","style":{"rtl":null,"ltr":".xzzpreb:hover::before{color:blue}"},"priority":8130},{"class_name":"x1gobd9t","style":{"rtl":null,"ltr":".x1gobd9t:hover::before:hover{color:green}"},"priority":8260},{"class_name":"xs8jp5","style":{"rtl":null,"ltr":".xs8jp5:hover::before:active{color:purple}"},"priority":8300}]__stylex_metadata_end__
 import _inject from "@stylexjs/stylex/lib/stylex-inject";
 var _inject2 = _inject;
 import stylex from 'stylex';
 _inject2(".x16oeupf::before{color:red}", 8000);
-_inject2(".xeb2lg0:hover::before{color:blue}", 8130);
-_inject2(".x18ezmze:hover::before:hover{color:green}", 8260);
-_inject2(".xnj3kot:hover::before:active{color:purple}", 8300);
+_inject2(".xzzpreb:hover::before{color:blue}", 8130);
+_inject2(".x1gobd9t:hover::before:hover{color:green}", 8260);
+_inject2(".xs8jp5:hover::before:active{color:purple}", 8300);
 export const styles = {
     foo: {
         "::before_color": "x16oeupf",
-        ":hover_::before_color": "xeb2lg0 x18ezmze xnj3kot",
+        ":hover_::before_color": "xzzpreb x1gobd9t xs8jp5",
         $$css: true
     }
 };
diff --git a/..._create_call_pseudo_elements.rs/transforms_pseudo_elements_within_legeacy_pseudo_class.js b/..._create_call_pseudo_elements.rs/transforms_pseudo_elements_within_legeacy_pseudo_class.js
@@ -1,13 +1,13 @@
-//__stylex_metadata_start__[{"class_name":"x16oeupf","style":{"rtl":null,"ltr":".x16oeupf::before{color:red}"},"priority":8000},{"class_name":"xeb2lg0","style":{"rtl":null,"ltr":".xeb2lg0:hover::before{color:blue}"},"priority":8130}]__stylex_metadata_end__
+//__stylex_metadata_start__[{"class_name":"x16oeupf","style":{"rtl":null,"ltr":".x16oeupf::before{color:red}"},"priority":8000},{"class_name":"xzzpreb","style":{"rtl":null,"ltr":".xzzpreb:hover::before{color:blue}"},"priority":8130}]__stylex_metadata_end__
 import _inject from "@stylexjs/stylex/lib/stylex-inject";
 var _inject2 = _inject;
 import stylex from 'stylex';
 _inject2(".x16oeupf::before{color:red}", 8000);
-_inject2(".xeb2lg0:hover::before{color:blue}", 8130);
+_inject2(".xzzpreb:hover::before{color:blue}", 8130);
 export const styles = {
     foo: {
         "::before_color": "x16oeupf",
-        ":hover_::before_color": "xeb2lg0",
+        ":hover_::before_color": "xzzpreb",
         $$css: true
     }
 }
diff --git a/crates/stylex-test-parser/output/__tests__/babel-plugin/stylex-transform-create-test.js b/crates/stylex-test-parser/output/__tests__/babel-plugin/stylex-transform-create-test.js
@@ -659,11 +659,11 @@ describe('@stylexjs/babel-plugin', ()=>{
           var _inject2 = _inject;
           import stylex from 'stylex';
           _inject2(".x16oeupf::before{color:red}", 8000);
-          _inject2(".xeb2lg0:hover::before{color:blue}", 8130);
+          _inject2(".xzzpreb:hover::before{color:blue}", 8130);
           export const styles = {
             foo: {
               "::before_color": "x16oeupf",
-              ":hover_::before_color": "xeb2lg0",
+              ":hover_::before_color": "xzzpreb",
               $$css: true
             }
           };"
@@ -693,13 +693,13 @@ describe('@stylexjs/babel-plugin', ()=>{
           var _inject2 = _inject;
           import stylex from 'stylex';
           _inject2(".x16oeupf::before{color:red}", 8000);
-          _inject2(".xeb2lg0:hover::before{color:blue}", 8130);
-          _inject2(".x18ezmze:hover::before:hover{color:green}", 8260);
-          _inject2(".xnj3kot:hover::before:active{color:purple}", 8300);
+          _inject2(".xzzpreb:hover::before{color:blue}", 8130);
+          _inject2(".x1gobd9t:hover::before:hover{color:green}", 8260);
+          _inject2(".xs8jp5:hover::before:active{color:purple}", 8300);
           export const styles = {
             foo: {
               "::before_color": "x16oeupf",
-              ":hover_::before_color": "xeb2lg0 x18ezmze xnj3kot",
+              ":hover_::before_color": "xzzpreb x1gobd9t xs8jp5",
               $$css: true
             }
           };"

diff --git a/crates/stylex-test-parser/output/__tests__/shared/stylex-create-test.js b/crates/stylex-test-parser/output/__tests__/shared/stylex-create-test.js
@@ -584,50 +584,50 @@ describe('stylex-create-test', ()=>{
           "default": {
             "$$css": true,
             "::before_color": "x16oeupf",
-            ":hover_::before_color": "xeb2lg0 x18ezmze x14o3fp0",
+            ":hover_::before_color": "xzzpreb x1gobd9t x1lvqgcc",
           },
         },
         {
-          "x14o3fp0": {
-            "ltr": ".x14o3fp0:hover::before:active{color:yellow}",
-            "priority": 8300,
-            "rtl": null,
-          },
           "x16oeupf": {
             "ltr": ".x16oeupf::before{color:red}",
             "priority": 8000,
             "rtl": null,
           },
-          "x18ezmze": {
-            "ltr": ".x18ezmze:hover::before:hover{color:green}",
+          "x1gobd9t": {
+            "ltr": ".x1gobd9t:hover::before:hover{color:green}",
             "priority": 8260,
             "rtl": null,
           },
-          "xeb2lg0": {
-            "ltr": ".xeb2lg0:hover::before{color:blue}",
+          "x1lvqgcc": {
+            "ltr": ".x1lvqgcc:hover::before:active{color:yellow}",
+            "priority": 8300,
+            "rtl": null,
+          },
+          "xzzpreb": {
+            "ltr": ".xzzpreb:hover::before{color:blue}",
             "priority": 8130,
             "rtl": null,
           },
         },
         {
           "default": {
-            "x14o3fp0": [
-              ":hover",
+            "x16oeupf": [
               "::before",
-              ":active",
               "color",
             ],
-            "x16oeupf": [
+            "x1gobd9t": [
+              ":hover",
               "::before",
+              ":hover",
               "color",
             ],
-            "x18ezmze": [
+            "x1lvqgcc": [
               ":hover",
               "::before",
-              ":hover",
+              ":active",
               "color",
             ],
-            "xeb2lg0": [
+            "xzzpreb": [
               ":hover",
               "::before",
               "default",
@@ -638,7 +638,7 @@ describe('stylex-create-test', ()=>{
       ]
     `);
     });
-    test.skip('transforms nested pseudo-classes within pseudo elements', ()=>{
+    test('transforms nested pseudo-classes within pseudo elements', ()=>{
         const [beforeHover] = styleXCreate({
             default: {
                 '::before': {
@@ -661,7 +661,7 @@ describe('stylex-create-test', ()=>{
         const beforeHoverClass = beforeHover.default['::before_color'];
         const hoverBeforeClass = hoverBefore.default[':hover_::before_color'];
         expect(beforeHoverClass).toMatchInlineSnapshot('"xeb2lg0"');
-        expect(hoverBeforeClass).toMatchInlineSnapshot('"xeb2lg0"');
+        expect(hoverBeforeClass).toMatchInlineSnapshot('"xzzpreb"');
         expect(beforeHoverClass).not.toEqual(hoverBeforeClass);
     });
     test('transforms array values as fallbacks', ()=>{