Skip to content

Commit 98f6cd1

Browse files
tujoworkertujoworker
authored
fix: enhance handling for comments after value (#14)
1 parent 97f1a78 commit 98f6cd1

16 files changed

Lines changed: 102 additions & 64 deletions

‎examples/examples.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ body {
99
--spacing-xx-large: 3.5rem;
1010
--spacing-xx-large: 8px;
1111

12+
--font-size-xx-large: 3rem; // 48px
13+
--font-size-xx-large: 48px; // 3rem
14+
1215
margin-top: 1rem;
1316
margin-bottom: 16px;
1417
margin-left: calc(var(--spacing-small) + 8rem);

‎examples/examples.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,6 @@ const Component = styled.div`
99
top: calc(var(--spacing-medium) + var(--spacing-small));
1010
padding-top: var(--spacing-x-small);
1111
12-
${calc('small', 'large')}
13-
${calc('small large')}
12+
margin-bottom: ${calc('small', 'large')};
13+
margin-bottom: ${calc('small large')};
1414
`

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
"displayName": "DNB Eufemia Tools",
44
"description": "DNB Eufemia Design System Extension",
55
"categories": [],
6-
"version": "1.3.0",
6+
"version": "1.3.1",
77
"publisher": "dnbexperience",
88
"author": "Tobias Høegh <tobias.hoegh@dnb.no>",
99
"license": "SEE LICENSE IN LICENSE",

‎src/extension/annotation.ts‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -132,26 +132,30 @@ export class LineAnnotation implements Disposable {
132132
}
133133

134134
const values = line.match(
135-
/([.0-9]+(px|rem))|var\(--(.*)\)|calc\(['"\`](.*)\)/g
135+
// 1. Match px/rem values, but do skip support for comments, like // 3rem
136+
// 2. Match CSS var(--*)
137+
// 3. Match JS calc('*')
138+
/(?<!\/\/.*)([.0-9]+(px|rem))|var\(--(.*)\)|calc\(['"\`](.*)\)/g
136139
)
140+
// console.log('values', values)
137141

138142
if (!values) {
139143
return null
140144
}
141145

142146
const results = values
143147
.map((text) => {
144-
const rule = RULES.filter((w) =>
145-
w.hover?.hoverTest?.test(text)
146-
).map((h) => {
147-
if (typeof h.hover?.hoverCondition === 'function') {
148-
if (!h.hover.hoverCondition(line)) {
148+
const rule = RULES.filter((r) =>
149+
r.hover?.hoverTest?.test(text)
150+
).map((r) => {
151+
if (typeof r.hover?.hoverCondition === 'function') {
152+
if (!r.hover.hoverCondition(line)) {
149153
return null
150154
}
151155
}
152156

153-
if (typeof h.hover?.hoverHandler === 'function') {
154-
return h.hover.hoverHandler(text, line)
157+
if (typeof r.hover?.hoverHandler === 'function') {
158+
return r.hover.hoverHandler(text, line)
155159
}
156160
})
157161

‎src/extension/hover.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -39,22 +39,22 @@ export default class implements HoverProvider {
3939
return null
4040
}
4141

42-
let results = RULES.filter((w) => w?.hover?.hoverTest?.test(text))
43-
.map((rule) => {
44-
if (typeof rule.hover?.hoverCondition === 'function') {
45-
if (!rule.hover.hoverCondition(line)) {
42+
let results = RULES.filter((r) => r?.hover?.hoverTest?.test(text))
43+
.map((r) => {
44+
if (typeof r.hover?.hoverCondition === 'function') {
45+
if (!r.hover.hoverCondition(line)) {
4646
return null
4747
}
4848
}
4949

50-
if (typeof rule.hover?.hoverHandler === 'function') {
51-
return rule.hover.hoverHandler(text, line)
50+
if (typeof r.hover?.hoverHandler === 'function') {
51+
return r.hover.hoverHandler(text, line)
5252
}
5353
})
54-
.filter((h) => h !== null && h?.documentation)
54+
.filter((r) => r !== null && r?.documentation)
5555

5656
if (conf.hover === 'onlyMark') {
57-
results = results.filter((w) => !line.includes(`/* ${w?.type} */`))
57+
results = results.filter((r) => !line.includes(`/* ${r?.type} */`))
5858
}
5959

6060
if (results.length === 0) {

‎src/extension/types.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export type ConvertResult = {
9595

9696
export type HoverResult = {
9797
type: string
98-
documentation: string
9998
from: string
10099
to: string
100+
documentation?: string
101101
}

‎src/rules/__tests__/handleCalc.test.ts‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -157,11 +157,19 @@ describe('hover', () => {
157157
const result = rule.hover?.hoverHandler?.(text, line)
158158

159159
expect(result).toEqual({
160-
documentation: 'Converted from `6`',
161160
from: "calc('large', 'large', 'large')",
162161
to: '6rem (96px)',
163162
type: 'handleCalc',
164163
})
165164
})
165+
166+
it('should return null when invalid value was given', () => {
167+
const rule = handleCalc()
168+
const text = `calc('large small')`
169+
const line = `margin-top: ${text};`
170+
const result = rule.hover?.hoverHandler?.(text, line)
171+
172+
expect(result).toEqual(null)
173+
})
166174
})
167175
})

‎src/rules/__tests__/handleFontSize.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ describe('hover', () => {
181181
const result = rule.hover?.hoverHandler?.(text, line)
182182

183183
expect(result).toEqual({
184-
documentation: 'Converted from `3`',
184+
documentation: 'Equivalent to `3`',
185185
from: 'var(--font-size-xx-large)',
186186
to: '3rem (48px)',
187187
type: 'handleFontSize',

‎src/rules/__tests__/handleLineHeight.test.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ describe('hover', () => {
184184
const result = rule.hover?.hoverHandler?.(text, line)
185185

186186
expect(result).toEqual({
187-
documentation: 'Converted from `2.5`',
187+
documentation: 'Equivalent to `2.5`',
188188
from: 'var(--line-height-large)',
189189
to: '2.5rem (40px)',
190190
type: 'handleLineHeight',

‎src/rules/__tests__/handleSpacing.test.ts‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -158,17 +158,30 @@ describe('hover', () => {
158158
})
159159

160160
describe('hoverHandler', () => {
161-
it('should show many spacing types inside calc', () => {
161+
it('should summarize several spacing types inside calc', () => {
162162
const rule = handleSpacing()
163163
const text =
164-
'calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-xx-large))'
164+
'calc(var(--spacing-xx-large) + var(--spacing-medium) + var(--spacing-small))'
165165
const line = `margin-top: ${text};`
166166
const result = rule.hover?.hoverHandler?.(text, line)
167167

168168
expect(result).toEqual({
169-
documentation: 'Converted from `10.5`',
170-
from: 'calc(var(--spacing-xx-large) + var(--spacing-xx-large) + var(--spacing-xx-large))',
171-
to: '10.5rem (168px)',
169+
from: 'calc(var(--spacing-xx-large) + var(--spacing-medium) + var(--spacing-small))',
170+
to: '6rem (96px)',
171+
type: 'handleSpacing',
172+
})
173+
})
174+
175+
it('should summarize several spacing types inside calc', () => {
176+
const rule = handleSpacing()
177+
const text =
178+
'calc(var(--spacing-xx-large) - var(--spacing-medum) + var(--spacing-small))'
179+
const line = `margin-top: ${text};`
180+
const result = rule.hover?.hoverHandler?.(text, line)
181+
182+
expect(result).toEqual({
183+
from: 'calc(var(--spacing-xx-large) - var(--spacing-medum) + var(--spacing-small))',
184+
to: '4.5rem (72px)',
172185
type: 'handleSpacing',
173186
})
174187
})
@@ -180,7 +193,6 @@ describe('hover', () => {
180193
const result = rule.hover?.hoverHandler?.(text, line)
181194

182195
expect(result).toEqual({
183-
documentation: 'Converted from `3.5`',
184196
from: 'var(--spacing-xx-large)',
185197
to: '3.5rem (56px)',
186198
type: 'handleSpacing',

0 commit comments

Comments
 (0)