@kong/design-tokens 1.18.3-pr.613.cb30259.0 → 1.18.3-pr.613.e565bb3.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 +54 -15
- 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
|
@@ -35,25 +35,54 @@ const findAllTokenOccurrences = (value, token) => {
|
|
|
35
35
|
// Check if token at given position is properly wrapped in var()
|
|
36
36
|
// Enforces exact format: var(--token, $token) with exactly one space before comma
|
|
37
37
|
const isTokenProperlyWrapped = (value, tokenIndex, token, cssToken) => {
|
|
38
|
-
//
|
|
39
|
-
//
|
|
40
|
-
const
|
|
41
|
-
const
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
38
|
+
// Use regex to find all var(--token, $token) patterns
|
|
39
|
+
// Escape $ in token since it's a special regex character
|
|
40
|
+
const escapedToken = token.replace(/\$/g, '\\$')
|
|
41
|
+
const pattern = new RegExp(`var\\(${cssToken}, ${escapedToken}\\)`, 'g')
|
|
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
|
+
// Find all matches
|
|
54
|
+
let match
|
|
55
|
+
const matches = []
|
|
56
|
+
while ((match = pattern.exec(value)) !== null) {
|
|
57
|
+
const matchStart = match.index
|
|
58
|
+
const matchEnd = matchStart + match[0].length
|
|
59
|
+
matches.push({
|
|
60
|
+
start: matchStart,
|
|
61
|
+
end: matchEnd,
|
|
62
|
+
match: match[0],
|
|
63
|
+
})
|
|
45
64
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
65
|
+
// Check if our token at tokenIndex is inside this match
|
|
66
|
+
const tokenEndIndex = tokenIndex + token.length
|
|
67
|
+
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
|
+
return true
|
|
76
|
+
}
|
|
49
77
|
}
|
|
50
78
|
|
|
51
|
-
|
|
52
|
-
|
|
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
|
+
})
|
|
53
84
|
|
|
54
|
-
|
|
55
|
-
const expectedPattern = new RegExp(`^var\\(${cssToken}, ${token}\\)$`)
|
|
56
|
-
return expectedPattern.test(substring)
|
|
85
|
+
return false
|
|
57
86
|
}
|
|
58
87
|
|
|
59
88
|
const ruleFunction = () => {
|
|
@@ -67,6 +96,8 @@ const ruleFunction = () => {
|
|
|
67
96
|
postcssRoot.walkDecls((decl) => {
|
|
68
97
|
const declValue = decl.value
|
|
69
98
|
|
|
99
|
+
console.log(`[DEBUG] Checking declaration: ${decl.prop} = "${declValue}"`)
|
|
100
|
+
|
|
70
101
|
// Extract all SCSS tokens (starting with $kui-)
|
|
71
102
|
const scssTokenRegex = new RegExp(`\\$${KONG_TOKEN_PREFIX}[a-z0-9-]+`, 'g')
|
|
72
103
|
const scssTokens = declValue.match(scssTokenRegex)
|
|
@@ -79,6 +110,8 @@ const ruleFunction = () => {
|
|
|
79
110
|
// Get unique SCSS tokens
|
|
80
111
|
const uniqueScssTokens = Array.from(new Set(scssTokens))
|
|
81
112
|
|
|
113
|
+
console.log(`[DEBUG] Found ${uniqueScssTokens.length} unique SCSS tokens:`, uniqueScssTokens)
|
|
114
|
+
|
|
82
115
|
// Check if each SCSS token is properly wrapped in var()
|
|
83
116
|
// Pattern: var(--kui-token-name, $kui-token-name)
|
|
84
117
|
const improperlyUsedTokens = []
|
|
@@ -87,17 +120,23 @@ const ruleFunction = () => {
|
|
|
87
120
|
const cssToken = getCssToken(scssToken)
|
|
88
121
|
const tokenOccurrences = findAllTokenOccurrences(declValue, scssToken)
|
|
89
122
|
|
|
123
|
+
console.log(`[DEBUG] Checking token "${scssToken}" (CSS: "${cssToken}") at ${tokenOccurrences.length} occurrence(s):`, tokenOccurrences)
|
|
124
|
+
|
|
90
125
|
// Check each occurrence to see if it's properly wrapped
|
|
91
126
|
const hasImproperUsage = tokenOccurrences.some((tokenIndex) => {
|
|
92
127
|
return !isTokenProperlyWrapped(declValue, tokenIndex, scssToken, cssToken)
|
|
93
128
|
})
|
|
94
129
|
|
|
95
130
|
if (hasImproperUsage) {
|
|
131
|
+
console.log(`[DEBUG] Token "${scssToken}" has improper usage`)
|
|
96
132
|
improperlyUsedTokens.push(scssToken)
|
|
133
|
+
} else {
|
|
134
|
+
console.log(`[DEBUG] Token "${scssToken}" is properly used`)
|
|
97
135
|
}
|
|
98
136
|
})
|
|
99
137
|
|
|
100
138
|
if (improperlyUsedTokens.length > 0) {
|
|
139
|
+
console.log(`[DEBUG] Reporting ${improperlyUsedTokens.length} improperly used token(s):`, improperlyUsedTokens)
|
|
101
140
|
// Create fix function
|
|
102
141
|
const fix = () => {
|
|
103
142
|
let fixedValue = declValue
|
package/dist/tokens/js/index.mjs
CHANGED