shiwaforce / postcss-high-contrast Goto Github PK

you can add some options for images, and to use css filter (grayscale or contrast?) for it

You plugin will be much faster if you will use one walk:

css.walkDecls(function (decl) {
  if ( decl.prop === 'color' ) {
    …
  } else if ( decl.prop === 'background' ) {
    …
  } …
})

Hi,
can we use many customSelectors like this? i didn't find out how make it work

`customSelectors: ['#top1'],
customSelectorColor: '#fff',
customSelectorBackgroundColor: '#084679',
customSelectorBorderdColor: '#fff',

mysecond_customSelectors: ['#top2'],
mysecond_SelectorColor: '#fff',
mysecond_SelectorBackgroundColor: '#084679',
mysecond_SelectorBorderdColor: '#fff',

`

It would be great to add support for named color properties for example: "red", "green", "black" etc.

All PostCSS plugin must contain tests

customSelectors: ['*']

Is there any way to change the prop value for all class names instead of html element selectors?

What about to delete unused CSS ?
for example:
main.css:

body {
  position: relative;
}

contast.css:

body {
  position: relative;
  background-color: #000;
}

did we need position: relative; in new CSS ? may be new option for it?)

this is working very well. but it is possible to define a precise selector and it's contrast color?

.navbar > li > a{background:white;}
to
.navbar > li > a{background:red;}

Never use * version requirement in package.json. Of course your plugin will not work with PostCSS 6.0. "postcss": "^5.0.20" is much better way.

Current New York Times example is not the best, because New York Times has a good contract right now too. So people don’t see a benefits from using a plugin.

We need some better example with low-contrast website.

May be we need change border-color: transparent with color from options (borderColor) ?

I'm just use my own options and it is not work :(
here options, i just add console.log:

module.exports = postcss.plugin('postcss-high-contrast', function (opts) {
    console.log(opts);
    opts = extend({
        aggressiveHC: true,
        aggressiveHCDefaultSelectorList: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'li', 'th', 'td'],
        aggressiveHCCustomSelectorList: ['div', 'span'],
        backgroundColor: '#000',
        altBgColor: '#fff',
        textColor: '#fff',
        linkColor: '#fcff3c',
        linkHoverColor: '#000',
        linkHoverBgColor: '#000',
        borderColor: '#fff',
        disableShadow: true
    });

    console.log(opts);

in console:

[11:14:19] Starting 'contrast'...
{ aggressiveHC: true,
  aggressiveHCDefaultSelectorList: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'li', 'th', 'td' ],
  aggressiveHCCustomSelectorList: [ 'div', 'span' ],
  backgroundColor: '#fff',
  altBgColor: '#000',
  textColor: '#000',
  linkColor: '#000',
  linkHoverColor: '#ccc',
  borderColor: '#000',
  disableShadow: true }
{ aggressiveHC: true,
  aggressiveHCDefaultSelectorList: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'li', 'th', 'td' ],
  aggressiveHCCustomSelectorList: [ 'div', 'span' ],
  backgroundColor: '#000',
  altBgColor: '#fff',
  textColor: '#fff',
  linkColor: '#fcff3c',
  linkHoverColor: '#000',
  linkHoverBgColor: '#000',
  borderColor: '#fff',
  disableShadow: true }
[11:14:19] Finished 'contrast' after 33 ms

Our pluin boilerplate contains many very useful thing for open source project. You should move them:

• ChangeLog
• ESLint
• .editorconfig
• LICENSE
• .npmignore