Skip to content
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

Jump to bottom

fix: fixed merging of unsupported pseudos by caniuse and browserlist #883

Open
wants to merge 5 commits into
base: master
Choose a base branch
from
Open

fix: fixed merging of unsupported pseudos by caniuse and browserlist #883

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
448455a
fix: merging of un-supported pseudo classes
anikethsaha Jun 9, 2020
2a8eb7d
test: fixed test
anikethsaha Jun 9, 2020
ad32f05
chore: added some more selectors of level 4
anikethsaha Jun 10, 2020
5c8c075
test: added test for merging
anikethsaha Jun 10, 2020
7c68ce6
chore: added some more pseudo sel
anikethsaha Jun 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/css-size/src/__tests__/index.js
View file
Open in desktop
Expand Up @@ -4,7 +4,7 @@ import path from 'path';
import colors from 'colors/safe';
import size, { table, numeric } from '../';

jest.setTimeout(15000);
jest.setTimeout(60000);

let noopProcessorPath = path.resolve(__dirname, '../../processors/noop.js');

Expand Down
2 changes: 1 addition & 1 deletion packages/cssnano-preset-advanced/src/__tests__/integrations/bootstrap-v4.2.1.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/cssnano-preset-advanced/src/__tests__/integrations/concise-v4.1.2.css
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions packages/cssnano-preset-advanced/src/__tests__/integrations/semantic-ui-v2.4.1.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/cssnano-preset-advanced/src/__tests__/integrations/turret-v5.1.3.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/cssnano-preset-advanced/src/__tests__/integrations/uikit-v3.0.3.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/cssnano-preset-default/src/__tests__/integrations/bootstrap-v4.2.1.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/cssnano-preset-default/src/__tests__/integrations/concise-v4.1.2.css
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions packages/cssnano-preset-default/src/__tests__/integrations/semantic-ui-v2.4.1.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/cssnano-preset-default/src/__tests__/integrations/turret-v5.1.3.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion packages/cssnano-preset-default/src/__tests__/integrations/uikit-v3.0.3.css
View file
Open in desktop

Large diffs are not rendered by default.

9 changes: 5 additions & 4 deletions packages/cssnano/src/__tests__/postcss-merge-rules.js
View file
Open in desktop
@@ -1,4 +1,6 @@
import processCss from './_processCss';
import processCss, { passthrough } from './_processCss';

jest.setTimeout(60000);

