style: according linter

Author: Scrum

.editorconfig

@@ -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

src/index.js

@@ -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);
+    });
+  };
 });

test/test.js

@@ -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);
 });