Skip to content
This repository was archived by the owner on Apr 4, 2021. It is now read-only.

Commit 142fada

Browse files
neupauerneupauer
committed
Initial commit
Signed-off-by: Peter Neupauer <[email protected]>
0 parents  commit 142fada

File tree

9 files changed

+270
-0
lines changed

9 files changed

+270
-0
lines changed

‎.github/workflows/npm-publish.yml

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
2+
# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
3+
4+
name: Node.js Package
5+
6+
on:
7+
release:
8+
types: [created]
9+
10+
jobs:
11+
# build:
12+
# runs-on: ubuntu-latest
13+
# steps:
14+
# - uses: actions/checkout@v2
15+
# - uses: actions/setup-node@v1
16+
# with:
17+
# node-version: 12
18+
# - run: npm ci
19+
# - run: npm test
20+
21+
publish-npm:
22+
# needs: build
23+
runs-on: ubuntu-latest
24+
steps:
25+
- uses: actions/checkout@v2
26+
- uses: actions/setup-node@v1
27+
with:
28+
node-version: 12
29+
registry-url: https://registry.npmjs.org/
30+
- run: npm install
31+
- run: npm publish --access public
32+
env:
33+
NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
34+
35+
publish-gpr:
36+
# needs: build
37+
runs-on: ubuntu-latest
38+
steps:
39+
- uses: actions/checkout@v2
40+
- uses: actions/setup-node@v1
41+
with:
42+
node-version: 12
43+
registry-url: https://npm.pkg.github.com/
44+
- run: npm install
45+
- run: npm publish --access public
46+
env:
47+
NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

‎.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
package-lock.json
3+
yarn.lock

‎.npmignore

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.github
2+
dist
3+
node_modules
4+
scripts
5+
jsconfig.json
6+
package-lock.json
7+
yarn.lock

‎README.md

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
# Tailwind CSS Plugin – Blend Mode
2+
3+
Utilities for controlling blending mode behaviour.
4+
5+
## Install
6+
7+
1. Install the plugin:
8+
9+
```bash
10+
# Using npm
11+
npm install @neupauer/tailwindcss-plugin-blend-mode
12+
13+
# Using Yarn
14+
yarn add @neupauer/tailwindcss-plugin-blend-mode
15+
```
16+
17+
2. Add it to your `tailwind.config.js` file:
18+
19+
```js
20+
// tailwind.config.js
21+
module.exports = {
22+
// ...
23+
plugins: [require("@neupauer/tailwindcss-plugin-blend-mode")],
24+
};
25+
```
26+
27+
## Configuration
28+
29+
```js
30+
// tailwind.config.js
31+
module.exports = {
32+
variants: {
33+
// default
34+
blendMode: [],
35+
},
36+
};
37+
```
38+
39+
## Available Utilities
40+
41+
| Utility | Style |
42+
| ------------------------ | ------------------------------------ |
43+
| `.isolate` | `isolation: isolate` |
44+
| `.no-isolate` | `isolation: auto` |
45+
| `.mix-blend-normal` | `mix-blend-mode: normal` |
46+
| `.mix-blend-multiply` | `mix-blend-mode: multiply` |
47+
| `.mix-blend-screen` | `mix-blend-mode: screen` |
48+
| `.mix-blend-overlay` | `mix-blend-mode: overlay` |
49+
| `.mix-blend-darken` | `mix-blend-mode: darken` |
50+
| `.mix-blend-lighten` | `mix-blend-mode: lighten` |
51+
| `.mix-blend-color-dodge` | `mix-blend-mode: color-dodge` |
52+
| `.mix-blend-color-burn` | `mix-blend-mode: color-burn` |
53+
| `.mix-blend-hard-light` | `mix-blend-mode: hard-light` |
54+
| `.mix-blend-soft-light` | `mix-blend-mode: soft-light` |
55+
| `.mix-blend-difference` | `mix-blend-mode: difference` |
56+
| `.mix-blend-exclusion` | `mix-blend-mode: exclusion` |
57+
| `.mix-blend-hue` | `mix-blend-mode: hue` |
58+
| `.mix-blend-saturation` | `mix-blend-mode: saturation` |
59+
| `.mix-blend-color` | `mix-blend-mode: color` |
60+
| `.mix-blend-luminosity` | `mix-blend-mode: luminosity` |
61+
| `.bg-blend-normal` | `background-blend-mode: normal` |
62+
| `.bg-blend-multiply` | `background-blend-mode: multiply` |
63+
| `.bg-blend-screen` | `background-blend-mode: screen` |
64+
| `.bg-blend-overlay` | `background-blend-mode: overlay` |
65+
| `.bg-blend-darken` | `background-blend-mode: darken` |
66+
| `.bg-blend-lighten` | `background-blend-mode: lighten` |
67+
| `.bg-blend-color-dodge` | `background-blend-mode: color-dodge` |
68+
| `.bg-blend-color-burn` | `background-blend-mode: color-burn` |
69+
| `.bg-blend-hard-light` | `background-blend-mode: hard-light` |
70+
| `.bg-blend-soft-light` | `background-blend-mode: soft-light` |
71+
| `.bg-blend-difference` | `background-blend-mode: difference` |
72+
| `.bg-blend-exclusion` | `background-blend-mode: exclusion` |
73+
| `.bg-blend-hue` | `background-blend-mode: hue` |
74+
| `.bg-blend-saturation` | `background-blend-mode: saturation` |
75+
| `.bg-blend-color` | `background-blend-mode: color` |
76+
| `.bg-blend-luminosity` | `background-blend-mode: luminosity` |
77+
78+
## Usage
79+
80+
```html
81+
<div class="bg-blend-hue"></div>
82+
<div class="mix-blend-color"></div>
83+
<div class="isolate mix-blend-darken"></div>
84+
```