test(
'should merge based on declarations',
Expand Down Expand Up @@ -183,9 +185,8 @@ test(

test(
'should merge vendor prefixed selectors when vendors are the same',
processCss(
'code ::-moz-selection{background:red}code::-moz-selection{background:red}',
'code::-moz-selection,code ::-moz-selection{background:red}'
passthrough(
'code ::-moz-selection{background:red}code::-moz-selection{background:red}'
)
);

Expand Down
2 changes: 1 addition & 1 deletion packages/postcss-merge-rules/package.json
View file
Open in desktop
Expand Up @@ -27,7 +27,7 @@
},
"repository": "cssnano/cssnano",
"dependencies": {
"browserslist": "^4.6.0",
"browserslist": "^4.12.0",
"caniuse-api": "^3.0.0",
"cssnano-utils": "^1.0.0",
"postcss": "^7.0.16",
Expand Down
47 changes: 44 additions & 3 deletions packages/postcss-merge-rules/src/__tests__/index.js
View file
Open in desktop
Expand Up @@ -251,9 +251,50 @@ test(

test(
'should merge vendor prefixed selectors when vendors are the same',
processCSS(
'code ::-moz-selection{background:red}code::-moz-selection{background:red}',
'code ::-moz-selection,code::-moz-selection{background:red}'
passthroughCSS(
'code ::-moz-selection{background:red}code::-moz-selection{background:red}'
)
);

test(
'should not merge pseudo which are not supported by the browsers ::selection',
passthroughCSS('::selection{background:red} ::selection{background:red}')
);

test(
'should not merge pseudo which are not supported by the browsers - code ::selection',
passthroughCSS(
'code ::selection{background:red} code ::selection{background:red}'
)
);

test(
'should not merge pseudo which are not supported by the browsers - any link',
passthroughCSS(
'a:any-link { color: orange; } a:any-link { border: 1px solid blue;}',
{
env: 'not ie > 11',
}
)
);

test(
'should not merge pseudo which are not supported by the browsers - read-only',
passthroughCSS(
'p:read-only { color: orange; } p:read-only { border: 1px solid blue;}',
{
env: 'not ie > 11',
}
)
);

test(
'should not merge pseudo which are not supported by the browsers - read-write',
passthroughCSS(
'p:read-write { color: orange; } p:read-write { border: 1px solid blue;}',
{
env: 'not ie > 11',
}
)
);
anikethsaha marked this conversation as resolved.
Show resolved Hide resolved

Expand Down
22 changes: 22 additions & 0 deletions packages/postcss-merge-rules/src/__tests__/test2.js
View file
Open in desktop
@@ -0,0 +1,22 @@
import { processCSSFactory } from '../../../../util/testHelpers';
import plugin from '..';

const { processCSS } = processCSSFactory(plugin);

process.env.BROWSERSLIST = 'chrome 80';

test(
'should merge pseudo which are supported by the browsers - read-write',
processCSS(
'p:read-write { color: orange; } p:read-write { border: 1px solid blue;}',
'p:read-write { color: orange; border: 1px solid blue; }'
)
);

test(
'should merge pseudo which are supported by the browsers - read-only',
processCSS(
'p:read-only { color: orange; } p:read-only { border: 1px solid blue;}',
'p:read-only { color: orange; border: 1px solid blue; }'
)
);
15 changes: 13 additions & 2 deletions packages/postcss-merge-rules/src/lib/ensureCompatibility.js
View file
Open in desktop
@@ -1,3 +1,4 @@
import postcss from 'postcss';
import { isSupported } from 'caniuse-api';
import selectorParser from 'postcss-selector-parser';

Expand All @@ -20,10 +21,12 @@ export const pseudoElements = {
':disabled': cssSel3,
':empty': cssSel3,
':enabled': cssSel3,
':first': cssSel2,
':first-child': cssSel2,
':first-letter': cssFirstLetter,
':first-line': cssFirstLine,
':first-of-type': cssSel3,
':left': cssSel2,
':focus': cssSel2,
':focus-within': 'css-focus-within',
':focus-visible': 'css-focus-visible',
Expand All @@ -34,6 +37,8 @@ export const pseudoElements = {
':lang': cssSel2,
':last-child': cssSel3,
':last-of-type': cssSel3,
':link': cssSel3,
':right': cssSel2,
':matches': 'css-matches-pseudo',
':not': cssSel3,
':nth-child': cssSel3,
Expand All @@ -55,6 +60,10 @@ export const pseudoElements = {
'::marker': 'css-marker-pseudo',
'::placeholder': 'css-placeholder',
'::selection': 'css-selection',
':visited': cssSel3,
':any-link': 'css-any-link',
':read-only': 'css-read-only-write',
':read-write': 'css-read-only-write',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can have more pseudo here

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess I all covered the level 4. let me check if I missed others.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we create script to generate this stuff from caniuse-api? It is allow to validate we nothing is missed

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i will check

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, I am afraid we can missing something, so we need script to generate and validate it

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what I am thinking is to simply query using the code name like for :react-write , query using react-write. but two issue can come

  • there may be more that one result, and we dont know which is correct
  • there may be no result as the query can be different

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe we can parse all existing pseudo from css-whatwg?

};

function isCssMixin(selector) {
Expand Down Expand Up @@ -97,8 +106,10 @@ export default function ensureCompatibility(
ast.walk((node) => {
const { type, value } = node;
if (type === 'pseudo') {
const entry = pseudoElements[value];
if (entry && compatible) {
const entry = pseudoElements[postcss.vendor.unprefixed(value)];
if (!entry) {
compatible = false;
} else if (compatible) {
compatible = isSupportedCached(entry, browsers);
}
}
Expand Down
73 changes: 72 additions & 1 deletion packages/postcss-merge-rules/yarn.lock
View file
Open in desktop
Expand Up @@ -9,7 +9,7 @@ ansi-styles@^3.2.1:
dependencies:
color-convert "^1.9.0"

browserslist@^4.0.0, browserslist@^4.6.0:
browserslist@^4.0.0:
version "4.9.1"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.9.1.tgz#01ffb9ca31a1aef7678128fc6a2253316aa7287c"
integrity sha512-Q0DnKq20End3raFulq6Vfp1ecB9fh8yUNV55s8sekaDDeqBaCtWlRHCUdaWyUeSSBJM7IbM6HcsyaeYqgeDhnw==
Expand All @@ -18,6 +18,16 @@ browserslist@^4.0.0, browserslist@^4.6.0:
electron-to-chromium "^1.3.363"
node-releases "^1.1.50"

browserslist@^4.12.0:
version "4.12.0"
resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.12.0.tgz#06c6d5715a1ede6c51fc39ff67fd647f740b656d"
integrity sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==
dependencies:
caniuse-lite "^1.0.30001043"
electron-to-chromium "^1.3.413"
node-releases "^1.1.53"
pkg-up "^2.0.0"

caniuse-api@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/caniuse-api/-/caniuse-api-3.0.0.tgz#5e4d90e2274961d46291997df599e3ed008ee4c0"
Expand All @@ -33,6 +43,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001030:
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001035.tgz#2bb53b8aa4716b2ed08e088d4dc816a5fe089a1e"
integrity sha512-C1ZxgkuA4/bUEdMbU5WrGY4+UhMFFiXrgNAfxiMIqWgFTWfv/xsZCS2xEHT2LMq7xAZfuAnu6mcqyDl0ZR6wLQ==

caniuse-lite@^1.0.30001043:
version "1.0.30001081"
resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001081.tgz#40615a3c416a047c5a4d45673e5257bf128eb3b5"
integrity sha512-iZdh3lu09jsUtLE6Bp8NAbJskco4Y3UDtkR3GTCJGsbMowBU5IWDFF79sV2ws7lSqTzWyKazxam2thasHymENQ==

chalk@^2.4.2:
version "2.4.2"
resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
Expand Down Expand Up @@ -66,11 +81,23 @@ electron-to-chromium@^1.3.363:
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.378.tgz#18c572cbb54bf5b2769855597cdc7511c02b481f"
integrity sha512-nBp/AfhaVIOnfwgL1CZxt80IcqWcyYXiX6v5gflAksxy+SzBVz7A7UWR1Nos92c9ofXW74V9PoapzRb0jJfYXw==

electron-to-chromium@^1.3.413:
version "1.3.466"
resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.466.tgz#89f716db3afc4bb482ea2aaaa16c4808f89f762a"
integrity sha512-eieqkoM2hCkZZRhETKyCouMziDV3l4XEKHRLuzcHG+HV+P7PeODU/z9HAmBgMQkzvHg2DoyQhfIDmmeguLZT/Q==

escape-string-regexp@^1.0.5:
version "1.0.5"
resolved "https://registry.yarnpkg.com/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz#1b61c0562190a8dff6ae3bb2cf0200ca130b86d4"
integrity sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=

find-up@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
integrity sha1-RdG35QbHF93UgndaK3eSCjwMV6c=
dependencies:
locate-path "^2.0.0"

has-flag@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-3.0.0.tgz#b5d454dc2199ae225699f3467e5a07f3b955bafd"
Expand All @@ -86,6 +113,14 @@ is-obj@^2.0.0:
resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982"
integrity sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w==

locate-path@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
integrity sha1-K1aLJl7slExtnA3pw9u7ygNUzY4=
dependencies:
p-locate "^2.0.0"
path-exists "^3.0.0"

lodash.memoize@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
Expand All @@ -103,6 +138,42 @@ node-releases@^1.1.50:
dependencies:
semver "^6.3.0"

node-releases@^1.1.53:
version "1.1.58"
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.58.tgz#8ee20eef30fa60e52755fcc0942def5a734fe935"
integrity sha512-NxBudgVKiRh/2aPWMgPR7bPTX0VPmGx5QBwCtdHitnqFE5/O8DeBXuIMH1nwNnw/aMo6AjOrpsHzfY3UbUJ7yg==

p-limit@^1.1.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.3.0.tgz#b86bd5f0c25690911c7590fcbfc2010d54b3ccb8"
integrity sha512-vvcXsLAJ9Dr5rQOPk7toZQZJApBl2K4J6dANSsEuh6QI41JYcsS/qhTGa9ErIUUgK3WNQoJYvylxvjqmiqEA9Q==
dependencies:
p-try "^1.0.0"

p-locate@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-2.0.0.tgz#20a0103b222a70c8fd39cc2e580680f3dde5ec43"
integrity sha1-IKAQOyIqcMj9OcwuWAaA893l7EM=
dependencies:
p-limit "^1.1.0"

p-try@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3"
integrity sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M=

path-exists@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=

pkg-up@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
integrity sha1-yBmscoBZpGHKscOImivjxJoATX8=
dependencies:
find-up "^2.1.0"

postcss-selector-parser@^3.1.1:
version "3.1.2"
resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-3.1.2.tgz#b310f5c4c0fdaf76f94902bbaa30db6aa84f5270"
Expand Down