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 1 commit
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: 2 additions & 0 deletions packages/cssnano/src/__tests__/postcss-merge-rules.js
View file
Open in desktop
@@ -1,5 +1,7 @@
import processCss, { passthrough } from './_processCss';

jest.setTimeout(60000);

test(
'should merge based on declarations',
processCss('h1{display:block}h2{display:block}', 'h1,h2{display:block}')
Expand Down
30 changes: 30 additions & 0 deletions packages/postcss-merge-rules/src/__tests__/index.js
View file
Open in desktop
Expand Up @@ -268,6 +268,36 @@ test(
)
);

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

test(
'should not merge mixed vendor prefixes',
passthroughCSS(
Expand Down
3 changes: 3 additions & 0 deletions packages/postcss-merge-rules/src/lib/ensureCompatibility.js
View file
Open in desktop
Expand Up @@ -57,6 +57,9 @@ export const pseudoElements = {
'::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