Skip to content

Commit d4a4aa2

Browse files
ZeeCoderZeeCoder
committed
Switched to prettier 💅
1 parent 7bc7697 commit d4a4aa2

38 files changed

+1327
-957
lines changed

‎.eslintrc

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
extends: eslint:recommended
1+
extends: prettier
22
env:
33
jquery: true
44
browser: true
@@ -11,4 +11,7 @@ parserOptions:
1111
sourceType: module
1212

1313
rules:
14-
no-console: warn
14+
prettier/prettier: [error, {tabWidth: 4}]
15+
16+
plugins:
17+
- prettier

‎package.json

+15-2
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,12 @@
4545
"babel-preset-es2015": "^6.22.0",
4646
"coveralls": "^2.11.16",
4747
"eslint": "^3.15.0",
48-
"jest": "^19.0.2"
48+
"eslint-config-prettier": "^1.5.0",
49+
"eslint-plugin-prettier": "^2.0.1",
50+
"husky": "^0.13.3",
51+
"jest": "^19.0.2",
52+
"lint-staged": "^3.4.0",
53+
"prettier": "^0.22.0"
4954
},
5055
"scripts": {
5156
"pretest": "yarn run lint",
@@ -54,6 +59,14 @@
5459
"coveralls": "cat ./coverage/lcov.info | ./node_modules/.bin/coveralls",
5560
"build": "babel src --out-dir build --ignore spec.js",
5661
"watch:test": "jest --watch --notify",
57-
"prepublish": "yarn run build"
62+
"prepublish": "yarn run build",
63+
"precommit": "lint-staged",
64+
"eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check"
65+
},
66+
"lint-staged": {
67+
"*.js": [
68+
"prettier --write --tab-width=4",
69+
"git add"
70+
]
5871
}
5972
}

‎src/constants.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
export const HEIGHT_UNIT = 'ch';
2-
export const WIDTH_UNIT = 'cw';
3-
export const MIN_UNIT = 'cmin';
4-
export const MAX_UNIT = 'cmax';
5-
export const DEFINE_CONTAINER_NAME = 'define-container';
1+
export const HEIGHT_UNIT = "ch";
2+
export const WIDTH_UNIT = "cw";
3+
export const MIN_UNIT = "cmin";
4+
export const MAX_UNIT = "cmax";
5+
export const DEFINE_CONTAINER_NAME = "define-container";

‎src/initialiseAllContainers.js

