328 lines
9.6 KiB
Plaintext
328 lines
9.6 KiB
Plaintext
import { parse } from '../parse';
|
|
|
|
describe('parse', () => {
|
|
it('regular', () => {
|
|
const out = parse(
|
|
{
|
|
display: 'value',
|
|
button: {
|
|
border: '0'
|
|
},
|
|
'&.nested': {
|
|
foo: '1px',
|
|
baz: 'scale(1), translate(1)'
|
|
}
|
|
},
|
|
'hush'
|
|
);
|
|
|
|
expect(out).toEqual(
|
|
[
|
|
'hush{display:value;}',
|
|
'hush button{border:0;}',
|
|
'hush.nested{foo:1px;baz:scale(1), translate(1);}'
|
|
].join('')
|
|
);
|
|
});
|
|
|
|
it('camelCase', () => {
|
|
const out = parse(
|
|
{
|
|
fooBarProperty: 'value',
|
|
button: {
|
|
webkitPressSomeButton: '0'
|
|
},
|
|
'&.nested': {
|
|
foo: '1px',
|
|
backgroundEffect: 'scale(1), translate(1)'
|
|
}
|
|
},
|
|
'hush'
|
|
);
|
|
|
|
expect(out).toEqual(
|
|
[
|
|
'hush{foo-bar-property:value;}',
|
|
'hush button{webkit-press-some-button:0;}',
|
|
'hush.nested{foo:1px;background-effect:scale(1), translate(1);}'
|
|
].join('')
|
|
);
|
|
});
|
|
|
|
it('keyframes', () => {
|
|
const out = parse(
|
|
{
|
|
'@keyframes superAnimation': {
|
|
'11.1%': {
|
|
opacity: '0.9999'
|
|
},
|
|
'111%': {
|
|
opacity: '1'
|
|
}
|
|
},
|
|
'@keyframes foo': {
|
|
to: {
|
|
baz: '1px',
|
|
foo: '1px'
|
|
}
|
|
},
|
|
'@keyframes complex': {
|
|
'from, 20%, 53%, 80%, to': {
|
|
transform: 'translate3d(0,0,0)'
|
|
},
|
|
'40%, 43%': {
|
|
transform: 'translate3d(0, -30px, 0)'
|
|
},
|
|
'70%': {
|
|
transform: 'translate3d(0, -15px, 0)'
|
|
},
|
|
'90%': {
|
|
transform: 'translate3d(0,-4px,0)'
|
|
}
|
|
}
|
|
},
|
|
'hush'
|
|
);
|
|
|
|
expect(out).toEqual(
|
|
[
|
|
'@keyframes superAnimation{11.1%{opacity:0.9999;}111%{opacity:1;}}',
|
|
'@keyframes foo{to{baz:1px;foo:1px;}}',
|
|
'@keyframes complex{from, 20%, 53%, 80%, to{transform:translate3d(0,0,0);}40%, 43%{transform:translate3d(0, -30px, 0);}70%{transform:translate3d(0, -15px, 0);}90%{transform:translate3d(0,-4px,0);}}'
|
|
].join('')
|
|
);
|
|
});
|
|
|
|
it('font-face', () => {
|
|
const out = parse(
|
|
{
|
|
'@font-face': {
|
|
'font-weight': 100
|
|
}
|
|
},
|
|
'FONTFACE'
|
|
);
|
|
|
|
expect(out).toEqual(['@font-face{font-weight:100;}'].join(''));
|
|
});
|
|
|
|
it('@media', () => {
|
|
const out = parse(
|
|
{
|
|
'@media any all (no-really-anything)': {
|
|
position: 'super-absolute'
|
|
}
|
|
},
|
|
'hush'
|
|
);
|
|
|
|
expect(out).toEqual(
|
|
['@media any all (no-really-anything){hush{position:super-absolute;}}'].join('')
|
|
);
|
|
});
|
|
|
|
it('@import', () => {
|
|
const out = parse(
|
|
{
|
|
'@import': "url('https://domain.com/path?1=s')"
|
|
},
|
|
'hush'
|
|
);
|
|
|
|
expect(out).toEqual(["@import url('https://domain.com/path?1=s');"].join(''));
|
|
});
|
|
|
|
it('cra', () => {
|
|
expect(
|
|
parse(
|
|
{
|
|
'@import': "url('path/to')",
|
|
'@font-face': {
|
|
'font-weight': 100
|
|
},
|
|
'text-align': 'center',
|
|
'.logo': {
|
|
animation: 'App-logo-spin infinite 20s linear',
|
|
height: '40vmin',
|
|
'pointer-events': 'none'
|
|
},
|
|
'.header': {
|
|
'background-color': '#282c34',
|
|
'min-height': '100vh',
|
|
display: 'flex',
|
|
'flex-direction': 'column',
|
|
'align-items': 'center',
|
|
'justify-content': 'center',
|
|
'font-size': 'calc(10px + 2vmin)',
|
|
color: 'white'
|
|
},
|
|
'.link': {
|
|
color: '#61dafb'
|
|
},
|
|
'@keyframes App-logo-spin': {
|
|
from: {
|
|
transform: 'rotate(0deg)'
|
|
},
|
|
to: {
|
|
transform: 'rotate(360deg)'
|
|
}
|
|
}
|
|
},
|
|
'App'
|
|
)
|
|
).toEqual(
|
|
[
|
|
"@import url('path/to');",
|
|
'App{text-align:center;}',
|
|
'@font-face{font-weight:100;}',
|
|
'App .logo{animation:App-logo-spin infinite 20s linear;height:40vmin;pointer-events:none;}',
|
|
'App .header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:white;}',
|
|
'App .link{color:#61dafb;}',
|
|
'@keyframes App-logo-spin{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}'
|
|
].join('')
|
|
);
|
|
});
|
|
|
|
it('@supports', () => {
|
|
expect(
|
|
parse(
|
|
{
|
|
'@supports (some: 1px)': {
|
|
'@media (s: 1)': {
|
|
display: 'flex'
|
|
}
|
|
},
|
|
'@supports': {
|
|
opacity: 1
|
|
}
|
|
},
|
|
'hush'
|
|
)
|
|
).toEqual(
|
|
[
|
|
'@supports (some: 1px){@media (s: 1){hush{display:flex;}}}',
|
|
'@supports{hush{opacity:1;}}'
|
|
].join('')
|
|
);
|
|
});
|
|
|
|
it('unwrapp', () => {
|
|
expect(
|
|
parse(
|
|
{
|
|
'--foo': 1,
|
|
opacity: 1,
|
|
'@supports': {
|
|
'--bar': 'none'
|
|
},
|
|
html: {
|
|
background: 'goober'
|
|
}
|
|
},
|
|
''
|
|
)
|
|
).toEqual(
|
|
['--foo:1;opacity:1;', '@supports{--bar:none;}', 'html{background:goober;}'].join('')
|
|
);
|
|
});
|
|
|
|
it('nested with multiple selector', () => {
|
|
const out = parse(
|
|
{
|
|
display: 'value',
|
|
'&:hover,&:focus': {
|
|
border: '0',
|
|
span: {
|
|
index: 'unset'
|
|
}
|
|
},
|
|
'p,b,i': {
|
|
display: 'block',
|
|
'&:focus,input': {
|
|
opacity: 1,
|
|
'div,span': {
|
|
opacity: 0
|
|
}
|
|
}
|
|
}
|
|
},
|
|
'hush'
|
|
);
|
|
expect(out).toEqual(
|
|
[
|
|
'hush{display:value;}',
|
|
'hush:hover,hush:focus{border:0;}',
|
|
'hush:hover span,hush:focus span{index:unset;}',
|
|
'hush p,hush b,hush i{display:block;}',
|
|
'hush p:focus,hush p input,hush b:focus,hush b input,hush i:focus,hush i input{opacity:1;}',
|
|
'hush p:focus div,hush p:focus span,hush p input div,hush p input span,hush b:focus div,hush b:focus span,hush b input div,hush b input span,hush i:focus div,hush i:focus span,hush i input div,hush i input span{opacity:0;}'
|
|
].join('')
|
|
);
|
|
});
|
|
|
|
it('should handle the :where(a,b) cases', () => {
|
|
expect(
|
|
parse(
|
|
{
|
|
div: {
|
|
':where(a, b)': {
|
|
color: 'blue'
|
|
}
|
|
}
|
|
},
|
|
''
|
|
)
|
|
).toEqual('div :where(a, b){color:blue;}');
|
|
});
|
|
|
|
it('should handle null and undefined values', () => {
|
|
expect(
|
|
parse(
|
|
{
|
|
div: {
|
|
opacity: 0,
|
|
color: null
|
|
}
|
|
},
|
|
''
|
|
)
|
|
).toEqual('div{opacity:0;}');
|
|
expect(
|
|
parse(
|
|
{
|
|
div: {
|
|
opacity: 0,
|
|
color: undefined // or `void 0` when minified
|
|
}
|
|
},
|
|
''
|
|
)
|
|
).toEqual('div{opacity:0;}');
|
|
});
|
|
|
|
it('does not transform the case of custom CSS variables', () => {
|
|
expect(
|
|
parse({
|
|
'--cP': 'red'
|
|
})
|
|
).toEqual('--cP:red;');
|
|
expect(
|
|
parse({
|
|
'--c-P': 'red'
|
|
})
|
|
).toEqual('--c-P:red;');
|
|
expect(
|
|
parse({
|
|
'--cp': 'red'
|
|
})
|
|
).toEqual('--cp:red;');
|
|
expect(
|
|
parse({
|
|
':root': {
|
|
'--cP': 'red'
|
|
}
|
|
})
|
|
).toEqual(':root{--cP:red;}');
|
|
});
|
|
});
|