From 88a9d4382fe7b3982700557bb112e8dcf02696fe Mon Sep 17 00:00:00 2001 From: Ante Budimir Date: Tue, 4 Mar 2025 20:30:25 +0200 Subject: [PATCH] =?UTF-8?q?chore=20=F0=9F=94=A7:=20add=20sample=20CSS=20fi?= =?UTF-8?q?le=20for=20linting=20demo=20during=20development?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- package.json | 2 +- src/css-sample/sample.css.ts | 585 +++++++++++++++++++++++++++++++++++ src/index.ts | 2 +- 4 files changed, 588 insertions(+), 3 deletions(-) create mode 100644 src/css-sample/sample.css.ts diff --git a/README.md b/README.md index 5fe1827..efeef5f 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 69d5874..f69d7b9 100644 --- a/package.json +++ b/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", diff --git a/src/css-sample/sample.css.ts b/src/css-sample/sample.css.ts new file mode 100644 index 0000000..b12a4d9 --- /dev/null +++ b/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', + }, +}); diff --git a/src/index.ts b/src/index.ts index 0421ee4..44062cf 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.0.0', + version: '1.0.1', }, rules: { 'alphabetical-order': alphabeticalOrderRule,