+7-10
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,28 @@ import Container from "./runtime/Container";
44
* @param {Object} containers
55
* @param {boolean} [adjustOnWindowResize]
66
*/
7-
export default function initialiseAllContainers (
7+
export default function initialiseAllContainers(
88
containers,
99
adjustOnWindowResize = true
1010
) {
1111
const containerInstances = [];
1212

13-
function adjustAll () {
14-
containerInstances.forEach((instance) => instance.adjust());
13+
function adjustAll() {
14+
containerInstances.forEach(instance => instance.adjust());
1515
}
1616

1717
for (let containerSelector in containers) {
18-
document.querySelectorAll(containerSelector).forEach((htmlElement) => {
18+
document.querySelectorAll(containerSelector).forEach(htmlElement => {
1919
containerInstances.push(
20-
new Container(
21-
htmlElement,
22-
containers[containerSelector]
23-
)
20+
new Container(htmlElement, containers[containerSelector])
2421
);
2522
});
2623
}
2724

2825
if (adjustOnWindowResize) {
29-
window.addEventListener('resize', adjustAll);
26+
window.addEventListener("resize", adjustAll);
3027
}
3128

3229
// Trigger first adjustment
33-
document.addEventListener('DOMContentLoaded', adjustAll);
30+
document.addEventListener("DOMContentLoaded", adjustAll);
3431
}

‎src/initialiseAllContainers.spec.js

+35-20
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
11
import initialiseAllContainers from "./initialiseAllContainers";
22

3-
jest.mock('./runtime/Container');
3+
jest.mock("./runtime/Container");
44

5-
test('should initialise all containers and adjust them on window resize', () => {
6-
const Container = require('./runtime/Container').default;
5+
test("should initialise all containers and adjust them on window resize", () => {
6+
const Container = require("./runtime/Container").default;
77
Container.prototype.adjust = jest.fn();
88

99
const container1Config = {
10-
selector: '.container1',
11-
queries: [],
10+
selector: ".container1",
11+
queries: []
1212
};
1313
const container2Config = {
14-
selector: '.container2',
15-
queries: [],
14+
selector: ".container2",
15+
queries: []
1616
};
1717

1818
const containers = {
19-
'.container1': container1Config,
20-
'.container2': container2Config,
19+
".container1": container1Config,
20+
".container2": container2Config
2121
};
2222

2323
const container1Element1 = {};
2424
const container1Element2 = {};
2525
const container2Element1 = {};
2626

27-
document.querySelectorAll = jest.fn((selector) => {
28-
if (selector === '.container1') {
29-
return [ container1Element1, container1Element2 ];
27+
document.querySelectorAll = jest.fn(selector => {
28+
if (selector === ".container1") {
29+
return [container1Element1, container1Element2];
3030
} else {
31-
return [ container2Element1 ];
31+
return [container2Element1];
3232
}
3333
});
3434

@@ -47,21 +47,36 @@ test('should initialise all containers and adjust them on window resize', () =>
4747
triggerWindowResize();
4848

4949
expect(document.querySelectorAll).toHaveBeenCalledTimes(2);
50-
expect(document.querySelectorAll).toHaveBeenCalledWith(container1Config.selector);
51-
expect(document.querySelectorAll).toHaveBeenCalledWith(container2Config.selector);
50+
expect(document.querySelectorAll).toHaveBeenCalledWith(
51+
container1Config.selector
52+
);
53+
expect(document.querySelectorAll).toHaveBeenCalledWith(
54+
container2Config.selector
55+
);
5256

5357
expect(Container).toHaveBeenCalledTimes(3);
54-
expect(Container.mock.calls[0]).toEqual([ container1Element1, container1Config ]);
55-
expect(Container.mock.calls[1]).toEqual([ container1Element2, container1Config ]);
56-
expect(Container.mock.calls[2]).toEqual([ container2Element1, container2Config ]);
58+
expect(Container.mock.calls[0]).toEqual([
59+
container1Element1,
60+
container1Config
61+
]);
62+
expect(Container.mock.calls[1]).toEqual([
63+
container1Element2,
64+
container1Config
65+
]);
66+
expect(Container.mock.calls[2]).toEqual([
67+
container2Element1,
68+
container2Config
69+
]);
5770

5871
expect(window.addEventListener).toHaveBeenCalledTimes(1);
5972
expect(Container.prototype.adjust).toHaveBeenCalledTimes(6);
6073
});
6174

62-
test('should not add window resize call if not required', () => {
75+
test("should not add window resize call if not required", () => {
6376
let triggerWindowResize = null;
64-
window.addEventListener = jest.fn((type, onResizeFn) => { triggerWindowResize = onResizeFn; });
77+
window.addEventListener = jest.fn((type, onResizeFn) => {
78+
triggerWindowResize = onResizeFn;
79+
});
6580

6681
initialiseAllContainers({}, false);
6782

‎src/postcss/containerQuery.js

+45-42
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
1-
import postcss from 'postcss';
2-
import detectContainerDefinition from './detectContainerDefinition';
3-
import getConditionsFromQueryParams from './getConditionsFromQueryParams';
4-
import getStylesObjectFromNode from './getStylesObjectFromNode';
5-
import isEmptyObject from './isEmptyObject';
1+
import postcss from "postcss";
2+
import detectContainerDefinition from "./detectContainerDefinition";
3+
import getConditionsFromQueryParams from "./getConditionsFromQueryParams";
4+
import getStylesObjectFromNode from "./getStylesObjectFromNode";
5+
import isEmptyObject from "./isEmptyObject";
66
import { DEFINE_CONTAINER_NAME } from "../constants";
7-
import saveJSON from './saveJSON';
7+
import saveJSON from "./saveJSON";
88

9-
function addStylesToDefaultQuery (defaultElementRef, styles, keepValues = false) {
9+
function addStylesToDefaultQuery(
10+
defaultElementRef,
11+
styles,
12+
keepValues = false
13+
) {
1014
for (let prop in styles) {
11-
if (typeof defaultElementRef.styles[prop] !== 'undefined') {
15+
if (typeof defaultElementRef.styles[prop] !== "undefined") {
1216
continue;
1317
}
1418

15-
defaultElementRef.styles[prop] = keepValues ? styles[prop] : '';
19+
defaultElementRef.styles[prop] = keepValues ? styles[prop] : "";
1620
}
1721
}
1822

@@ -21,33 +25,29 @@ function addStylesToDefaultQuery (defaultElementRef, styles, keepValues = false)
2125
*
2226
* @param {Node} node
2327
*/
24-
function shouldProcessNode (node) {
25-
return (
26-
node.parent.type === 'root' ||
27-
(
28-
node.parent.type === 'atrule' &&
29-
[ 'container', 'media' ].indexOf(node.parent.name) !== -1
30-
)
31-
);
28+
function shouldProcessNode(node) {
29+
return node.parent.type === "root" ||
30+
(node.parent.type === "atrule" &&
31+
["container", "media"].indexOf(node.parent.name) !== -1);
3232
}
3333

3434
/**
3535
* @param {{ getJSON: function }} options
3636
*/
37-
function containerQuery (options = {}) {
37+
function containerQuery(options = {}) {
3838
const getJSON = options.getJSON || saveJSON;
3939

40-
return function (root) {
40+
return function(root) {
4141
let containers = {};
4242
let currentContainerSelector = null;
4343
let currentDefaultQuery = null;
4444
let currentDefaultQueryMap = null;
4545

46-
function getElementRefBySelector (selector) {
47-
if (typeof currentDefaultQueryMap[selector] === 'undefined') {
46+
function getElementRefBySelector(selector) {
47+
if (typeof currentDefaultQueryMap[selector] === "undefined") {
4848
let elementRef = {
4949
selector: selector,
50-
styles: {},
50+
styles: {}
5151
};
5252

5353
currentDefaultQuery.elements.push(elementRef);
@@ -57,15 +57,17 @@ function containerQuery (options = {}) {
5757
return currentDefaultQueryMap[selector];
5858
}
5959

60-
function flushCurrentContainerData (newContainer = null) {
60+
function flushCurrentContainerData(newContainer = null) {
6161
// Prepend the default query to the previously processed container
6262
if (currentContainerSelector !== null) {
63-
containers[currentContainerSelector].queries.unshift(currentDefaultQuery);
63+
containers[currentContainerSelector].queries.unshift(
64+
currentDefaultQuery
65+
);
6466
}
6567
if (newContainer !== null) {
6668
containers[newContainer] = {
6769
selector: newContainer,
68-
queries: [],
70+
queries: []
6971
};
7072
}
7173
currentDefaultQuery = { elements: [] };
@@ -79,47 +81,49 @@ function containerQuery (options = {}) {
7981
return;
8082
}
8183

82-
if (node.type === 'rule') {
84+
if (node.type === "rule") {
8385
// Check if there's a new container declared in the rule node
8486
const newContainer = detectContainerDefinition(node);
8587
if (newContainer !== null) {
8688
flushCurrentContainerData(newContainer);
8789
}
8890

89-
const isContainer = newContainer !== null || node.selector === currentContainerSelector;
91+
const isContainer = newContainer !== null ||
92+
node.selector === currentContainerSelector;
9093

9194
if (currentContainerSelector !== null) {
9295
// Process potential container unit usages to the default query
9396
addStylesToDefaultQuery(
9497
getElementRefBySelector(node.selector),
95-
getStylesObjectFromNode(
96-
node,
97-
isContainer,
98-
true,
99-
true
100-
),
98+
getStylesObjectFromNode(node, isContainer, true, true),
10199
true
102100
);
103101
}
104-
} else if (node.type === 'atrule' && node.name === 'container') {
102+
} else if (node.type === "atrule" && node.name === "container") {
105103
if (currentContainerSelector === null) {
106-
throw node.error(`A @container query was found, without a preceding @${DEFINE_CONTAINER_NAME} declaration.`);
104+
throw node.error(
105+
`A @container query was found, without a preceding @${DEFINE_CONTAINER_NAME} declaration.`
106+
);
107107
}
108108

109109
let query = {
110110
conditions: getConditionsFromQueryParams(node.params),
111-
elements: [],
111+
elements: []
112112
};
113113

114-
node.nodes.forEach((elementRule) => {
115-
if (elementRule.type !== 'rule') {
114+
node.nodes.forEach(elementRule => {
115+
if (elementRule.type !== "rule") {
116116
return;
117117
}
118118

119-
const isContainer = elementRule.selector === currentContainerSelector;
119+
const isContainer = elementRule.selector ===
120+
currentContainerSelector;
120121
let element = {
121122
selector: elementRule.selector,
122-
styles: getStylesObjectFromNode(elementRule, isContainer),
123+
styles: getStylesObjectFromNode(
124+
elementRule,
125+
isContainer
126+
)
123127
};
124128

125129
if (!isEmptyObject(element.styles)) {
@@ -144,7 +148,6 @@ function containerQuery (options = {}) {
144148

145149
getJSON(root.source.input.file, containers);
146150
};
147-
148151
}
149152

150-
export default postcss.plugin('postcss-container-query', containerQuery);
153+
export default postcss.plugin("postcss-container-query", containerQuery);

0 commit comments

Comments
 (0)