‎dist/.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
*
2+
!.gitignore
3+
!.npmignore

‎dist/.npmignore

Whitespace-only changes.

‎package.json

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"name": "@neupauer/tailwindcss-plugin-blend-mode",
3+
"version": "1.0.0",
4+
"description": "A Tailwind CSS plugin for controlling blending mode behaviour.",
5+
"main": "src/index.js",
6+
"repository": {
7+
"type": "git",
8+
"url": "https://github.com/neupauer/tailwindcss-plugin-blend-mode"
9+
},
10+
"keywords": [
11+
"tailwindcss",
12+
"plugin",
13+
"blend-mode",
14+
"mix-blend-mode",
15+
"background-blend-mode"
16+
],
17+
"author": {
18+
"name": "Peter Neupauer",
19+
"url": "https://neupauer.sk"
20+
},
21+
"license": "MIT",
22+
"publishConfig": {
23+
"access": "public"
24+
},
25+
"scripts": {
26+
"prepublishOnly": "node scripts/build.js"
27+
},
28+
"devDependencies": {
29+
"autoprefixer": "^10.2.0",
30+
"clean-css": "^4.2.1",
31+
"postcss": "^8.2.2",
32+
"tailwindcss": "^2.0.2"
33+
},
34+
"prettier": {
35+
"printWidth": 120
36+
}
37+
}

‎scripts/build.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
const fs = require("fs");
2+
const postcss = require("postcss");
3+
const tailwind = require("tailwindcss");
4+
const CleanCSS = require("clean-css");
5+
6+
function buildDistFile(filename) {
7+
return postcss([
8+
tailwind({
9+
corePlugins: false,
10+
11+
plugins: [require("../src/index.js")],
12+
}),
13+
require("autoprefixer"),
14+
])
15+
.process("@tailwind utilities", {
16+
from: null,
17+
to: `./dist/${filename}.css`,
18+
map: false,
19+
})
20+
.then((result) => {
21+
fs.writeFileSync(`./dist/${filename}.css`, result.css);
22+
return result;
23+
})
24+
.then((result) => {
25+
const minified = new CleanCSS().minify(result.css);
26+
fs.writeFileSync(`./dist/${filename}.min.css`, minified.styles);
27+
})
28+
.catch((error) => {
29+
console.log(error);
30+
});
31+
}
32+
33+
console.info("Building CSS...");
34+
35+
Promise.all([buildDistFile("dist")]).then(() => {
36+
console.log("Finished building CSS.");
37+
});

‎src/index.js

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
const plugin = require("tailwindcss/plugin");
2+
3+
const blendModes = [
4+
"normal",
5+
"multiply",
6+
"screen",
7+
"overlay",
8+
"darken",
9+
"lighten",
10+
"color-dodge",
11+
"color-burn",
12+
"hard-light",
13+
"soft-light",
14+
"difference",
15+
"exclusion",
16+
"hue",
17+
"saturation",
18+
"color",
19+
"luminosity",
20+
];
21+
22+
const blendModePlugin = plugin(function ({ addUtilities, theme, variants, e }) {
23+
addUtilities(
24+
[
25+
{
26+
".isolate": {
27+
isolation: "isolate",
28+
},
29+
".no-isolate": {
30+
isolation: "auto",
31+
},
32+
},
33+
...blendModes.map((blendMode) => {
34+
return {
35+
[`.${e(`mix-blend-${blendMode}`)}`]: {
36+
mixBlendMode: `${blendMode}`,
37+
},
38+
};
39+
}),
40+
...blendModes.map((blendMode) => {
41+
return {
42+
[`.${e(`bg-blend-${blendMode}`)}`]: {
43+
backgroundBlendMode: `${blendMode}`,
44+
},
45+
};
46+
}),
47+
],
48+
variants("blendMode")
49+
);
50+
});
51+
52+
module.exports = blendModePlugin;

0 commit comments

Comments
 (0)