@kong/design-tokens 1.18.3-pr.613.acae02c.0 → 1.18.3-pr.613.cb30259.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 +62 -17
- 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 +4 -4
|
@@ -4,7 +4,7 @@ import { KONG_TOKEN_PREFIX, RULE_NAME_PREFIX } from '../../utilities/index.mjs'
|
|
|
4
4
|
const { ruleMessages, validateOptions, report } = stylelint.utils
|
|
5
5
|
const ruleName = `${RULE_NAME_PREFIX}/use-css-token`
|
|
6
6
|
const messages = ruleMessages(ruleName, {
|
|
7
|
-
expected: 'SCSS tokens must be used as fallback values in CSS custom properties. Use format: var(--kui-design-token, $kui-design-token)',
|
|
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
|
})
|
|
9
9
|
const meta = {
|
|
10
10
|
url: 'https://github.com/Kong/design-tokens/blob/main/stylelint-plugin/README.md',
|
|
@@ -33,11 +33,11 @@ const findAllTokenOccurrences = (value, token) => {
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
// Check if token at given position is properly wrapped in var()
|
|
36
|
+
// Enforces exact format: var(--token, $token) with exactly one space before comma
|
|
36
37
|
const isTokenProperlyWrapped = (value, tokenIndex, token, cssToken) => {
|
|
37
|
-
// Calculate exact positions based on enforced format: var(--
|
|
38
|
-
//
|
|
39
|
-
|
|
40
|
-
const charactersBack = cssToken.length + 7 // 6 + (cssToken.length - 2) + 3
|
|
38
|
+
// Calculate exact positions based on enforced format: var(--token, $token)
|
|
39
|
+
// var(-- = 6 chars, token name = cssToken.length - 2, , = 2 chars (comma + space)
|
|
40
|
+
const charactersBack = cssToken.length + 6 // 6 + (cssToken.length - 2) + 2
|
|
41
41
|
const charactersForward = token.length + 1 // token + )
|
|
42
42
|
|
|
43
43
|
const startIndex = tokenIndex - charactersBack
|
|
@@ -48,11 +48,11 @@ const isTokenProperlyWrapped = (value, tokenIndex, token, cssToken) => {
|
|
|
48
48
|
return false
|
|
49
49
|
}
|
|
50
50
|
|
|
51
|
-
// Extract the substring that should match the pattern
|
|
51
|
+
// Extract the substring that should match the exact pattern
|
|
52
52
|
const substring = value.substring(startIndex, endIndex)
|
|
53
53
|
|
|
54
|
-
// Check if it matches the
|
|
55
|
-
const expectedPattern = new RegExp(`^var\\(
|
|
54
|
+
// Check if it matches the exact pattern: var(--token, $token)
|
|
55
|
+
const expectedPattern = new RegExp(`^var\\(${cssToken}, ${token}\\)$`)
|
|
56
56
|
return expectedPattern.test(substring)
|
|
57
57
|
}
|
|
58
58
|
|
|
@@ -109,15 +109,50 @@ const ruleFunction = () => {
|
|
|
109
109
|
const tokenOccurrences = findAllTokenOccurrences(fixedValue, scssToken)
|
|
110
110
|
const properFormat = `var(${cssToken}, ${scssToken})`
|
|
111
111
|
|
|
112
|
-
tokenOccurrences.forEach((
|
|
112
|
+
tokenOccurrences.forEach((tokenIndex) => {
|
|
113
113
|
// Check if this occurrence is in proper format
|
|
114
|
-
if (!isTokenProperlyWrapped(fixedValue,
|
|
115
|
-
//
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
114
|
+
if (!isTokenProperlyWrapped(fixedValue, tokenIndex, scssToken, cssToken)) {
|
|
115
|
+
// Find the var() expression containing this token to replace the whole thing
|
|
116
|
+
const beforeToken = fixedValue.substring(0, tokenIndex)
|
|
117
|
+
const varStartIndex = beforeToken.lastIndexOf('var(')
|
|
118
|
+
|
|
119
|
+
if (varStartIndex === -1) {
|
|
120
|
+
// No var( found, just replace the token with proper format
|
|
121
|
+
replacements.push({
|
|
122
|
+
start: tokenIndex,
|
|
123
|
+
end: tokenIndex + scssToken.length,
|
|
124
|
+
replacement: properFormat,
|
|
125
|
+
})
|
|
126
|
+
return
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
// Find the matching closing parenthesis
|
|
130
|
+
let parenCount = 0
|
|
131
|
+
let searchIndex = varStartIndex
|
|
132
|
+
let varEndIndex = -1
|
|
133
|
+
|
|
134
|
+
while (searchIndex < fixedValue.length) {
|
|
135
|
+
const char = fixedValue[searchIndex]
|
|
136
|
+
if (char === '(') {
|
|
137
|
+
parenCount++
|
|
138
|
+
} else if (char === ')') {
|
|
139
|
+
parenCount--
|
|
140
|
+
if (parenCount === 0) {
|
|
141
|
+
varEndIndex = searchIndex
|
|
142
|
+
break
|
|
143
|
+
}
|
|
144
|
+
}
|
|
145
|
+
searchIndex++
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
if (varEndIndex !== -1) {
|
|
149
|
+
// Replace the entire var() expression
|
|
150
|
+
replacements.push({
|
|
151
|
+
start: varStartIndex,
|
|
152
|
+
end: varEndIndex + 1,
|
|
153
|
+
replacement: properFormat,
|
|
154
|
+
})
|
|
155
|
+
}
|
|
121
156
|
}
|
|
122
157
|
})
|
|
123
158
|
})
|
|
@@ -125,8 +160,18 @@ const ruleFunction = () => {
|
|
|
125
160
|
// Sort replacements by position (descending) to avoid offset issues
|
|
126
161
|
replacements.sort((a, b) => b.start - a.start)
|
|
127
162
|
|
|
163
|
+
// Remove duplicates (same start position)
|
|
164
|
+
const uniqueReplacements = []
|
|
165
|
+
const seenStarts = new Set()
|
|
166
|
+
replacements.forEach((replacement) => {
|
|
167
|
+
if (!seenStarts.has(replacement.start)) {
|
|
168
|
+
seenStarts.add(replacement.start)
|
|
169
|
+
uniqueReplacements.push(replacement)
|
|
170
|
+
}
|
|
171
|
+
})
|
|
172
|
+
|
|
128
173
|
// Apply replacements from end to start
|
|
129
|
-
|
|
174
|
+
uniqueReplacements.forEach(({ start, end, replacement }) => {
|
|
130
175
|
fixedValue = fixedValue.substring(0, start) + replacement + fixedValue.substring(end)
|
|
131
176
|
})
|
|
132
177
|
|
package/dist/tokens/js/index.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kong/design-tokens",
|
|
3
|
-
"version": "1.18.3-pr.613.
|
|
3
|
+
"version": "1.18.3-pr.613.cb30259.0",
|
|
4
4
|
"description": "Kong UI Design Tokens and style dictionary",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
@@ -53,8 +53,8 @@
|
|
|
53
53
|
"url": "https://github.com/Kong/design-tokens/issues"
|
|
54
54
|
},
|
|
55
55
|
"devDependencies": {
|
|
56
|
-
"@commitlint/cli": "^20.
|
|
57
|
-
"@commitlint/config-conventional": "^20.
|
|
56
|
+
"@commitlint/cli": "^20.3.0",
|
|
57
|
+
"@commitlint/config-conventional": "^20.3.0",
|
|
58
58
|
"@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
|
|
59
59
|
"@evilmartians/lefthook": "^2.0.13",
|
|
60
60
|
"@kong/eslint-config-kong-ui": "^1.6.0",
|
|
@@ -126,7 +126,7 @@
|
|
|
126
126
|
"jiraAppend": "]"
|
|
127
127
|
}
|
|
128
128
|
},
|
|
129
|
-
"packageManager": "pnpm@10.
|
|
129
|
+
"packageManager": "pnpm@10.27.0",
|
|
130
130
|
"engines": {
|
|
131
131
|
"node": ">=20.19.5",
|
|
132
132
|
"pnpm": ">=9.14.4 || >=10.1.0"
|