Full Code of benface/tailwindcss-filters for AI

Repository: benface/tailwindcss-filters
Branch: main
Commit: 2f32bab6732d
Files: 8
Total size: 8.6 KB

Directory structure:
gitextract_tzlb7u4f/

├── .gitignore
├── .release-it.json
├── CHANGELOG.md
├── LICENSE.md
├── README.md
├── index.js
├── package.json
└── test.js

================================================
FILE CONTENTS
================================================

================================================
FILE: .gitignore
================================================
/node_modules/


================================================
FILE: .release-it.json
================================================
{
  "git": {
    "tagName": "v${version}",
    "requireCleanWorkingDir": false
  }
}


================================================
FILE: CHANGELOG.md
================================================
# Changelog

All notable changes to this project will be documented in this file.

The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project mostly adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

## [3.0.0] - 2020-02-05

### Changed
- Changed to use Tailwind 1.2’s new plugin definition syntax

## [2.0.0] - 2019-05-13

### Changed since 2.0.0-beta.1
- Added support for global variants thanks to Tailwind’s `variants()` helper function

### Added since 1.x
- Tailwind 1.0.0 compatibility

### Changed since 1.x
- The plugin doesn’t accept a config object anymore; instead it finds what it needs in the `theme` and `variants` keys of your config (see `README` for more info)
- Responsive variants are now generated by default

## [2.0.0-beta.1] - 2019-04-07

### Added
- Tailwind 1.0.0 compatibility

### Changed
- The plugin doesn’t accept a config object anymore; instead it finds what it needs in the `theme` and `variants` keys of your config (see `README` for more info)
- Responsive variants are now generated by default

## [1.0.2] - 2018-11-04

### Added
- Added proper tests with Jest

## [1.0.1] - 2018-08-14

### Fixed
- Fixed escaping in selectors generated by the plugin

## [1.0.0] - 2018-08-13

Initial release

[Unreleased]: https://github.com/benface/tailwindcss-filters/compare/v3.0.0...HEAD
[3.0.0]: https://github.com/benface/tailwindcss-filters/compare/v2.0.0...v3.0.0
[2.0.0]: https://github.com/benface/tailwindcss-filters/compare/v2.0.0-beta.1...v2.0.0
[2.0.0-beta.1]: https://github.com/benface/tailwindcss-filters/compare/v1.0.2...v2.0.0-beta.1
[1.0.2]: https://github.com/benface/tailwindcss-filters/compare/v1.0.1...v1.0.2
[1.0.1]: https://github.com/benface/tailwindcss-filters/compare/v1.0.0...v1.0.1
[1.0.0]: https://github.com/benface/tailwindcss-filters/releases/tag/v1.0.0


================================================
FILE: LICENSE.md
================================================
# ISC License

Copyright (c) Benoît Rouleau

Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.


================================================
FILE: README.md
================================================
# ⛔️ DEPRECATED

