-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
2 changed files
with
96 additions
and
110 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,111 +1,39 @@ | ||
const postcss = require('postcss') | ||
const { replaceSymbols } = require('../src') | ||
|
||
const run = (input, replacements, expected) => { | ||
return postcss([css => replaceSymbols(css, replacements)]) | ||
.process(input) | ||
.then(result => { | ||
expect(result.css).toEqual(expected) | ||
/* eslint-env jest */ | ||
import postcss from "postcss"; | ||
import { replaceSymbols } from "../src"; | ||
|
||
const replace = (input, replacements) => { | ||
const ast = postcss.parse(input); | ||
replaceSymbols(ast, replacements); | ||
return ast.toString(); | ||
}; | ||
|
||
test("return empty CSS unchanged", () => { | ||
expect(replace("", {})).toEqual(""); | ||
}); | ||
|
||
test("not change class names", () => { | ||
expect(replace(".foo { color: red }", { foo: "bar" })).toEqual( | ||
".foo { color: red }" | ||
); | ||
}); | ||
|
||
test("not change property names", () => { | ||
expect(replace(".foo { color: red }", { color: "background" })).toEqual( | ||
".foo { color: red }" | ||
); | ||
}); | ||
|
||
test("change declaration values", () => { | ||
expect(replace(".foo { color: red }", { red: "blue" })).toEqual( | ||
".foo { color: blue }" | ||
); | ||
}); | ||
|
||
test("should change media queries", () => { | ||
expect( | ||
replace("@media small { .foo { color: red } }", { | ||
small: "(max-width: 599px)" | ||
}) | ||
} | ||
|
||
describe('replace-symbols', () => { | ||
it('should return empty CSS unchanged', () => { | ||
return run('', {}, '') | ||
}) | ||
|
||
it('should not change unless there are translations', () => { | ||
return run('.foo { color: red }', {}, '.foo { color: red }') | ||
}) | ||
|
||
it('should not change class names', () => { | ||
return run('.foo { color: red }', { foo: 'bar' }, '.foo { color: red }') | ||
}) | ||
|
||
it('should not change property names', () => { | ||
return run( | ||
'.foo { color: red }', | ||
{ color: 'background' }, | ||
'.foo { color: red }' | ||
) | ||
}) | ||
|
||
it('should change declaration values', () => { | ||
return run('.foo { color: red }', { red: 'blue' }, '.foo { color: blue }') | ||
}) | ||
|
||
it('should change symbols within declaration values', () => { | ||
return run( | ||
'.foo { box-shadow: 0 0 0 4px red }', | ||
{ red: 'blue' }, | ||
'.foo { box-shadow: 0 0 0 4px blue }' | ||
) | ||
}) | ||
|
||
it('should change multiple symbols within declaration values', () => { | ||
return run( | ||
'.foo { box-shadow: top left blur spread color }', | ||
{ top: '1px', left: '2px', blur: '3px', spread: '4px', color: 'red' }, | ||
'.foo { box-shadow: 1px 2px 3px 4px red }' | ||
) | ||
}) | ||
|
||
it('should change complex symbols, if you feel like trolling yourself', () => { | ||
return run( | ||
'.foo { box-shadow: 1px 0.5em 3px $sass-a #f00 }', | ||
{ | ||
'1px': '1rem', | ||
'0.5em': '10px', | ||
'3px': '$sass-b', | ||
'$sass-a': '4px', | ||
'#f00': 'green' | ||
}, | ||
'.foo { box-shadow: 1rem 10px $sass-b 4px green }' | ||
) | ||
}) | ||
|
||
it('should be able to rewrite variables', () => { | ||
return run( | ||
'.foo { color: var(--red) }', | ||
{ '--red': '--blue' }, | ||
'.foo { color: var(--blue) }' | ||
) | ||
}) | ||
|
||
it('should not replace half a variable', () => { | ||
return run( | ||
'.foo { color: colors.red; background: red.blue; }', | ||
{ red: 'green', blue: 'white' }, | ||
'.foo { color: colors.red; background: red.blue; }' | ||
) | ||
}) | ||
|
||
it('should not replace a replacement', () => { | ||
return run( | ||
'.foo { background: blue; color: red }', | ||
{ red: 'blue', blue: 'green' }, | ||
'.foo { background: green; color: blue }' | ||
) | ||
}) | ||
|
||
it('should not get trolled by me', () => { | ||
return run( | ||
'.foo { color: white }', | ||
{ white: 'lightblue', blue: 'green' }, | ||
'.foo { color: lightblue }' | ||
) | ||
return run( | ||
'.foo { color: white }', | ||
{ white: 'light blue', blue: 'green' }, | ||
'.foo { color: light blue }' | ||
) | ||
}) | ||
|
||
it('should change media queries', () => { | ||
return run( | ||
'@media small { .foo { color: red } }', | ||
{ small: '(max-width: 599px)' }, | ||
'@media (max-width: 599px) { .foo { color: red } }' | ||
) | ||
}) | ||
}) | ||
).toEqual("@media (max-width: 599px) { .foo { color: red } }"); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
/* eslint-env jest */ | ||
import { replaceValueSymbols as replace } from "../src"; | ||
|
||
test("not change empty css", () => { | ||
expect(replace("", {})).toEqual(""); | ||
}); | ||
|
||
test("not change unless there are translations", () => { | ||
expect(replace("red", {})).toEqual("red"); | ||
}); | ||
|
||
test("change symbols within values", () => { | ||
expect(replace("0 0 0 4px red", { red: "blue" })).toEqual("0 0 0 4px blue"); | ||
}); | ||
|
||
test("change multiple symbols within values", () => { | ||
expect( | ||
replace("top left blur spread color", { | ||
top: "1px", | ||
left: "2px", | ||
blur: "3px", | ||
spread: "4px", | ||
color: "red" | ||
}) | ||
).toEqual("1px 2px 3px 4px red"); | ||
}); | ||
|
||
test("change complex symbols, if you feel like trolling yourself", () => { | ||
expect( | ||
replace("1px 0.5em 3px $sass-a #f00", { | ||
"1px": "1rem", | ||
"0.5em": "10px", | ||
"3px": "$sass-b", | ||
"$sass-a": "4px", | ||
"#f00": "green" | ||
}) | ||
).toEqual("1rem 10px $sass-b 4px green"); | ||
}); | ||
|
||
test("rewrite custom properties", () => { | ||
expect(replace("var(--red)", { "--red": "--blue" })).toEqual("var(--blue)"); | ||
}); | ||
|
||
test("not replace half a variable", () => { | ||
expect( | ||
replace("colors.red red.blue", { | ||
red: "green", | ||
blue: "white", | ||
colors: "weights" | ||
}) | ||
).toEqual("colors.red red.blue"); | ||
}); | ||
|
||
test("not replace a replacement", () => { | ||
expect(replace("blue red", { red: "blue", blue: "green" })).toEqual( | ||
"green blue" | ||
); | ||
}); |