Initial commit

Signed-off-by: Peter Neupauer <[email protected]>

.github/workflows/npm-publish.yml

@@ -0,0 +1,47 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+#   build:
+#     runs-on: ubuntu-latest
+#     steps:
+#       - uses: actions/checkout@v2
+#       - uses: actions/setup-node@v1
+#         with:
+#           node-version: 12
+#       - run: npm ci
+#       - run: npm test
+
+  publish-npm:
+    # needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://registry.npmjs.org/
+      - run: npm install
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+
+  publish-gpr:
+#     needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+          registry-url: https://npm.pkg.github.com/
+      - run: npm install
+      - run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+package-lock.json
+yarn.lock

.npmignore

@@ -0,0 +1,7 @@
+.github
+dist
+node_modules
+scripts
+jsconfig.json
+package-lock.json
+yarn.lock

README.md

@@ -0,0 +1,84 @@
+# Tailwind CSS Plugin – Blend Mode
+
+Utilities for controlling blending mode behaviour.
+
+## Install
+
+1. Install the plugin:
+
+```bash
+# Using npm
+npm install @neupauer/tailwindcss-plugin-blend-mode
+
+# Using Yarn
+yarn add @neupauer/tailwindcss-plugin-blend-mode
+```
+
+2. Add it to your `tailwind.config.js` file:
+
+```js
+// tailwind.config.js
+module.exports = {
+  // ...
+  plugins: [require("@neupauer/tailwindcss-plugin-blend-mode")],
+};
+```
+
+## Configuration
+
+```js
+// tailwind.config.js
+module.exports = {
+  variants: {
+    // default
+    blendMode: [],
+  },
+};
+```
+
+## Available Utilities
+
+| Utility                  | Style                                |
+| ------------------------ | ------------------------------------ |
+| `.isolate`               | `isolation: isolate`                 |
+| `.no-isolate`            | `isolation: auto`                    |
+| `.mix-blend-normal`      | `mix-blend-mode: normal`             |
+| `.mix-blend-multiply`    | `mix-blend-mode: multiply`           |
+| `.mix-blend-screen`      | `mix-blend-mode: screen`             |
+| `.mix-blend-overlay`     | `mix-blend-mode: overlay`            |
+| `.mix-blend-darken`      | `mix-blend-mode: darken`             |
+| `.mix-blend-lighten`     | `mix-blend-mode: lighten`            |
+| `.mix-blend-color-dodge` | `mix-blend-mode: color-dodge`        |
+| `.mix-blend-color-burn`  | `mix-blend-mode: color-burn`         |
+| `.mix-blend-hard-light`  | `mix-blend-mode: hard-light`         |
+| `.mix-blend-soft-light`  | `mix-blend-mode: soft-light`         |
+| `.mix-blend-difference`  | `mix-blend-mode: difference`         |
+| `.mix-blend-exclusion`   | `mix-blend-mode: exclusion`          |
+| `.mix-blend-hue`         | `mix-blend-mode: hue`                |
+| `.mix-blend-saturation`  | `mix-blend-mode: saturation`         |
+| `.mix-blend-color`       | `mix-blend-mode: color`              |
+| `.mix-blend-luminosity`  | `mix-blend-mode: luminosity`         |
+| `.bg-blend-normal`       | `background-blend-mode: normal`      |
+| `.bg-blend-multiply`     | `background-blend-mode: multiply`    |
+| `.bg-blend-screen`       | `background-blend-mode: screen`      |
+| `.bg-blend-overlay`      | `background-blend-mode: overlay`     |
+| `.bg-blend-darken`       | `background-blend-mode: darken`      |
+| `.bg-blend-lighten`      | `background-blend-mode: lighten`     |
+| `.bg-blend-color-dodge`  | `background-blend-mode: color-dodge` |
+| `.bg-blend-color-burn`   | `background-blend-mode: color-burn`  |
+| `.bg-blend-hard-light`   | `background-blend-mode: hard-light`  |
+| `.bg-blend-soft-light`   | `background-blend-mode: soft-light`  |
+| `.bg-blend-difference`   | `background-blend-mode: difference`  |
+| `.bg-blend-exclusion`    | `background-blend-mode: exclusion`   |
+| `.bg-blend-hue`          | `background-blend-mode: hue`         |
+| `.bg-blend-saturation`   | `background-blend-mode: saturation`  |
+| `.bg-blend-color`        | `background-blend-mode: color`       |
+| `.bg-blend-luminosity`   | `background-blend-mode: luminosity`  |
+
+## Usage
+
+```html
+<div class="bg-blend-hue"></div>
+<div class="mix-blend-color"></div>
+<div class="isolate mix-blend-darken"></div>
+```