Tailwind CSS 2.1+ has built-in `filter` and `backdrop-filter` utilities such as [`blur`](https://tailwindcss.com/docs/blur), [`grayscale`](https://tailwindcss.com/docs/grayscale), [`sepia`](https://tailwindcss.com/docs/sepia), etc. Please use them instead of this plugin. Thank you!

# Filters Plugin for Tailwind CSS

## Requirements

This plugin requires Tailwind CSS 1.2 or later. If your project uses an older version of Tailwind, you should install the latest 2.x version of this plugin (`npm install tailwindcss-filters@2.x`).

## Installation

```bash
npm install tailwindcss-filters
```

## Usage

```js
// tailwind.config.js
module.exports = {
  theme: {
    filter: { // defaults to {}
      'none': 'none',
      'grayscale': 'grayscale(1)',
      'invert': 'invert(1)',
      'sepia': 'sepia(1)',
    },
    backdropFilter: { // defaults to {}
      'none': 'none',
      'blur': 'blur(20px)',
    },
  },
  variants: {
    filter: ['responsive'], // defaults to ['responsive']
    backdropFilter: ['responsive'], // defaults to ['responsive']
  },
  plugins: [
    require('tailwindcss-filters'),
  ],
};
```

This plugin generates the following utilities:

```css
/* configurable with the "filter" theme object */
.filter-[key] {
  filter: [value];
}

/* configurable with the "backdropFilter" theme object */
.backdrop-[key] {
  backdrop-filter: [value];
}
```


================================================
FILE: index.js
================================================
const plugin = require('tailwindcss/plugin');
const _ = require('lodash');

module.exports = plugin(function({ theme, variants, e, addUtilities }) {
  const filterUtilities = _.fromPairs(
    _.map(theme('filter'), (value, modifier) => {
      return [
        `.${e(`filter-${modifier}`)}`,
        {
          filter: value,
        },
      ];
    })
  );

  const backdropFilterUtilities = _.fromPairs(
    _.map(theme('backdropFilter'), (value, modifier) => {
      return [
        `.${e(`backdrop-${modifier}`)}`,
        {
          backdropFilter: value,
        },
      ];
    })
  );

  addUtilities(filterUtilities, variants('filter'));
  addUtilities(backdropFilterUtilities, variants('backdropFilter'));
}, {
  theme: {
    filter: {},
    backdropFilter: {},
  },
  variants: {
    filter: ['responsive'],
    backdropFilter: ['responsive'],
  },
});


================================================
FILE: package.json
================================================
{
  "name": "tailwindcss-filters",
  "version": "3.0.0",
  "description": "Tailwind CSS plugin to generate filter and backdrop filter utilities",
  "author": "Benoît Rouleau <benoit.rouleau@icloud.com>",
  "license": "ISC",
  "repository": "https://github.com/benface/tailwindcss-filters.git",
  "bugs": "https://github.com/benface/tailwindcss-filters/issues",
  "homepage": "https://github.com/benface/tailwindcss-filters",
  "scripts": {
    "test": "jest",
    "release": "f(){ release-it $1 && github-release-from-changelog ;};f"
  },
  "dependencies": {
    "lodash": "^4.17.19"
  },
  "devDependencies": {
    "github-release-from-changelog": "^2.1.1",
    "jest": "^26.1.0",
    "jest-matcher-css": "^1.1.0",
    "postcss": "^7.0.32",
    "release-it": "^13.6.5",
    "tailwindcss": "^1.5.1"
  }
}


================================================
FILE: test.js
================================================
const _ = require('lodash');
const cssMatcher = require('jest-matcher-css');
const postcss = require('postcss');
const tailwindcss = require('tailwindcss');
const filtersPlugin = require('./index.js');

const generatePluginCss = (config) => {
  return postcss(
    tailwindcss(
      _.merge({
        theme: {
          screens: {
            'sm': '640px',
          },
        },
        corePlugins: false,
        plugins: [
          filtersPlugin,
        ],
      }, config)
    )
  )
  .process('@tailwind utilities', {
    from: undefined,
  })
  .then(result => {
    return result.css;
  });
};

expect.extend({
  toMatchCss: cssMatcher,
});

test('there is no output by default', () => {
  return generatePluginCss().then(css => {
    expect(css).toMatchCss(`
      @media (min-width: 640px) {
      }
    `);
  });
});

test('utilities can be customized', () => {
  return generatePluginCss({
    theme: {
      filter: {
        'none': 'none',
        'grayscale': 'grayscale(1)',
        'invert': 'invert(1)',
        'sepia': 'sepia(1)',
      },
      backdropFilter: {
        'none': 'none',
        'blur': 'blur(20px)',
      },
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .filter-none {
        filter: none;
      }
      .filter-grayscale {
        filter: grayscale(1);
      }
      .filter-invert {
        filter: invert(1);
      }
      .filter-sepia {
        filter: sepia(1);
      }
      .backdrop-none {
        backdrop-filter: none;
      }
      .backdrop-blur {
        backdrop-filter: blur(20px);
      }
      @media (min-width: 640px) {
        .sm\\:filter-none {
          filter: none;
        }
        .sm\\:filter-grayscale {
          filter: grayscale(1);
        }
        .sm\\:filter-invert {
          filter: invert(1);
        }
        .sm\\:filter-sepia {
          filter: sepia(1);
        }
        .sm\\:backdrop-none {
          backdrop-filter: none;
        }
        .sm\\:backdrop-blur {
          backdrop-filter: blur(20px);
        }
      }
    `);
  });
});

test('variants can be customized', () => {
  return generatePluginCss({
    theme: {
      filter: {
        'none': 'none',
        'grayscale': 'grayscale(1)',
      },
      backdropFilter: {
        'none': 'none',
        'blur': 'blur(20px)',
      },
    },
    variants: {
      filter: ['hover'],
      backdropFilter: ['active'],
    },
  }).then(css => {
    expect(css).toMatchCss(`
      .filter-none {
        filter: none;
      }
      .filter-grayscale {
        filter: grayscale(1);
      }
      .hover\\:filter-none:hover {
        filter: none;
      }
      .hover\\:filter-grayscale:hover {
        filter: grayscale(1);
      }
      .backdrop-none {
        backdrop-filter: none;
      }
      .backdrop-blur {
        backdrop-filter: blur(20px);
      }
      .active\\:backdrop-none:active {
        backdrop-filter: none;
      }
      .active\\:backdrop-blur:active {
        backdrop-filter: blur(20px);
      }
    `);
  });
});