Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rewrote astish to recursion and shave some bytes #419

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Rewrote astish to recursion and shave some bytes #419

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 37 additions & 15 deletions src/core/__tests__/astish.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,21 @@ import { astish } from '../astish';
describe('astish', () => {
it('regular', () => {
expect(
astish(`
astish(
`
prop: value;
`)
`,
[{}]
)
).toEqual({
prop: 'value'
});
});

it('nested', () => {
expect(
astish(`
astish(
`
prop: value;
@keyframes foo {
0% {
Expand All @@ -34,7 +38,9 @@ describe('astish', () => {
&:hover {
-webkit-touch: none;
}
`)
`,
[{}]
)
).toEqual({
prop: 'value',
opacity: '0',
Expand All @@ -61,15 +67,18 @@ describe('astish', () => {

it('merging', () => {
expect(
astish(`
astish(
`
.c {
font-size:24px;
}

.c {
color:red;
}
`)
`,
[{}]
)
).toEqual({
'.c': {
'font-size': '24px',
Expand All @@ -80,7 +89,8 @@ describe('astish', () => {

it('regression', () => {
expect(
astish(`
astish(
`
&.g0ssss {
aa: foo;
box-shadow: 0 1px rgba(0, 2, 33, 4) inset;
Expand All @@ -104,7 +114,9 @@ describe('astish', () => {
.b {
color: blue;
}
`)
`,
[{}]
)
).toEqual({
'&.g0ssss': {
aa: 'foo',
Expand Down Expand Up @@ -135,7 +147,8 @@ describe('astish', () => {

it('should strip comments', () => {
expect(
astish(`
astish(
`
color: red;
/*
some comment
Expand All @@ -148,7 +161,9 @@ describe('astish', () => {
font-size: xx-large; /* inline comment */
/* foo: bar */
font-weight: bold;
`)
`,
[{}]
)
).toEqual({
color: 'red',
transform: 'translate3d(0, 0, 0)',
Expand All @@ -162,11 +177,14 @@ describe('astish', () => {
// https://www.w3.org/TR/CSS22/syndata.html#value-def-identifier
it('should not mangle valid css identifiers', () => {
expect(
astish(`
astish(
`
:root {
--azAZ-_中文09: 0;
}
`)
`,
[{}]
)
).toEqual({
':root': {
'--azAZ-_中文09': '0'
Expand All @@ -176,10 +194,13 @@ describe('astish', () => {

it('should parse multiline background declaration', () => {
expect(
astish(`
astish(
`
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="white"><path d="M7.5 36.7h58.4v10.6H7.5V36.7zm0-15.9h58.4v10.6H7.5V20.8zm0 31.9h58.4v10.6H7.5V52.7zm0 15.9h58.4v10.6H7.5V68.6zm63.8-15.9l10.6 15.9 10.6-15.9H71.3zm21.2-5.4L81.9 31.4 71.3 47.3h21.2z"/></svg>')
center/contain;
`)
`,
[{}]
)
).toEqual({
background: `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" fill="white"><path d="M7.5 36.7h58.4v10.6H7.5V36.7zm0-15.9h58.4v10.6H7.5V20.8zm0 31.9h58.4v10.6H7.5V52.7zm0 15.9h58.4v10.6H7.5V68.6zm63.8-15.9l10.6 15.9 10.6-15.9H71.3zm21.2-5.4L81.9 31.4 71.3 47.3h21.2z"/></svg>')center/contain`
});
Expand All @@ -188,7 +209,8 @@ describe('astish', () => {
it('should handle inline @media block', () => {
expect(
astish(
`h1 { font-size: 1rem; } @media only screen and (min-width: 850px) { h1 { font-size: 2rem; } }`
`h1 { font-size: 1rem; } @media only screen and (min-width: 850px) { h1 { font-size: 2rem; } }`,
[{}]
)
).toEqual({
h1: {
Expand Down
2 changes: 1 addition & 1 deletion src/core/__tests__/hash.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ describe('hash', () => {

expect(toHash).toBeCalledWith('compiled');
expect(update).toBeCalledWith('parse()', 'target', undefined);
expect(astish).toBeCalledWith('compiled');
expect(astish).toBeCalledWith('compiled', [{}]);
expect(parse).toBeCalledWith('astish()', '.toHash()');

expect(res).toEqual('toHash()');
Expand Down
26 changes: 13 additions & 13 deletions src/core/astish.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,20 @@ let ruleClean = /\/\*[^]*?\*\/|\s\s+|\n/g;
* @param {String} val
* @returns {Object}
*/
export let astish = (val) => {
let tree = [{}];
let block;
export let astish = (val, tree) => {
let block = newRule.exec(val.replace(ruleClean, ''));
if (!block) {
return tree[0];
}

while ((block = newRule.exec(val.replace(ruleClean, '')))) {
// Remove the current entry
if (block[4]) {
tree.shift();
} else if (block[3]) {
tree.unshift((tree[0][block[3]] = tree[0][block[3]] || {}));
} else {
tree[0][block[1]] = block[2];
}
// Remove the current entry
if (block[4]) {
tree.shift();
} else if (block[3]) {
tree.unshift((tree[0][block[3]] = tree[0][block[3]] || {}));
} else {
tree[0][block[1]] = block[2];
}

return tree[0];
return astish(val, tree);
};
2 changes: 1 addition & 1 deletion src/core/hash.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export let hash = (compiled, sheet, global, append, keyframes) => {
// If there's no entry for the current className
if (!cache[className]) {
// Build the _ast_-ish structure if needed
let ast = stringifiedCompiled !== compiled ? compiled : astish(compiled);
let ast = stringifiedCompiled !== compiled ? compiled : astish(compiled, [{}]);

// Parse it
cache[className] = parse(
Expand Down