Skip to content

Commit ee1f487

Browse files
Subrotostreamich
Subroto
authored and
streamich
committed
feat: add Emmet based abbreviations for css atoms (#215)
* Add Emmet addon to support emmet abbreviations * Add Emmet addon typings
1 parent 8cfd42c commit ee1f487

File tree

7 files changed

+1034
-0
lines changed

7 files changed

+1034
-0
lines changed

‎addon/__tests__/emmet/emmet.dev.test.js

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
'use strict';
2+
3+
process.env.NODE_ENV = 'development';
4+
5+
require('./emmet.test');

‎addon/__tests__/emmet/emmet.server.dev.test.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
/** @jest-environment node */
2+
3+
/* eslint-disable */
4+
'use strict';
5+
6+
process.env.NODE_ENV = 'development';
7+
8+
require('./emmet.test');

‎addon/__tests__/emmet/emmet.server.test.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/** @jest-environment node */
2+
3+
/* eslint-disable */
4+
'use strict';
5+
6+
require('./emmet.test');

‎addon/__tests__/emmet/emmet.test.js

+219
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,219 @@
1+
/* eslint-disable */
2+
'use strict';
3+
4+
var create = require('../../../').create;
5+
var emmet = require('../../emmet').emmet;
6+
var addonEmmet = require('../../emmet').addon;
7+
8+
it('emmet has proper key value pairs', function() {
9+
expect(emmet).toEqual({
10+
// Visual Formatting;
11+
pos: 'position',
12+
t: 'top',
13+
r: 'right',
14+
b: 'bottom',
15+
l: 'left',
16+
z: 'z-index',
17+
fl: 'float',
18+
cl: 'clear',
19+
d: 'display',
20+
v: 'visibility',
21+
ov: 'overflow',
22+
ovx: 'overflow-x',
23+
ovy: 'overflow-y',
24+
ovs: 'overflow-style',
25+
zm: 'zoom',
26+
cp: 'clip',
27+
rsz: 'resize',
28+
cur: 'cursor',
29+
// Margin & Padding;
30+
m: 'margin',
31+
mt: 'margin-top',
32+
mr: 'margin-right',
33+
mb: 'margin-bottom',
34+
ml: 'margin-left',
35+
p: 'padding',
36+
pt: 'padding-top',
37+
pr: 'padding-right',
38+
pb: 'padding-bottom',
39+
pl: 'padding-left',
40+
// Box Sizing;
41+
bxz: 'box-sizing',
42+
bxsh: 'box-shadow',
43+
w: 'width',
44+
h: 'height',
45+
maw: 'max-width',
46+
mah: 'max-height',
47+
miw: 'min-width',
48+
mih: 'min-height',
49+
// Font;
50+
f: 'font',
51+
fw: 'font-weight',
52+
fs: 'font-style',
53+
fv: 'font-variant',
54+
fz: 'font-size',
55+
ff: 'font-family',
56+
fsm: 'font-smooth',
57+
fst: 'font-stretch',
58+
// Text;
59+
va: 'vertical-align',
60+
ta: 'text-align',
61+
td: 'text-decoration',
62+
te: 'text-emphasis',
63+
ti: 'text-indent',
64+
tj: 'text-justify',
65+
tt: 'text-transform',
66+
tsh: 'text-shadow',
67+
lh: 'line-height',
68+
lts: 'letter-spacing',
69+
whs: 'white-space',
70+
wob: 'word-break',
71+
wos: 'word-spacing',
72+
wow: 'word-wrap',
73+
// Background;
74+
bg: 'background',
75+
bgc: 'background-color',
76+
bgi: 'background-image',
77+
bgr: 'background-repeat',
78+
bga: 'background-attachment',
79+
bgp: 'background-position',
80+
bgpx: 'background-position-x',
81+
bgpy: 'background-position-y',
82+
bgcp: 'background-clip',
83+
bgo: 'background-origin',
84+
bgsz: 'background-size',
85+
// Color;
86+
c: 'color',
87+
op: 'opacity',
88+
// Generated Content;
89+
ct: 'content',
90+
q: 'quotes',
91+
coi: 'counter-increment',
92+
cor: 'counter-reset',
93+
// Outline;
94+
ol: 'outline',
95+
olo: 'outline-offset',
96+
olw: 'outline-width',
97+
ols: 'outline-style',
98+
olc: 'outline-color',
99+
// Tables;
100+
tbl: 'table-layout',
101+
cps: 'caption-side',
102+
ec: 'empty-cells',
103+
// Border;
104+
bd: 'border',
105+
bdcl: 'border-collapse',
106+
bdc: 'border-color',
107+
bdi: 'border-image',
108+
bds: 'border-style',
109+
bdw: 'border-width',
110+
bdt: 'border-top',
111+
bdtw: 'border-top-width',
112+
bdts: 'border-top-style',
113+
bdtc: 'border-top-color',
114+
bdr: 'border-right',
115+
bdrw: 'border-right-width',
116+
bdrst: 'border-right-style',
117+
bdrc: 'border-right-color',
118+
bdb: 'border-bottom',
119+
bdbw: 'border-bottom-width',
120+
bdbs: 'border-bottom-style',
121+
bdbc: 'border-bottom-color',
122+
bdl: 'border-left',
123+
bdlw: 'border-left-width',
124+
bdls: 'border-left-style',
125+
bdlc: 'border-left-color',
126+
bdrs: 'border-radius',
127+
bdtlrs: 'border-top-left-radius',
128+
bdtrrs: 'border-top-right-radius',
129+
bdbrrs: 'border-bottom-right-radius',
130+
bdblrs: 'border-bottom-left-radius',
131+
// Lists;
132+
lis: 'list-style',
133+
lisp: 'list-style-position',
134+
list: 'list-style-type',
135+
lisi: 'list-style-image',
136+
// Flexbox Parent/Child Properties;
137+
ac: 'align-content',
138+
ai: 'align-items',
139+
as: 'align-self',
140+
jc: 'justify-content',
141+
fx: 'flex',
142+
fxb: 'flex-basis',
143+
fxd: 'flex-direction',
144+
fxf: 'flex-flow',
145+
fxg: 'flex-grow',
146+
fxs: 'flex-shrink',
147+
fxw: 'flex-wrap',
148+
ord: 'order',
149+
// CSS Grid Layout;
150+
colm: 'columns',
151+
colmc: 'column-count',
152+
colmf: 'column-fill',
153+
colmg: 'column-gap',
154+
colmr: 'column-rule',
155+
colmrc: 'column-rule-color',
156+
colmrs: 'column-rule-style',
157+
colmrw: 'column-rule-width',
158+
colms: 'column-span',
159+
colmw: 'column-width',
160+
// CSS Transitions;
161+
trf: 'transform',
162+
trfo: 'transform-origin',
163+
trfs: 'transform-style',
164+
trs: 'transition',
165+
trsde: 'transition-delay',
166+
trsdu: 'transition-duration',
167+
trsp: 'transition-property',
168+
trstf: 'transition-timing-function',
169+
// Others;
170+
bfv: 'backface-visibility',
171+
tov: 'text-overflow',
172+
mar: 'max-resolution',
173+
mir: 'min-resolution',
174+
ori: 'orientation',
175+
us: 'user-select',
176+
});
177+
});
178+
179+
function createNano(config) {
180+
var nano = create(config);
181+
addonEmmet(nano);
182+
return nano;
183+
}
184+
185+
describe('emmet', function() {
186+
it('installs without crashing', function() {
187+
var nano = createNano();
188+
});
189+
190+
it('passes through standard properties', function() {
191+
var nano = createNano();
192+
193+
nano.putRaw = jest.fn();
194+
195+
nano.put('.foo', {
196+
color: 'red',
197+
});
198+
199+
expect(nano.putRaw.mock.calls[0][0].includes('color:red')).toBeTruthy();
200+
});
201+
202+
it('expands the abbreviations', function() {
203+
var nano = createNano();
204+
205+
nano.putRaw = jest.fn();
206+
207+
nano.put('.bar', {
208+
c: 'blue',
209+
ta: 'center',
210+
ord: '1',
211+
mah: '200px',
212+
});
213+
214+
expect(nano.putRaw.mock.calls[0][0].includes('color:blue')).toBeTruthy();
215+
expect(nano.putRaw.mock.calls[0][0].includes('text-align:center')).toBeTruthy();
216+
expect(nano.putRaw.mock.calls[0][0].includes('order:1')).toBeTruthy();
217+
expect(nano.putRaw.mock.calls[0][0].includes('max-height:200px')).toBeTruthy();
218+
});
219+
});

0 commit comments

Comments
 (0)