Ku6epXBOCTuK/easy-png-tools2
1
0
Fork 0
mirror of https://github.com/Ku6epXBOCTuK/easy-png-tools.git synced 2026-09-14 13:36:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: set root layout, rename css, fix links in lint rules \ etc

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-09-10 19:28:22 +05:00
parent b6318f03ab
commit e970b47720
16 changed files with 76 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/eslint-plugins/design-tokens/no-hardcoded-in-svelte.js
+2 -2
View File
@@ -37,9 +37,9 @@ export default {
hardcodedZIndex:
"Hardcoded z-index '{{value}}'. Use a var(--z-...) token.",
hardcodedBreakpoint:
"Hardcoded breakpoint '{{value}}' in @media. Use the @custom-media name instead: declare `@custom-media --bp-* (...)` in preview.css and write `@media (--bp-*)`.",
"Hardcoded breakpoint '{{value}}' in @media. Use the @custom-media name instead: declare `@custom-media --bp-* (...)` in app.css and write `@media (--bp-*)`.",
varInMedia:
"var() inside @media '{{value}}'. Custom properties do not resolve in media queries — declare `@custom-media --bp-* (...)` in preview.css and use `@media (--bp-*)`.",
"var() inside @media '{{value}}'. Custom properties do not resolve in media queries — declare `@custom-media --bp-* (...)` in app.css and use `@media (--bp-*)`.",
colorMix:
"color-mix() in component ({{value}}). Tokenize the result in the design CSS file.",
},
web/eslint-plugins/design-tokens/no-token-definition-in-svelte.js
+2 -2
View File
@@ -2,7 +2,7 @@
// A custom property may be DEFINED inside a component's <style> block, but its
// value must not introduce a design primitive: a raw color literal (hex/rgb/
// oklch/named) or an absolute size (px/rem/em). This keeps the design surface
// (colors/sizes) a single source of truth in preview.css, while still allowing
// (colors/sizes) a single source of truth in app.css, while still allowing
// local DERIVED variables built from tokens: var(--...), calc(), unitless
// ratios (--ratio: 1.5) — those are legitimate component-local state.
@@ -24,7 +24,7 @@ export default {
},
messages: {
tokenPrimitive:
"Custom property '{{prop}}' defines a primitive '{{value}}' in a component. Move it to preview.css or derive it from tokens via var()/calc().",
"Custom property '{{prop}}' defines a primitive '{{value}}' in a component. Move it to app.css or derive it from tokens via var()/calc().",
},
schema: [],
},
web/eslint-plugins/design-tokens/no-undefined-in-svelte.js
+4 -4
View File
@@ -1,6 +1,6 @@
// Rule: NO UNDEFINED CSS-TOKEN USAGE IN COMPONENTS.
// A var(--...) referenced in a Svelte <style> block must exist in the design
// token file (src/preview.css) or be a local override defined in the same
// token file (src/app.css) or be a local override defined in the same
// component. Catches typos and drop-in tokens that were never added to the
// "single source of truth".
@@ -16,7 +16,7 @@ const VAR_REF_RE = /var\(\s*(--[\w-]+)/g;
const definedCache = new Map();
function getDefinedTokens(cwd) {
const file = resolve(cwd, "src/preview.css");
const file = resolve(cwd, "src/app.css");
if (!existsSync(file)) return null;
if (definedCache.has(file)) return definedCache.get(file);
@@ -34,13 +34,13 @@ export default {
type: "problem",
docs: {
description:
"Disallow referencing a CSS variable that is not defined in preview.css (design token file) and not defined locally in the component.",
"Disallow referencing a CSS variable that is not defined in app.css (design token file) and not defined locally in the component.",
category: "Design tokens",
recommended: true,
},
messages: {
undefinedToken:
"CSS variable '{{token}}' is not defined in preview.css and not locally in this component.",
"CSS variable '{{token}}' is not defined in app.css and not locally in this component.",
},
schema: [],
},