@kong/design-tokens 1.18.3-pr.613.e565bb3.0 → 1.18.3-pr.613.f4a145c.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/stylelint-plugin/index.mjs +2 -2
- package/dist/stylelint-plugin/rules/{use-css-token → token-var-usage}/index.mjs +3 -42
- package/dist/tokens/css/custom-properties.css +1 -1
- package/dist/tokens/js/cjs/index.d.ts +1 -1
- package/dist/tokens/js/cjs/index.js +1 -1
- package/dist/tokens/js/index.d.ts +1 -1
- package/dist/tokens/js/index.mjs +1 -1
- package/dist/tokens/less/variables.less +1 -1
- package/dist/tokens/scss/_map.scss +1 -1
- package/dist/tokens/scss/_variables.scss +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import useProperToken from './rules/use-proper-token/index.mjs'
|
|
2
|
-
import
|
|
2
|
+
import tokenVarUsage from './rules/token-var-usage/index.mjs'
|
|
3
3
|
|
|
4
|
-
export default [useProperToken,
|
|
4
|
+
export default [useProperToken, tokenVarUsage]
|
|
@@ -2,7 +2,7 @@ import stylelint from 'stylelint'
|
|
|
2
2
|
import { KONG_TOKEN_PREFIX, RULE_NAME_PREFIX } from '../../utilities/index.mjs'
|
|
3
3
|
|
|
4
4
|
const { ruleMessages, validateOptions, report } = stylelint.utils
|
|
5
|
-
const ruleName = `${RULE_NAME_PREFIX}/
|
|
5
|
+
const ruleName = `${RULE_NAME_PREFIX}/token-var-usage`
|
|
6
6
|
const messages = ruleMessages(ruleName, {
|
|
7
7
|
expected: 'SCSS tokens must be used as fallback values in CSS custom properties. Use format: var(--kui-design-token, $kui-design-token) with exactly one space before the comma and no other spaces.',
|
|
8
8
|
})
|
|
@@ -36,52 +36,23 @@ const findAllTokenOccurrences = (value, token) => {
|
|
|
36
36
|
// Enforces exact format: var(--token, $token) with exactly one space before comma
|
|
37
37
|
const isTokenProperlyWrapped = (value, tokenIndex, token, cssToken) => {
|
|
38
38
|
// Use regex to find all var(--token, $token) patterns
|
|
39
|
-
// Escape
|
|
40
|
-
const escapedToken = token.replace(
|
|
39
|
+
// Escape regex metacharacters in token so it is treated literally in the pattern
|
|
40
|
+
const escapedToken = token.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
|
|
41
41
|
const pattern = new RegExp(`var\\(${cssToken}, ${escapedToken}\\)`, 'g')
|
|
42
42
|
|
|
43
|
-
console.log(`[DEBUG] Checking token "${token}" at position ${tokenIndex}:`, {
|
|
44
|
-
token,
|
|
45
|
-
tokenIndex,
|
|
46
|
-
cssToken,
|
|
47
|
-
escapedToken,
|
|
48
|
-
pattern: `var(${cssToken}, ${escapedToken})`,
|
|
49
|
-
patternSource: pattern.source,
|
|
50
|
-
valueContext: value.substring(Math.max(0, tokenIndex - 50), Math.min(value.length, tokenIndex + token.length + 50)),
|
|
51
|
-
})
|
|
52
|
-
|
|
53
43
|
// Find all matches
|
|
54
44
|
let match
|
|
55
|
-
const matches = []
|
|
56
45
|
while ((match = pattern.exec(value)) !== null) {
|
|
57
46
|
const matchStart = match.index
|
|
58
47
|
const matchEnd = matchStart + match[0].length
|
|
59
|
-
matches.push({
|
|
60
|
-
start: matchStart,
|
|
61
|
-
end: matchEnd,
|
|
62
|
-
match: match[0],
|
|
63
|
-
})
|
|
64
48
|
|
|
65
49
|
// Check if our token at tokenIndex is inside this match
|
|
66
50
|
const tokenEndIndex = tokenIndex + token.length
|
|
67
51
|
if (tokenIndex >= matchStart && tokenEndIndex <= matchEnd) {
|
|
68
|
-
console.log(`[DEBUG] Token "${token}" at ${tokenIndex} is properly wrapped in:`, {
|
|
69
|
-
match: match[0],
|
|
70
|
-
matchStart,
|
|
71
|
-
matchEnd,
|
|
72
|
-
tokenIndex,
|
|
73
|
-
tokenEndIndex,
|
|
74
|
-
})
|
|
75
52
|
return true
|
|
76
53
|
}
|
|
77
54
|
}
|
|
78
55
|
|
|
79
|
-
console.log(`[DEBUG] Token "${token}" at ${tokenIndex} is NOT properly wrapped. Found ${matches.length} pattern matches:`, {
|
|
80
|
-
matches,
|
|
81
|
-
tokenIndex,
|
|
82
|
-
tokenEndIndex: tokenIndex + token.length,
|
|
83
|
-
})
|
|
84
|
-
|
|
85
56
|
return false
|
|
86
57
|
}
|
|
87
58
|
|
|
@@ -96,8 +67,6 @@ const ruleFunction = () => {
|
|
|
96
67
|
postcssRoot.walkDecls((decl) => {
|
|
97
68
|
const declValue = decl.value
|
|
98
69
|
|
|
99
|
-
console.log(`[DEBUG] Checking declaration: ${decl.prop} = "${declValue}"`)
|
|
100
|
-
|
|
101
70
|
// Extract all SCSS tokens (starting with $kui-)
|
|
102
71
|
const scssTokenRegex = new RegExp(`\\$${KONG_TOKEN_PREFIX}[a-z0-9-]+`, 'g')
|
|
103
72
|
const scssTokens = declValue.match(scssTokenRegex)
|
|
@@ -110,8 +79,6 @@ const ruleFunction = () => {
|
|
|
110
79
|
// Get unique SCSS tokens
|
|
111
80
|
const uniqueScssTokens = Array.from(new Set(scssTokens))
|
|
112
81
|
|
|
113
|
-
console.log(`[DEBUG] Found ${uniqueScssTokens.length} unique SCSS tokens:`, uniqueScssTokens)
|
|
114
|
-
|
|
115
82
|
// Check if each SCSS token is properly wrapped in var()
|
|
116
83
|
// Pattern: var(--kui-token-name, $kui-token-name)
|
|
117
84
|
const improperlyUsedTokens = []
|
|
@@ -120,23 +87,17 @@ const ruleFunction = () => {
|
|
|
120
87
|
const cssToken = getCssToken(scssToken)
|
|
121
88
|
const tokenOccurrences = findAllTokenOccurrences(declValue, scssToken)
|
|
122
89
|
|
|
123
|
-
console.log(`[DEBUG] Checking token "${scssToken}" (CSS: "${cssToken}") at ${tokenOccurrences.length} occurrence(s):`, tokenOccurrences)
|
|
124
|
-
|
|
125
90
|
// Check each occurrence to see if it's properly wrapped
|
|
126
91
|
const hasImproperUsage = tokenOccurrences.some((tokenIndex) => {
|
|
127
92
|
return !isTokenProperlyWrapped(declValue, tokenIndex, scssToken, cssToken)
|
|
128
93
|
})
|
|
129
94
|
|
|
130
95
|
if (hasImproperUsage) {
|
|
131
|
-
console.log(`[DEBUG] Token "${scssToken}" has improper usage`)
|
|
132
96
|
improperlyUsedTokens.push(scssToken)
|
|
133
|
-
} else {
|
|
134
|
-
console.log(`[DEBUG] Token "${scssToken}" is properly used`)
|
|
135
97
|
}
|
|
136
98
|
})
|
|
137
99
|
|
|
138
100
|
if (improperlyUsedTokens.length > 0) {
|
|
139
|
-
console.log(`[DEBUG] Reporting ${improperlyUsedTokens.length} improperly used token(s):`, improperlyUsedTokens)
|
|
140
101
|
// Create fix function
|
|
141
102
|
const fix = () => {
|
|
142
103
|
let fixedValue = declValue
|
package/dist/tokens/js/index.mjs
CHANGED