chore 🔧: add sample CSS file for linting demo during development

README.md

@@ -224,7 +224,7 @@ 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 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 immediate plans to ensure compatibility if issues arise. Upcoming features will be prioritized.
 
 ### Upcoming Features
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antebudimir/eslint-plugin-vanilla-extract",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "ESLint plugin for enforcing CSS ordering in vanilla-extract styles",
   "author": "Ante Budimir",
   "license": "MIT",

src/css-sample/sample.css.ts

@@ -0,0 +1,585 @@
+import {
+  fontFace,
+  globalFontFace,
+  globalKeyframes,
+  globalStyle,
+  keyframes,
+  style,
+  styleVariants,
+} 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',
+    },
+  },
+});
+
+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")'],
+  fontWeight: '400 700',
+  fontStyle: 'normal',
+  fontStretch: 'normal',
+  fontDisplay: 'swap',
+  unicodeRange:
+    'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
+  ascentOverride: '90%',
+  descentOverride: '10%',
+  lineGapOverride: '10%',
+  sizeAdjust: '90%',
+  fontVariant: 'normal',
+  fontFeatureSettings: '"liga" 1',
+  fontVariationSettings: '"wght" 400',
+});
+
+globalFontFace('GlobalFont', {
+  // Comment to test that the linter doesn't remove it
+  src: ['url("/fonts/MyFont.woff2") format("woff2")', 'url("/fonts/MyFont.woff") format("woff")'],
+  fontWeight: '400 700',
+  fontStyle: 'normal',
+  fontStretch: 'normal',
+  fontDisplay: 'swap',
+  unicodeRange:
+    'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD',
+  ascentOverride: '90%',
+  descentOverride: '10%',
+  lineGapOverride: '10%',
+  sizeAdjust: '90%',
+  fontVariant: 'normal',
+  fontFeatureSettings: '"liga" 1',
+  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',
+  },
+});
+
+export const spinster = globalKeyframes('spin', {
+  // Comment to test that the linter doesn't remove it
+  from: {
+    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
+  to: {
+    // 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',
+  },
+});

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.0.0',
+    version: '1.0.1',
   },
   rules: {
     'alphabetical-order': alphabeticalOrderRule,