dist/.gitignore

@@ -0,0 +1,3 @@
+*
+!.gitignore
+!.npmignore

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@neupauer/tailwindcss-plugin-blend-mode",
+  "version": "1.0.0",
+  "description": "A Tailwind CSS plugin for controlling blending mode behaviour.",
+  "main": "src/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/neupauer/tailwindcss-plugin-blend-mode"
+  },
+  "keywords": [
+    "tailwindcss",
+    "plugin",
+    "blend-mode",
+    "mix-blend-mode",
+    "background-blend-mode"
+  ],
+  "author": {
+    "name": "Peter Neupauer",
+    "url": "https://neupauer.sk"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "prepublishOnly": "node scripts/build.js"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.2.0",
+    "clean-css": "^4.2.1",
+    "postcss": "^8.2.2",
+    "tailwindcss": "^2.0.2"
+  },
+  "prettier": {
+    "printWidth": 120
+  }
+}

scripts/build.js

@@ -0,0 +1,37 @@
+const fs = require("fs");
+const postcss = require("postcss");
+const tailwind = require("tailwindcss");
+const CleanCSS = require("clean-css");
+
+function buildDistFile(filename) {
+  return postcss([
+    tailwind({
+      corePlugins: false,
+
+      plugins: [require("../src/index.js")],
+    }),
+    require("autoprefixer"),
+  ])
+    .process("@tailwind utilities", {
+      from: null,
+      to: `./dist/${filename}.css`,
+      map: false,
+    })
+    .then((result) => {
+      fs.writeFileSync(`./dist/${filename}.css`, result.css);
+      return result;
+    })
+    .then((result) => {
+      const minified = new CleanCSS().minify(result.css);
+      fs.writeFileSync(`./dist/${filename}.min.css`, minified.styles);
+    })
+    .catch((error) => {
+      console.log(error);
+    });
+}
+
+console.info("Building CSS...");
+
+Promise.all([buildDistFile("dist")]).then(() => {
+  console.log("Finished building CSS.");
+});

src/index.js

@@ -0,0 +1,52 @@
+const plugin = require("tailwindcss/plugin");
+
+const blendModes = [
+  "normal",
+  "multiply",
+  "screen",
+  "overlay",
+  "darken",
+  "lighten",
+  "color-dodge",
+  "color-burn",
+  "hard-light",
+  "soft-light",
+  "difference",
+  "exclusion",
+  "hue",
+  "saturation",
+  "color",
+  "luminosity",
+];
+
+const blendModePlugin = plugin(function ({ addUtilities, theme, variants, e }) {
+  addUtilities(
+    [
+      {
+        ".isolate": {
+          isolation: "isolate",
+        },
+        ".no-isolate": {
+          isolation: "auto",
+        },
+      },
+      ...blendModes.map((blendMode) => {
+        return {
+          [`.${e(`mix-blend-${blendMode}`)}`]: {
+            mixBlendMode: `${blendMode}`,
+          },
+        };
+      }),
+      ...blendModes.map((blendMode) => {
+        return {
+          [`.${e(`bg-blend-${blendMode}`)}`]: {
+            backgroundBlendMode: `${blendMode}`,
+          },
+        };
+      }),
+    ],
+    variants("blendMode")
+  );
+});
+
+module.exports = blendModePlugin;