@kong/design-tokens 1.18.3-pr.613.51bd0cb.0 → 1.18.3-pr.613.acae02c.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 +23 -14
- 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
|
@@ -17,11 +17,6 @@ const getCssToken = (scssToken) => {
|
|
|
17
17
|
return `--${tokenName}`
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
// Create regex pattern to match var(--token, $token) format
|
|
21
|
-
const createProperUsagePattern = (cssToken, scssToken) => {
|
|
22
|
-
return new RegExp(`var\\(\\s*${cssToken}\\s*,\\s*${scssToken}\\s*\\)`)
|
|
23
|
-
}
|
|
24
|
-
|
|
25
20
|
// Find all occurrences of a token in a value
|
|
26
21
|
const findAllTokenOccurrences = (value, token) => {
|
|
27
22
|
const occurrences = []
|
|
@@ -38,11 +33,27 @@ const findAllTokenOccurrences = (value, token) => {
|
|
|
38
33
|
}
|
|
39
34
|
|
|
40
35
|
// Check if token at given position is properly wrapped in var()
|
|
41
|
-
const isTokenProperlyWrapped = (value, tokenIndex, token,
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
36
|
+
const isTokenProperlyWrapped = (value, tokenIndex, token, cssToken) => {
|
|
37
|
+
// Calculate exact positions based on enforced format: var(--css-token, $scss-token)
|
|
38
|
+
// Format breakdown: var(-- + token-name + , $ + scss-token + )
|
|
39
|
+
// var(-- = 6 chars, token-name = cssToken.length - 2, , $ = 3 chars
|
|
40
|
+
const charactersBack = cssToken.length + 7 // 6 + (cssToken.length - 2) + 3
|
|
41
|
+
const charactersForward = token.length + 1 // token + )
|
|
42
|
+
|
|
43
|
+
const startIndex = tokenIndex - charactersBack
|
|
44
|
+
const endIndex = tokenIndex + charactersForward
|
|
45
|
+
|
|
46
|
+
// Check bounds
|
|
47
|
+
if (startIndex < 0 || endIndex > value.length) {
|
|
48
|
+
return false
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
// Extract the substring that should match the pattern
|
|
52
|
+
const substring = value.substring(startIndex, endIndex)
|
|
53
|
+
|
|
54
|
+
// Check if it matches the expected pattern: var(--css-token, $scss-token)
|
|
55
|
+
const expectedPattern = new RegExp(`^var\\(\\s*${cssToken}\\s*,\\s*${token}\\s*\\)$`)
|
|
56
|
+
return expectedPattern.test(substring)
|
|
46
57
|
}
|
|
47
58
|
|
|
48
59
|
const ruleFunction = () => {
|
|
@@ -74,12 +85,11 @@ const ruleFunction = () => {
|
|
|
74
85
|
|
|
75
86
|
uniqueScssTokens.forEach((scssToken) => {
|
|
76
87
|
const cssToken = getCssToken(scssToken)
|
|
77
|
-
const properUsagePattern = createProperUsagePattern(cssToken, scssToken)
|
|
78
88
|
const tokenOccurrences = findAllTokenOccurrences(declValue, scssToken)
|
|
79
89
|
|
|
80
90
|
// Check each occurrence to see if it's properly wrapped
|
|
81
91
|
const hasImproperUsage = tokenOccurrences.some((tokenIndex) => {
|
|
82
|
-
return !isTokenProperlyWrapped(declValue, tokenIndex, scssToken,
|
|
92
|
+
return !isTokenProperlyWrapped(declValue, tokenIndex, scssToken, cssToken)
|
|
83
93
|
})
|
|
84
94
|
|
|
85
95
|
if (hasImproperUsage) {
|
|
@@ -96,13 +106,12 @@ const ruleFunction = () => {
|
|
|
96
106
|
// First, identify all positions that need to be replaced
|
|
97
107
|
improperlyUsedTokens.forEach((scssToken) => {
|
|
98
108
|
const cssToken = getCssToken(scssToken)
|
|
99
|
-
const properUsagePattern = createProperUsagePattern(cssToken, scssToken)
|
|
100
109
|
const tokenOccurrences = findAllTokenOccurrences(fixedValue, scssToken)
|
|
101
110
|
const properFormat = `var(${cssToken}, ${scssToken})`
|
|
102
111
|
|
|
103
112
|
tokenOccurrences.forEach((index) => {
|
|
104
113
|
// Check if this occurrence is in proper format
|
|
105
|
-
if (!isTokenProperlyWrapped(fixedValue, index, scssToken,
|
|
114
|
+
if (!isTokenProperlyWrapped(fixedValue, index, scssToken, cssToken)) {
|
|
106
115
|
// This occurrence needs to be replaced
|
|
107
116
|
replacements.push({
|
|
108
117
|
start: index,
|
package/dist/tokens/js/index.mjs
CHANGED