Skip to content

Support not operator with platform, e.g. @media not ios #8

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

Merged
kristerkari merged 5 commits into from
May 6, 2018
Merged

Support not operator with platform, e.g. @media not ios #8

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a892805
Support not operator with platform, e.g. @media not ios
kristerkari May 6, 2018
30de71e
Add more tests for NOT
kristerkari May 6, 2018
d1ab116
fix test queries
kristerkari May 6, 2018
b31a871
Fix a match case for not operator
kristerkari May 6, 2018
8b89cf5
small cleanup
kristerkari May 6, 2018
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
279 changes: 279 additions & 0 deletions src/__tests__/index.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -629,6 +629,285 @@ describe("media queries", () => {
).toEqual({ a: 2 });
});

it("should process media query with NOT operator and type", () => {
expect(
process({
__mediaQueries: {
"@media not print": [
{
inverse: true,
type: "print",
expressions: []
}
],
"@media print": [
{
inverse: false,
type: "print",
expressions: []
}
]
},
a: 1,
"@media not print": {
a: 2
},
"@media print": {
a: 3
}
})
).toEqual({ a: 2 });
});

it("should process media query with NOT and OR operators and type", () => {
expect(
process({
__mediaQueries: {
"@media not print, (orientation: landscape)": [
{
inverse: true,
type: "print",
expressions: []
},
{
expressions: [
{
feature: "orientation",
modifier: undefined,
value: "landscape"
}
],
inverse: false,
type: "all"
}
],
"@media print": [
{
inverse: false,
type: "print",
expressions: []
}
]
},
a: 1,
"@media not print, (orientation: landscape)": {
a: 2
},
"@media print": {
a: 3
}
})
).toEqual({ a: 2 });
expect(
process({
__mediaQueries: {
"@media not ios, (orientation: landscape)": [
{
inverse: true,
type: "ios",
expressions: []
},
{
expressions: [
{
feature: "orientation",
modifier: undefined,
value: "landscape"
}
],
inverse: false,
type: "all"
}
],
"@media print": [
{
inverse: false,
type: "print",
expressions: []
}
]
},
a: 1,
"@media not ios, (orientation: landscape)": {
a: 2
},
"@media print": {
a: 3
}
})
).toEqual({ a: 2 });
expect(
process({
__mediaQueries: {
"@media not ios, (orientation: portrait)": [
{
inverse: true,
type: "ios",
expressions: []
},
{
expressions: [
{
feature: "orientation",
modifier: undefined,
value: "portrait"
}
],
inverse: false,
type: "all"
}
],
"@media print": [
{
inverse: false,
type: "print",
expressions: []
}
]
},
a: 1,
"@media not ios, (orientation: portrait)": {
a: 2
},
"@media print": {
a: 3
}
})
).toEqual({ a: 1 });
});

it("should process media query with NOT and AND operators and platform", () => {
expect(
process({
__mediaQueries: {
"@media android": [
{
inverse: false,
type: "android",
expressions: []
}
],
"@media not ios and (orientation: landscape)": [
{
inverse: true,
type: "ios",
expressions: [
{
feature: "orientation",
modifier: undefined,
value: "landscape"
}
]
}
]
},
a: 1,
"@media android": {
a: 2
},
"@media not ios and (orientation: landscape)": {
a: 3
}
})
).toEqual({ a: 1 });
expect(
process({
__mediaQueries: {
"@media android": [
{
inverse: false,
type: "android",
expressions: []
}
],
"@media not ios and (orientation: portrait)": [
{
inverse: true,
type: "ios",
expressions: [
{
feature: "orientation",
modifier: undefined,
value: "portrait"
}
]
}
]
},
a: 1,
"@media android": {
a: 2
},
"@media not ios and (orientation: portrait)": {
a: 4
}
})
).toEqual({ a: 4 });
expect(
process({
__mediaQueries: {
"@media android": [
{
inverse: false,
type: "android",
expressions: []
}
],
"@media not android and (orientation: portrait)": [
{
inverse: true,
type: "android",
expressions: [
{
feature: "orientation",
modifier: undefined,
value: "portrait"
}
]
}
]
},
a: 1,
"@media android": {
a: 2
},
"@media not android and (orientation: portrait)": {
a: 3
}
})
).toEqual({ a: 3 });
});

it("should process media query with not operator and platform", () => {
expect(
process({
__mediaQueries: {
"@media android": [
{
inverse: false,
type: "android",
expressions: []
}
],
"@media not android": [
{
inverse: true,
type: "android",
expressions: []
}
]
},
a: 1,
"@media android": {
a: 2
},
"@media not android": {
a: 3
}
})
).toEqual({ a: 3 });
});

it("should ignore non-matching media queries", () => {
expect(
process({
Expand Down
2 changes: 1 addition & 1 deletion src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export function process(obj) {
const matchObject = getMatchObject();

mqKeys.forEach(key => {
if (/^@media\s+(ios|android)/i.test(key)) {
if (/^@media\s+(not\s+)?(ios|android)/i.test(key)) {
matchObject.type = Platform.OS;
} else {
matchObject.type = "screen";
Expand Down
16 changes: 12 additions & 4 deletions src/mediaquery.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,11 @@ function matchQuery(query, values) {
// equal for a match.
var typeMatch = query.type === "all" || values.type === query.type;

// Quit early when `type` doesn't match, but take "not" into account.
if ((typeMatch && inverse) || !(typeMatch || inverse)) {
return false;
if (query.expressions.length === 0) {
// Quit early when `type` doesn't match, but take "not" into account.
if ((typeMatch && inverse) || !(typeMatch || inverse)) {
return false;
}
}

var expressionsMatch = query.expressions.every(function(expression) {
Expand Down Expand Up @@ -90,7 +92,13 @@ function matchQuery(query, values) {
}
});

return (expressionsMatch && !inverse) || (!expressionsMatch && inverse);
const isMatch = typeMatch && expressionsMatch;

if (inverse) {
return !isMatch;
}

return isMatch;
}

// -- Utilities ----------------------------------------------------------------
Expand Down