diff --git a/.npmignore b/.npmignore
deleted file mode 100644
index 5caad24..0000000
--- a/.npmignore
+++ /dev/null
@@ -1,2 +0,0 @@
-src/css-sample/
-src/**/*.test.ts
diff --git a/README.md b/README.md
index 172e818..9106d05 100644
--- a/README.md
+++ b/README.md
@@ -21,6 +21,7 @@ An ESLint plugin for enforcing CSS ordering in [vanilla-extract](https://github.
 
 - ESLint 9.0.0 or higher
 - Node.js 18.18.0 or higher
+- ESM (ECMAScript Modules) only
 
 ## Installation
 
@@ -37,6 +38,8 @@ pnpm add -D @antebudimir/eslint-plugin-vanilla-extract
 
 ## Usage
 
+**Note: This plugin is ESM-only.** It must be used with ESM configurations and can't be used with CommonJS `require()`.
+
 ### ESLint Flat Config (ESLint 9+)
 
 Create or update your `eslint.config.js` or `eslint.config.mjs` file:
@@ -225,12 +228,12 @@ The roadmap outlines the project's current status and future plans:
 
 ### Current Work
 
-- Compatibility testing to determine if the plugin works with ESLint v8. **Note**: There are no immediate plans to ensure compatibility if issues arise. Upcoming features will be prioritized.
+- Compatibility testing to determine if the plugin works with ESLint v8. **Note**: There are no plans to ensure compatibility if issues arise. Upcoming features will be prioritized.
 
 ### Upcoming Features
 
 - Begin work on test coverage.
-- Support for additional vanilla-extract APIs, including `fontFace`, `globalFontFace`, `globalKeyframes`, and `keyframes`.
+- Support for additional vanilla-extract APIs, including `fontFace`, `globalFontFace`.
 - Option to sort properties within user-defined concentric groups alphabetically instead of following the concentric order. **Note**: This feature will only be implemented if there's sufficient interest from the community.
 
 ## Contributing
diff --git a/package.json b/package.json
index 769e147..41cd597 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@antebudimir/eslint-plugin-vanilla-extract",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "ESLint plugin for enforcing CSS ordering in vanilla-extract styles",
   "author": "Ante Budimir",
   "license": "MIT",
@@ -37,7 +37,8 @@
   "files": [
     "dist",
     "LICENSE",
-    "README.md"
+    "README.md",
+    "!dist/css-sample/"
   ],
   "scripts": {
     "build": "tsc",
diff --git a/src/css-rules/shared-utils/order-strategy-visitor-creator.ts b/src/css-rules/shared-utils/order-strategy-visitor-creator.ts
index 781ecfd..0608cbb 100644
--- a/src/css-rules/shared-utils/order-strategy-visitor-creator.ts
+++ b/src/css-rules/shared-utils/order-strategy-visitor-creator.ts
@@ -59,15 +59,22 @@ export const createNodeVisitors = (
       }
 
       // Handle style-related functions
-      if (['style', 'styleVariants', 'createVar', 'createTheme', 'createThemeContract'].includes(node.callee.name)) {
+      if (
+        ['createThemeContract', 'createVar', 'createTheme', 'keyframes', 'style', 'styleVariants'].includes(
+          node.callee.name,
+        )
+      ) {
         if (node.arguments.length > 0) {
           const styleArg = node.arguments[0];
           processStyleNode(ruleContext, styleArg as TSESTree.Node, processProperty);
         }
       }
 
-      // Handle globalStyle function
-      if (node.callee.name === 'globalStyle' && node.arguments.length >= 2) {
+      // Handle global functions
+      if (
+        (node.callee.name === 'globalKeyframes' || node.callee.name === 'globalStyle') &&
+        node.arguments.length >= 2
+      ) {
         const styleArg = node.arguments[1];
         processStyleNode(ruleContext, styleArg as TSESTree.Node, processProperty);
       }
diff --git a/src/css-sample/sample.css.ts b/src/css-sample/sample.css.ts
index b12a4d9..4c4f707 100644
--- a/src/css-sample/sample.css.ts
+++ b/src/css-sample/sample.css.ts
@@ -9,447 +9,7 @@ import {
 } from '@vanilla-extract/css';
 import { recipe } from '@vanilla-extract/recipes';
 
-globalStyle('*, ::before, ::after', {
-  // Comment to test that the linter doesn't remove it
-  margin: '0',
-  fontSize: 'large',
-  border: 'Background',
-  borderRight: 'ActiveBorder',
-  borderLeft: 'ActiveBorder',
-  borderRadius: 'initial',
-  borderBottomLeftRadius: 'initial',
-  borderBottomRightRadius: 'initial',
-  boxSizing: 'inherit',
-  position: 'relative',
-  right: 'inherit',
-  display: 'flex',
-  gap: 'revert',
-  transform: 'none',
-  outline: 'none',
-  backgroundColor: 'initial',
-  cursor: 'pointer',
-  color: 'red',
-});
-
-export const item = style({
-  margin: '0',
-  fontSize: 'large',
-  border: 'Background',
-  borderRight: 'ActiveBorder',
-  borderLeft: 'ActiveBorder',
-  borderRadius: 'initial',
-  borderBottomLeftRadius: 'initial',
-  borderBottomRightRadius: 'initial',
-  boxSizing: 'inherit',
-  position: 'relative',
-  right: 'inherit',
-  display: 'flex',
-  gap: 'revert',
-  transform: 'none',
-  outline: 'none',
-  backgroundColor: 'initial',
-  cursor: 'pointer',
-  color: 'red',
-});
-
-const triggerBase = style({
-  // Comment to test that the linter doesn't remove it
-  margin: '0',
-  fontSize: 'large',
-  border: 'Background',
-  borderRight: 'ActiveBorder',
-  borderLeft: 'ActiveBorder',
-  borderRadius: 'initial',
-  borderBottomLeftRadius: 'initial',
-  borderBottomRightRadius: 'initial',
-  boxSizing: 'inherit',
-  position: 'relative',
-  right: 'inherit',
-  display: 'flex',
-  gap: 'revert',
-  transform: 'none',
-  outline: 'none',
-  backgroundColor: 'initial',
-  cursor: 'pointer',
-  color: 'red',
-
-  // Comment to test that the linter doesn't remove it
-  ':focus-visible': {
-    // Comment to test that the linter doesn't remove it
-    margin: '0',
-    fontSize: 'large',
-    border: 'Background',
-    borderRight: 'ActiveBorder',
-    borderLeft: 'ActiveBorder',
-    borderRadius: 'initial',
-    borderBottomLeftRadius: 'initial',
-    borderBottomRightRadius: 'initial',
-    boxShadow: 'none',
-    boxSizing: 'inherit',
-    position: 'relative',
-    right: 'inherit',
-    display: 'flex',
-    gap: 'revert',
-    transform: 'none',
-    outline: 'none',
-    backgroundColor: 'initial',
-    cursor: 'pointer',
-    color: 'red',
-  },
-});
-
-export const selectButtonVariants = styleVariants({
-  // Comment to test that the linter doesn't remove it
-  bordered: {
-    // Comment to test that the linter doesn't remove it
-    margin: '0',
-    fontSize: 'large',
-    border: 'Background',
-    borderRight: 'ActiveBorder',
-    borderLeft: 'ActiveBorder',
-    borderRadius: 'initial',
-    borderBottomLeftRadius: 'initial',
-    borderBottomRightRadius: 'initial',
-    boxSizing: 'inherit',
-    position: 'relative',
-    right: 'inherit',
-    display: 'flex',
-    gap: 'revert',
-    transform: 'none',
-    outline: 'none',
-    backgroundColor: 'initial',
-    cursor: 'pointer',
-    color: 'red',
-  },
-
-  borderless: {
-    margin: '0',
-    fontSize: 'large',
-    border: 'Background',
-    borderRight: 'ActiveBorder',
-    borderLeft: 'ActiveBorder',
-    borderRadius: 'initial',
-    borderBottomLeftRadius: 'initial',
-    borderBottomRightRadius: 'initial',
-    boxShadow: 'none',
-    boxSizing: 'inherit',
-    position: 'relative',
-    right: 'inherit',
-    display: 'flex',
-    gap: 'revert',
-    transform: 'none',
-    outline: 'none',
-    backgroundColor: 'initial',
-    cursor: 'pointer',
-    color: 'red',
-  },
-});
-
-export const trigger = recipe({
-  // Comment to test that the linter doesn't remove it
-  base: triggerBase,
-  // Comment to test that the linter doesn't remove it
-  variants: {
-    // Comment to test that the linter doesn't remove it
-    isOpen: {
-      false: {
-        margin: '0',
-        fontSize: 'large',
-        border: 'Background',
-        borderRight: 'ActiveBorder',
-        borderLeft: 'ActiveBorder',
-        borderRadius: 'initial',
-        borderBottomLeftRadius: 'initial',
-        borderBottomRightRadius: 'initial',
-        boxShadow: 'none',
-        boxSizing: 'inherit',
-        position: 'relative',
-        right: 'inherit',
-        display: 'flex',
-        gap: 'revert',
-        transform: 'none',
-        outline: 'none',
-        backgroundColor: 'initial',
-        cursor: 'pointer',
-        color: 'red',
-
-        // Comment to test that the linter doesn't remove it
-        ':hover': {
-          margin: '0',
-          fontSize: 'large',
-          border: 'Background',
-          borderRight: 'ActiveBorder',
-          borderLeft: 'ActiveBorder',
-          borderRadius: 'initial',
-          borderBottomLeftRadius: 'initial',
-          borderBottomRightRadius: 'initial',
-          boxShadow: 'none',
-          boxSizing: 'inherit',
-          position: 'relative',
-          right: 'inherit',
-          display: 'flex',
-          gap: 'revert',
-          transform: 'none',
-          outline: 'none',
-          backgroundColor: 'initial',
-          cursor: 'pointer',
-          color: 'red',
-        },
-      },
-
-      // Comment to test that the linter doesn't remove it
-      true: {
-        // Comment to test that the linter doesn't remove it
-        margin: '0',
-        fontSize: 'large',
-        border: 'Background',
-        borderRight: 'ActiveBorder',
-        borderLeft: 'ActiveBorder',
-        borderRadius: 'initial',
-        borderBottomLeftRadius: 'initial',
-        borderBottomRightRadius: 'initial',
-        boxShadow: 'none',
-        boxSizing: 'inherit',
-        position: 'relative',
-        right: 'inherit',
-        display: 'flex',
-        gap: 'revert',
-        transform: 'none',
-        outline: 'none',
-        backgroundColor: 'initial',
-        cursor: 'pointer',
-        color: 'red',
-
-        // Comment to test that the linter doesn't remove it
-        ':hover': {
-          // Comment to test that the linter doesn't remove it
-          margin: '0',
-          fontSize: 'large',
-          border: 'Background',
-          borderRight: 'ActiveBorder',
-          borderLeft: 'ActiveBorder',
-          borderRadius: 'initial',
-          borderBottomLeftRadius: 'initial',
-          borderBottomRightRadius: 'initial',
-          boxShadow: 'none',
-          boxSizing: 'inherit',
-          position: 'relative',
-          right: 'inherit',
-          display: 'flex',
-          gap: 'revert',
-          transform: 'none',
-          outline: 'none',
-          backgroundColor: 'initial',
-          cursor: 'pointer',
-          color: 'red',
-        },
-      },
-    },
-  },
-});
-
-const accordionContentBase = style([
-  // Comment to test that the linter doesn't remove it
-  {
-    // Comment to test that the linter doesn't remove it
-    margin: '0',
-    fontSize: 'large',
-    border: 'Background',
-    borderRight: 'ActiveBorder',
-    borderLeft: 'ActiveBorder',
-    borderRadius: 'initial',
-    borderBottomLeftRadius: 'initial',
-    borderBottomRightRadius: 'initial',
-    boxShadow: 'none',
-    boxSizing: 'inherit',
-    position: 'relative',
-    right: 'inherit',
-    display: 'flex',
-    gap: 'revert',
-    transform: 'none',
-    outline: 'none',
-    backgroundColor: 'initial',
-    cursor: 'pointer',
-    color: 'red',
-
-    // Comment to test that the linter doesn't remove it
-    '@supports': {
-      '(hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none)': {
-        // Comment to test that the linter doesn't remove it
-        margin: '0',
-        fontSize: 'large',
-        border: 'Background',
-        borderRight: 'ActiveBorder',
-        borderLeft: 'ActiveBorder',
-        borderRadius: 'initial',
-        borderBottomLeftRadius: 'initial',
-        borderBottomRightRadius: 'initial',
-        boxShadow: 'none',
-        boxSizing: 'inherit',
-        position: 'relative',
-        right: 'inherit',
-        display: 'flex',
-        gap: 'revert',
-        transform: 'none',
-        outline: 'none',
-        backgroundColor: 'initial',
-        cursor: 'pointer',
-        color: 'red',
-      },
-    },
-  },
-]);
-
-export const accordionContent = recipe({
-  // Comment to test that the linter doesn't remove it
-  base: accordionContentBase,
-  // Comment to test that the linter doesn't remove it
-  variants: {
-    // Comment to test that the linter doesn't remove it
-    isOpen: {
-      // Comment to test that the linter doesn't remove it
-      false: {
-        // Comment to test that the linter doesn't remove it
-        margin: '0',
-        fontSize: 'large',
-        border: 'Background',
-        borderRight: 'ActiveBorder',
-        borderLeft: 'ActiveBorder',
-        borderRadius: 'initial',
-        borderBottomLeftRadius: 'initial',
-        borderBottomRightRadius: 'initial',
-        boxShadow: 'none',
-        boxSizing: 'inherit',
-        position: 'relative',
-        right: 'inherit',
-        display: 'flex',
-        gap: 'revert',
-        transform: 'none',
-        outline: 'none',
-        backgroundColor: 'initial',
-        cursor: 'pointer',
-        color: 'red',
-      },
-
-      true: {
-        margin: '0',
-        fontSize: 'large',
-        border: 'Background',
-        borderRight: 'ActiveBorder',
-        borderLeft: 'ActiveBorder',
-        borderRadius: 'initial',
-        borderBottomLeftRadius: 'initial',
-        borderBottomRightRadius: 'initial',
-        boxShadow: 'none',
-        boxSizing: 'inherit',
-        position: 'relative',
-        right: 'inherit',
-        display: 'flex',
-        gap: 'revert',
-        transform: 'none',
-        outline: 'none',
-        backgroundColor: 'initial',
-        cursor: 'pointer',
-        color: 'red',
-
-        // Comment to test that the linter doesn't remove it
-        ':focus-visible': {
-          // Comment to test that the linter doesn't remove it
-          margin: '0',
-          fontSize: 'large',
-          border: 'Background',
-          borderRight: 'ActiveBorder',
-          borderLeft: 'ActiveBorder',
-          borderRadius: 'initial',
-          borderBottomLeftRadius: 'initial',
-          borderBottomRightRadius: 'initial',
-          boxShadow: 'none',
-          boxSizing: 'inherit',
-          position: 'relative',
-          right: 'inherit',
-          display: 'flex',
-          gap: 'revert',
-          transform: 'none',
-          outline: 'none',
-          backgroundColor: 'initial',
-          cursor: 'pointer',
-          color: 'red',
-        },
-      },
-    },
-  },
-});
-
-export const clearAllFiltersButton = style({
-  margin: '0',
-  fontSize: 'large',
-  border: 'Background',
-  borderRight: 'ActiveBorder',
-  borderLeft: 'ActiveBorder',
-  borderRadius: 'initial',
-  borderBottomLeftRadius: 'initial',
-  borderBottomRightRadius: 'initial',
-  boxShadow: 'none',
-  boxSizing: 'inherit',
-  position: 'relative',
-  right: 'inherit',
-  display: 'flex',
-  gap: 'revert',
-  transform: 'none',
-  outline: 'none',
-  backgroundColor: 'initial',
-  cursor: 'pointer',
-  color: 'red',
-
-  ':hover': {
-    margin: '0',
-    fontSize: 'large',
-    border: 'Background',
-    borderRight: 'ActiveBorder',
-    borderLeft: 'ActiveBorder',
-    borderRadius: 'initial',
-    borderBottomLeftRadius: 'initial',
-    borderBottomRightRadius: 'initial',
-    boxShadow: 'none',
-    boxSizing: 'inherit',
-    position: 'relative',
-    right: 'inherit',
-    display: 'flex',
-    gap: 'revert',
-    transform: 'none',
-    outline: 'none',
-    backgroundColor: 'initial',
-    cursor: 'pointer',
-    color: 'red',
-  },
-
-  selectors: {
-    // Comment to test that the linter doesn't remove it
-    '&[data-pressed]': {
-      // Comment to test that the linter doesn't remove it
-      margin: '0',
-      fontSize: 'large',
-      border: 'Background',
-      borderRight: 'ActiveBorder',
-      borderLeft: 'ActiveBorder',
-      borderRadius: 'initial',
-      borderBottomLeftRadius: 'initial',
-      borderBottomRightRadius: 'initial',
-      boxShadow: 'none',
-      boxSizing: 'inherit',
-      position: 'relative',
-      right: 'inherit',
-      display: 'flex',
-      gap: 'revert',
-      transform: 'none',
-      outline: 'none',
-      backgroundColor: 'initial',
-      cursor: 'pointer',
-      color: 'red',
-    },
-  },
-});
-
+// fontFaces
 export const theFont = fontFace({
   // Comment to test that the linter doesn't remove it
   src: ['url("/fonts/MyFont.woff2") format("woff2")', 'url("/fonts/MyFont.woff") format("woff")'],
@@ -486,100 +46,389 @@ globalFontFace('GlobalFont', {
   fontVariationSettings: '"wght" 400',
 });
 
-export const starter = keyframes({
-  // Comment to test that the linter doesn't remove it
-  '0%': {
-    backgroundColor: 'initial',
-    border: 'Background',
-    borderBottomLeftRadius: 'initial',
-    borderBottomRightRadius: 'initial',
-    borderLeft: 'ActiveBorder',
-    borderRadius: 'initial',
-    borderRight: 'ActiveBorder',
-    boxShadow: 'none',
-    boxSizing: 'inherit',
-    color: 'red',
-    cursor: 'pointer',
-    display: 'flex',
-    fontSize: 'large',
-    gap: 'revert',
-    margin: '0',
-    outline: 'none',
-    position: 'relative',
-    right: 'inherit',
-    transform: 'none',
-  },
-
-  // Comment to test that the linter doesn't remove it
-  '100%': {
-    // Comment to test that the linter doesn't remove it
-    backgroundColor: 'initial',
-    border: 'Background',
-    borderBottomLeftRadius: 'initial',
-    borderBottomRightRadius: 'initial',
-    borderLeft: 'ActiveBorder',
-    borderRadius: 'initial',
-    borderRight: 'ActiveBorder',
-    boxShadow: 'none',
-    boxSizing: 'inherit',
-    color: 'red',
-    cursor: 'pointer',
-    display: 'flex',
-    fontSize: 'large',
-    gap: 'revert',
-    margin: '0',
-    outline: 'none',
-    position: 'relative',
-    right: 'inherit',
-    transform: 'none',
-  },
-});
-
+// keyframes
 export const spinster = globalKeyframes('spin', {
   // Comment to test that the linter doesn't remove it
   from: {
-    backgroundColor: 'initial',
+    width: '100%',
+    margin: '0',
+    fontSize: 'large',
     border: 'Background',
-    borderBottomLeftRadius: 'initial',
-    borderBottomRightRadius: 'initial',
+    borderRight: 'ActiveBorder',
     borderLeft: 'ActiveBorder',
     borderRadius: 'initial',
-    borderRight: 'ActiveBorder',
+    borderBottomLeftRadius: 'initial',
+    borderBottomRightRadius: 'initial',
     boxShadow: 'none',
     boxSizing: 'inherit',
-    color: 'red',
-    cursor: 'pointer',
-    display: 'flex',
-    fontSize: 'large',
-    gap: 'revert',
-    margin: '0',
-    outline: 'none',
     position: 'relative',
     right: 'inherit',
+    display: 'flex',
+    gap: 'revert',
     transform: 'none',
+    outline: 'none',
+    backgroundColor: 'initial',
+    cursor: 'pointer',
+    color: 'red',
   },
 
   // Comment to test that the linter doesn't remove it
   to: {
     // Comment to test that the linter doesn't remove it
-    backgroundColor: 'initial',
+    width: '100%',
+    margin: '0',
+    fontSize: 'large',
     border: 'Background',
-    borderBottomLeftRadius: 'initial',
-    borderBottomRightRadius: 'initial',
+    borderRight: 'ActiveBorder',
     borderLeft: 'ActiveBorder',
     borderRadius: 'initial',
-    borderRight: 'ActiveBorder',
+    borderBottomLeftRadius: 'initial',
+    borderBottomRightRadius: 'initial',
     boxShadow: 'none',
     boxSizing: 'inherit',
-    color: 'red',
-    cursor: 'pointer',
-    display: 'flex',
-    fontSize: 'large',
-    gap: 'revert',
-    margin: '0',
-    outline: 'none',
     position: 'relative',
     right: 'inherit',
+    display: 'flex',
+    gap: 'revert',
     transform: 'none',
+    outline: 'none',
+    backgroundColor: 'initial',
+    cursor: 'pointer',
+    color: 'red',
+  },
+});
+
+export const starter = keyframes({
+  // Comment to test that the linter doesn't remove it
+  '0%': {
+    width: '100%',
+    margin: '0',
+    fontSize: 'large',
+    border: 'Background',
+    borderRight: 'ActiveBorder',
+    borderLeft: 'ActiveBorder',
+    borderRadius: 'initial',
+    borderBottomLeftRadius: 'initial',
+    borderBottomRightRadius: 'initial',
+    boxShadow: 'none',
+    boxSizing: 'inherit',
+    position: 'relative',
+    right: 'inherit',
+    display: 'flex',
+    gap: 'revert',
+    transform: 'none',
+    outline: 'none',
+    backgroundColor: 'initial',
+    cursor: 'pointer',
+    color: 'red',
+  },
+
+  // Comment to test that the linter doesn't remove it
+  '100%': {
+    // Comment to test that the linter doesn't remove it
+    width: '100%',
+    margin: '0',
+    fontSize: 'large',
+    border: 'Background',
+    borderRight: 'ActiveBorder',
+    borderLeft: 'ActiveBorder',
+    borderRadius: 'initial',
+    borderBottomLeftRadius: 'initial',
+    borderBottomRightRadius: 'initial',
+    boxShadow: 'none',
+    boxSizing: 'inherit',
+    position: 'relative',
+    right: 'inherit',
+    display: 'flex',
+    gap: 'revert',
+    transform: 'none',
+    outline: 'none',
+    backgroundColor: 'initial',
+    cursor: 'pointer',
+    color: 'red',
+  },
+});
+
+globalStyle('*, ::before, ::after', {
+  // Comment to test that the linter doesn't remove it
+  width: '100%',
+  margin: '0',
+  fontSize: 'large',
+  border: 'Background',
+  borderRight: 'ActiveBorder',
+  borderLeft: 'ActiveBorder',
+  borderRadius: 'initial',
+  borderBottomLeftRadius: 'initial',
+  borderBottomRightRadius: 'initial',
+  boxSizing: 'inherit',
+  position: 'relative',
+  right: 'inherit',
+  display: 'flex',
+  gap: 'revert',
+  transform: 'none',
+  outline: 'none',
+  backgroundColor: 'initial',
+  cursor: 'pointer',
+  color: 'red',
+});
+
+// style with an array
+const accordionContentBase = style([
+  // Comment to test that the linter doesn't remove it
+  {
+    // Comment to test that the linter doesn't remove it
+    width: '100%',
+    margin: '0',
+    fontSize: 'large',
+    border: 'Background',
+    borderRight: 'ActiveBorder',
+    borderLeft: 'ActiveBorder',
+    borderRadius: 'initial',
+    borderBottomLeftRadius: 'initial',
+    borderBottomRightRadius: 'initial',
+    boxShadow: 'none',
+    boxSizing: 'inherit',
+    position: 'relative',
+    right: 'inherit',
+    display: 'flex',
+    gap: 'revert',
+    transform: 'none',
+    outline: 'none',
+    backgroundColor: 'initial',
+    cursor: 'pointer',
+    color: 'red',
+
+    // special selector to test that the linter doesn't remove it
+    '@supports': {
+      '(hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none)': {
+        // Comment to test that the linter doesn't remove it
+        width: '100%',
+        margin: '0',
+        fontSize: 'large',
+        border: 'Background',
+        borderRight: 'ActiveBorder',
+        borderLeft: 'ActiveBorder',
+        borderRadius: 'initial',
+        borderBottomLeftRadius: 'initial',
+        borderBottomRightRadius: 'initial',
+        boxShadow: 'none',
+        boxSizing: 'inherit',
+        position: 'relative',
+        right: 'inherit',
+        display: 'flex',
+        gap: 'revert',
+        transform: 'none',
+        outline: 'none',
+        backgroundColor: 'initial',
+        cursor: 'pointer',
+        color: 'red',
+      },
+    },
+  },
+]);
+
+export const accordionContent = recipe({
+  // Comment to test that the linter doesn't remove it
+  base: accordionContentBase,
+  // Comment to test that the linter doesn't remove it
+  variants: {
+    // Comment to test that the linter doesn't remove it
+    isOpen: {
+      // Comment to test that the linter doesn't remove it
+      false: {
+        // Comment to test that the linter doesn't remove it
+        width: '100%',
+        margin: '0',
+        fontSize: 'large',
+        border: 'Background',
+        borderRight: 'ActiveBorder',
+        borderLeft: 'ActiveBorder',
+        borderRadius: 'initial',
+        borderBottomLeftRadius: 'initial',
+        borderBottomRightRadius: 'initial',
+        boxShadow: 'none',
+        boxSizing: 'inherit',
+        position: 'relative',
+        right: 'inherit',
+        display: 'flex',
+        gap: 'revert',
+        transform: 'none',
+        outline: 'none',
+        backgroundColor: 'initial',
+        cursor: 'pointer',
+        color: 'red',
+      },
+
+      true: {
+        width: '100%',
+        margin: '0',
+        fontSize: 'large',
+        border: 'Background',
+        borderRight: 'ActiveBorder',
+        borderLeft: 'ActiveBorder',
+        borderRadius: 'initial',
+        borderBottomLeftRadius: 'initial',
+        borderBottomRightRadius: 'initial',
+        boxShadow: 'none',
+        boxSizing: 'inherit',
+        position: 'relative',
+        right: 'inherit',
+        display: 'flex',
+        gap: 'revert',
+        transform: 'none',
+        outline: 'none',
+        backgroundColor: 'initial',
+        cursor: 'pointer',
+        color: 'red',
+
+        // pseudo selector inside a variant
+        ':hover': {
+          // Comment to test that the linter doesn't remove it
+          width: '100%',
+          margin: '0',
+          fontSize: 'large',
+          border: 'Background',
+          borderRight: 'ActiveBorder',
+          borderLeft: 'ActiveBorder',
+          borderRadius: 'initial',
+          borderBottomLeftRadius: 'initial',
+          borderBottomRightRadius: 'initial',
+          boxShadow: 'none',
+          boxSizing: 'inherit',
+          position: 'relative',
+          right: 'inherit',
+          display: 'flex',
+          gap: 'revert',
+          transform: 'none',
+          outline: 'none',
+          backgroundColor: 'initial',
+          cursor: 'pointer',
+          color: 'red',
+        },
+      },
+    },
+  },
+});
+
+export const item = style({
+  width: '100%',
+  margin: '0',
+  fontSize: 'large',
+  border: 'Background',
+  borderRight: 'ActiveBorder',
+  borderLeft: 'ActiveBorder',
+  borderRadius: 'initial',
+  borderBottomLeftRadius: 'initial',
+  borderBottomRightRadius: 'initial',
+  boxSizing: 'inherit',
+  position: 'relative',
+  right: 'inherit',
+  display: 'flex',
+  gap: 'revert',
+  transform: 'none',
+  outline: 'none',
+  backgroundColor: 'initial',
+  cursor: 'pointer',
+  color: 'red',
+
+  // pseudo selector inside a style
+  ':focus-visible': {
+    // Comment to test that the linter doesn't remove it
+    width: '100%',
+    margin: '0',
+    fontSize: 'large',
+    border: 'Background',
+    borderRight: 'ActiveBorder',
+    borderLeft: 'ActiveBorder',
+    borderRadius: 'initial',
+    borderBottomLeftRadius: 'initial',
+    borderBottomRightRadius: 'initial',
+    boxShadow: 'none',
+    boxSizing: 'inherit',
+    position: 'relative',
+    right: 'inherit',
+    display: 'flex',
+    gap: 'revert',
+    transform: 'none',
+    outline: 'none',
+    backgroundColor: 'initial',
+    cursor: 'pointer',
+    color: 'red',
+  },
+
+  selectors: {
+    // Comment to test that the linter doesn't remove it
+    '&[data-pressed]': {
+      // Comment to test that the linter doesn't remove it
+      width: '100%',
+      margin: '0',
+      fontSize: 'large',
+      border: 'Background',
+      borderRight: 'ActiveBorder',
+      borderLeft: 'ActiveBorder',
+      borderRadius: 'initial',
+      borderBottomLeftRadius: 'initial',
+      borderBottomRightRadius: 'initial',
+      boxShadow: 'none',
+      boxSizing: 'inherit',
+      position: 'relative',
+      right: 'inherit',
+      display: 'flex',
+      gap: 'revert',
+      transform: 'none',
+      outline: 'none',
+      backgroundColor: 'initial',
+      cursor: 'pointer',
+      color: 'red',
+    },
+  },
+});
+
+export const selectButtonVariants = styleVariants({
+  // Comment to test that the linter doesn't remove it
+  bordered: {
+    // Comment to test that the linter doesn't remove it
+    width: '100%',
+    margin: '0',
+    fontSize: 'large',
+    border: 'Background',
+    borderRight: 'ActiveBorder',
+    borderLeft: 'ActiveBorder',
+    borderRadius: 'initial',
+    borderBottomLeftRadius: 'initial',
+    borderBottomRightRadius: 'initial',
+    boxSizing: 'inherit',
+    position: 'relative',
+    right: 'inherit',
+    display: 'flex',
+    gap: 'revert',
+    transform: 'none',
+    outline: 'none',
+    backgroundColor: 'initial',
+    cursor: 'pointer',
+    color: 'red',
+  },
+
+  borderless: {
+    width: '100%',
+    margin: '0',
+    fontSize: 'large',
+    border: 'Background',
+    borderRight: 'ActiveBorder',
+    borderLeft: 'ActiveBorder',
+    borderRadius: 'initial',
+    borderBottomLeftRadius: 'initial',
+    borderBottomRightRadius: 'initial',
+    boxShadow: 'none',
+    boxSizing: 'inherit',
+    position: 'relative',
+    right: 'inherit',
+    display: 'flex',
+    gap: 'revert',
+    transform: 'none',
+    outline: 'none',
+    backgroundColor: 'initial',
+    cursor: 'pointer',
+    color: 'red',
   },
 });
diff --git a/src/index.ts b/src/index.ts
index 25107bf..3cf2372 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,7 +5,7 @@ import customOrderRule from './css-rules/custom-order/rule-definition.js';
 export const vanillaExtract = {
   meta: {
     name: '@antebudimir/eslint-plugin-vanilla-extract',
-    version: '1.1.2',
+    version: '1.2.0',
   },
   rules: {
     'alphabetical-order': alphabeticalOrderRule,