@kong/design-tokens 1.18.3-pr.613.857d684.0 → 1.18.3-pr.613.a51766c.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/rules/use-css-token/index.mjs +37 -0
- 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
|
@@ -39,19 +39,46 @@ const isTokenProperlyWrapped = (value, tokenIndex, token, cssToken) => {
|
|
|
39
39
|
// Escape special regex characters in tokens (though they should only have letters/digits/hyphens)
|
|
40
40
|
const pattern = new RegExp(`var\\(${cssToken}, ${token}\\)`, 'g')
|
|
41
41
|
|
|
42
|
+
console.log(`[DEBUG] Checking token "${token}" at position ${tokenIndex}:`, {
|
|
43
|
+
token,
|
|
44
|
+
tokenIndex,
|
|
45
|
+
cssToken,
|
|
46
|
+
pattern: `var(${cssToken}, ${token})`,
|
|
47
|
+
valueContext: value.substring(Math.max(0, tokenIndex - 50), Math.min(value.length, tokenIndex + token.length + 50)),
|
|
48
|
+
})
|
|
49
|
+
|
|
42
50
|
// Find all matches
|
|
43
51
|
let match
|
|
52
|
+
const matches = []
|
|
44
53
|
while ((match = pattern.exec(value)) !== null) {
|
|
45
54
|
const matchStart = match.index
|
|
46
55
|
const matchEnd = matchStart + match[0].length
|
|
56
|
+
matches.push({
|
|
57
|
+
start: matchStart,
|
|
58
|
+
end: matchEnd,
|
|
59
|
+
match: match[0],
|
|
60
|
+
})
|
|
47
61
|
|
|
48
62
|
// Check if our token at tokenIndex is inside this match
|
|
49
63
|
const tokenEndIndex = tokenIndex + token.length
|
|
50
64
|
if (tokenIndex >= matchStart && tokenEndIndex <= matchEnd) {
|
|
65
|
+
console.log(`[DEBUG] Token "${token}" at ${tokenIndex} is properly wrapped in:`, {
|
|
66
|
+
match: match[0],
|
|
67
|
+
matchStart,
|
|
68
|
+
matchEnd,
|
|
69
|
+
tokenIndex,
|
|
70
|
+
tokenEndIndex,
|
|
71
|
+
})
|
|
51
72
|
return true
|
|
52
73
|
}
|
|
53
74
|
}
|
|
54
75
|
|
|
76
|
+
console.log(`[DEBUG] Token "${token}" at ${tokenIndex} is NOT properly wrapped. Found ${matches.length} pattern matches:`, {
|
|
77
|
+
matches,
|
|
78
|
+
tokenIndex,
|
|
79
|
+
tokenEndIndex: tokenIndex + token.length,
|
|
80
|
+
})
|
|
81
|
+
|
|
55
82
|
return false
|
|
56
83
|
}
|
|
57
84
|
|
|
@@ -66,6 +93,8 @@ const ruleFunction = () => {
|
|
|
66
93
|
postcssRoot.walkDecls((decl) => {
|
|
67
94
|
const declValue = decl.value
|
|
68
95
|
|
|
96
|
+
console.log(`[DEBUG] Checking declaration: ${decl.prop} = "${declValue}"`)
|
|
97
|
+
|
|
69
98
|
// Extract all SCSS tokens (starting with $kui-)
|
|
70
99
|
const scssTokenRegex = new RegExp(`\\$${KONG_TOKEN_PREFIX}[a-z0-9-]+`, 'g')
|
|
71
100
|
const scssTokens = declValue.match(scssTokenRegex)
|
|
@@ -78,6 +107,8 @@ const ruleFunction = () => {
|
|
|
78
107
|
// Get unique SCSS tokens
|
|
79
108
|
const uniqueScssTokens = Array.from(new Set(scssTokens))
|
|
80
109
|
|
|
110
|
+
console.log(`[DEBUG] Found ${uniqueScssTokens.length} unique SCSS tokens:`, uniqueScssTokens)
|
|
111
|
+
|
|
81
112
|
// Check if each SCSS token is properly wrapped in var()
|
|
82
113
|
// Pattern: var(--kui-token-name, $kui-token-name)
|
|
83
114
|
const improperlyUsedTokens = []
|
|
@@ -86,17 +117,23 @@ const ruleFunction = () => {
|
|
|
86
117
|
const cssToken = getCssToken(scssToken)
|
|
87
118
|
const tokenOccurrences = findAllTokenOccurrences(declValue, scssToken)
|
|
88
119
|
|
|
120
|
+
console.log(`[DEBUG] Checking token "${scssToken}" (CSS: "${cssToken}") at ${tokenOccurrences.length} occurrence(s):`, tokenOccurrences)
|
|
121
|
+
|
|
89
122
|
// Check each occurrence to see if it's properly wrapped
|
|
90
123
|
const hasImproperUsage = tokenOccurrences.some((tokenIndex) => {
|
|
91
124
|
return !isTokenProperlyWrapped(declValue, tokenIndex, scssToken, cssToken)
|
|
92
125
|
})
|
|
93
126
|
|
|
94
127
|
if (hasImproperUsage) {
|
|
128
|
+
console.log(`[DEBUG] Token "${scssToken}" has improper usage`)
|
|
95
129
|
improperlyUsedTokens.push(scssToken)
|
|
130
|
+
} else {
|
|
131
|
+
console.log(`[DEBUG] Token "${scssToken}" is properly used`)
|
|
96
132
|
}
|
|
97
133
|
})
|
|
98
134
|
|
|
99
135
|
if (improperlyUsedTokens.length > 0) {
|
|
136
|
+
console.log(`[DEBUG] Reporting ${improperlyUsedTokens.length} improperly used token(s):`, improperlyUsedTokens)
|
|
100
137
|
// Create fix function
|
|
101
138
|
const fix = () => {
|
|
102
139
|
let fixedValue = declValue
|
package/dist/tokens/js/index.mjs
CHANGED