Skip to content

Commit

Permalink
style: according linter
Browse files Browse the repository at this point in the history
  • Loading branch information
Scrum committed Jun 6, 2019
1 parent 523421a commit 659398e
Show file tree
Hide file tree
Showing 3 changed files with 80 additions and 77 deletions.
5 changes: 4 additions & 1 deletion .editorconfig
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,14 @@ charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[{package.json,*.yml}]
[*.{json,yml,jade,pss,css,html,js}]
indent_size = 2

[changelog.md]
insert_final_newline = false

[*.html]
insert_final_newline = false

[*.md]
trim_trailing_whitespace = false
64 changes: 32 additions & 32 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,49 +1,49 @@
import postcss from 'postcss';

function hasVar(str) {
return str.includes('var(');
function hasVar(string) {
return string.includes('var(');
}

function resolveValue(value, maps) {
return hasVar(value) ? value.replace(/var\(--.*?\)/g, match => maps[match.slice(4, -1)] || match) : value;
return hasVar(value) ? value.replace(/var\(--.*?\)/g, match => maps[match.slice(4, -1)] || match) : value;
}

function getProperty(nodes) {
let propertys = {};

nodes.walkRules(rule => {
if (rule.selector !== ':root') {
return;
}

rule.each(({type, prop, value}) => {
if (type === 'decl') {
propertys[prop] = value;
}
});
let propertys = {};

nodes.walkRules(rule => {
if (rule.selector !== ':root') {
return;
}

rule.each(({type, prop: property, value}) => {
if (type === 'decl') {
propertys[property] = value;
}
});
});

return propertys;
return propertys;
}

function circularReference(maps) {
return Object.keys(maps).reduce((prevMaps, property) => {
prevMaps[property] = resolveValue(maps[property], maps);
return prevMaps;
}, maps);
return Object.keys(maps).reduce((previousMaps, property) => {
previousMaps[property] = resolveValue(maps[property], maps);
return previousMaps;
}, maps);
}

export default postcss.plugin('postcss-at-rules-variables', (options = {}) => {
options = {
atRules: [...new Set(['for', 'if', 'else', 'each', 'mixin', 'custom-media', ...options.atRules || ''])],
variables: options.variables || {}
};

return nodes => {
const maps = circularReference(Object.assign(getProperty(nodes), options.variables));

nodes.walkAtRules(new RegExp(options.atRules.join('|')), rules => {
rules.params = resolveValue(rules.params, maps);
});
};
options = {
atRules: [...new Set(['for', 'if', 'else', 'each', 'mixin', 'custom-media', ...options.atRules || ''])],
variables: options.variables || {}
};

return nodes => {
const maps = circularReference(Object.assign(getProperty(nodes), options.variables));

nodes.walkAtRules(new RegExp(options.atRules.join('|')), rules => {
rules.params = resolveValue(rules.params, maps);
});
};
});
88 changes: 44 additions & 44 deletions test/test.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,87 +2,87 @@ import postcss from 'postcss';
import test from 'ava';
import plugin from '../src';

const processing = (input, opts) => {
return postcss([plugin(opts)]).process(input).css;
const processing = (input, options) => {
return postcss([plugin(options)]).process(input).css;
};

test('it change circular reference', t => {
const expected = ':root{ --from: 1; --to: var(--from)} @for $i from 1 to 1';
const value = ':root{ --from: 1; --to: var(--from)} @for $i from var(--from) to var(--to)';
t.is(processing(value), expected);
const expected = ':root{ --from: 1; --to: var(--from)} @for $i from 1 to 1';
const value = ':root{ --from: 1; --to: var(--from)} @for $i from var(--from) to var(--to)';
t.is(processing(value), expected);
});

test('it should not throw error if comment exists', t => {
const expected = ':root{ --from: 1; /* comment */ }';
const value = ':root{ --from: 1; /* comment */ }';
t.is(processing(value), expected);
const expected = ':root{ --from: 1; /* comment */ }';
const value = ':root{ --from: 1; /* comment */ }';
t.is(processing(value), expected);
});

test('it should not throw error if comment exists with rule', t => {
const expected = ':root{ --from: 1; /* comment */ } @for $i from 1 to 2';
const value = ':root{ --from: 1; /* comment */ } @for $i from var(--from) to 2';
t.is(processing(value), expected);
const expected = ':root{ --from: 1; /* comment */ } @for $i from 1 to 2';
const value = ':root{ --from: 1; /* comment */ } @for $i from var(--from) to 2';
t.is(processing(value), expected);
});

test('it change first properties for @for', t => {
const expected = ':root{ --from: 1; } @for $i from 1 to 2';
const value = ':root{ --from: 1; } @for $i from var(--from) to 2';
t.is(processing(value), expected);
const expected = ':root{ --from: 1; } @for $i from 1 to 2';
const value = ':root{ --from: 1; } @for $i from var(--from) to 2';
t.is(processing(value), expected);
});

test('it change second properties for @for', t => {
const expected = ':root{ --to: 2; } @for $i from 1 to 2';
const value = ':root{ --to: 2; } @for $i from 1 to var(--to)';
t.is(processing(value), expected);
const expected = ':root{ --to: 2; } @for $i from 1 to 2';
const value = ':root{ --to: 2; } @for $i from 1 to var(--to)';
t.is(processing(value), expected);
});

test('it change two properties for @for', t => {
const expected = ':root{ --from: 1; --to: 2; } @for $i from 1 to 2';
const value = ':root{ --from: 1; --to: 2; } @for $i from var(--from) to var(--to)';
t.is(processing(value), expected);
const expected = ':root{ --from: 1; --to: 2; } @for $i from 1 to 2';
const value = ':root{ --from: 1; --to: 2; } @for $i from var(--from) to var(--to)';
t.is(processing(value), expected);
});

test('it change three properties for @for', t => {
const expected = ':root{ --from: 1; --to: 2; --step: 5 } @for $i from 1 to 2 by 5';
const value = ':root{ --from: 1; --to: 2; --step: 5 } @for $i from var(--from) to var(--to) by var(--step)';
t.is(processing(value), expected);
const expected = ':root{ --from: 1; --to: 2; --step: 5 } @for $i from 1 to 2 by 5';
const value = ':root{ --from: 1; --to: 2; --step: 5 } @for $i from var(--from) to var(--to) by var(--step)';
t.is(processing(value), expected);
});

test('it change two properties for @if', t => {
const expected = ':root{ --first: 1; --second: 2; } @if 1 < 2';
const value = ':root{ --first: 1; --second: 2; } @if var(--first) < var(--second)';
t.is(processing(value, {atRules: ['if']}), expected);
const expected = ':root{ --first: 1; --second: 2; } @if 1 < 2';
const value = ':root{ --first: 1; --second: 2; } @if var(--first) < var(--second)';
t.is(processing(value, {atRules: ['if']}), expected);
});

test('it change two properties for @if, @else if', t => {
const expected = ':root{ --first: 1; --second: 2; } @if 1 < 2 { color: olive; } @else if 1 > 2 { color: red; }';
const value = ':root{ --first: 1; --second: 2; } @if var(--first) < var(--second) { color: olive; } @else if var(--first) > var(--second) { color: red; }';
t.is(processing(value, {atRules: ['if', 'else']}), expected);
const expected = ':root{ --first: 1; --second: 2; } @if 1 < 2 { color: olive; } @else if 1 > 2 { color: red; }';
const value = ':root{ --first: 1; --second: 2; } @if var(--first) < var(--second) { color: olive; } @else if var(--first) > var(--second) { color: red; }';
t.is(processing(value, {atRules: ['if', 'else']}), expected);
});

test('it change multi properties for @each', t => {
const expected = ':root{ --array: foo, bar, baz; } @each $val in foo, bar, baz {} @for foo, bar, baz {}';
const value = ':root{ --array: foo, bar, baz; } @each $val in var(--array) {} @for var(--array) {}';
t.is(processing(value, {atRules: ['each']}), expected);
const expected = ':root{ --array: foo, bar, baz; } @each $val in foo, bar, baz {} @for foo, bar, baz {}';
const value = ':root{ --array: foo, bar, baz; } @each $val in var(--array) {} @for var(--array) {}';
t.is(processing(value, {atRules: ['each']}), expected);
});

test('it without variables', t => {
const expected = ':root{ --red: red; } @if var(--green) { color: var(--green) }';
const value = ':root{ --red: red; } @if var(--green) { color: var(--green) }';
t.is(processing(value), expected);
const expected = ':root{ --red: red; } @if var(--green) { color: var(--green) }';
const value = ':root{ --red: red; } @if var(--green) { color: var(--green) }';
t.is(processing(value), expected);
});

test('chould change from options variables', t => {
const expected = '@if green { .text-green { color: var(--green) }}';
const value = '@if var(--green) { .text-green { color: var(--green) }}';
const variables = {
'--green': 'green'
};
t.is(processing(value, {variables: variables}), expected);
const expected = '@if green { .text-green { color: var(--green) }}';
const value = '@if var(--green) { .text-green { color: var(--green) }}';
const variables = {
'--green': 'green'
};
t.is(processing(value, {variables: variables}), expected);
});

test('should change for @custom-media', t => {
const expected = ':root{ --breakpoint-xs: 29.25em } @custom-media --viewport-xs (width > 29.25em)';
const value = ':root{ --breakpoint-xs: 29.25em } @custom-media --viewport-xs (width > var(--breakpoint-xs))';
t.is(processing(value, {atRules: ['custom-media']}), expected);
const expected = ':root{ --breakpoint-xs: 29.25em } @custom-media --viewport-xs (width > 29.25em)';
const value = ':root{ --breakpoint-xs: 29.25em } @custom-media --viewport-xs (width > var(--breakpoint-xs))';
t.is(processing(value, {atRules: ['custom-media']}), expected);
});

0 comments on commit 659398e

Please sign in to comment.