diff --git a/README.md b/README.md index dac91ab..9527f67 100755 --- a/README.md +++ b/README.md @@ -73,6 +73,8 @@ module.exports = { } ``` +**You can find a list of all generated utilities in the [List of all utilities](https://github.com/markusantonwolf/tailwindcss-filters/blob/master/public/utilities.css).** + ## Licence Tailwind CSS Plugin Filter utilities is released under the [MIT license](https://github.com/markusantonwolf/tailwindcss-filters/blob/master/licence.md) & supports modern environments. diff --git a/package-lock.json b/package-lock.json index 495aa9d..8dac54f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -109,6 +109,16 @@ "integrity": "sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==", "dev": true }, + "camel-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz", + "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==", + "dev": true, + "requires": { + "pascal-case": "^3.1.2", + "tslib": "^2.0.3" + } + }, "camelcase-css": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz", @@ -121,6 +131,17 @@ "integrity": "sha512-8cEsSMwXfx7lWSUMA2s08z9dIgsnR5NAqjXP23stdsU3AUWkCr/rr4s4OFtHXn5XXr6+7kam3QFVoYyXNPdJPA==", "dev": true }, + "capital-case": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz", + "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, "chalk": { "version": "2.4.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", @@ -143,6 +164,26 @@ } } }, + "change-case": { + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", + "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==", + "dev": true, + "requires": { + "camel-case": "^4.1.2", + "capital-case": "^1.0.4", + "constant-case": "^3.0.4", + "dot-case": "^3.0.4", + "header-case": "^2.0.4", + "no-case": "^3.0.4", + "param-case": "^3.0.4", + "pascal-case": "^3.1.2", + "path-case": "^3.0.4", + "sentence-case": "^3.0.4", + "snake-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "clean-css": { "version": "4.2.3", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz", @@ -205,6 +246,17 @@ "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=", "dev": true }, + "constant-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz", + "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case": "^2.0.2" + } + }, "css-unit-converter": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/css-unit-converter/-/css-unit-converter-1.1.2.tgz", @@ -234,6 +286,16 @@ "minimist": "^1.1.1" } }, + "dot-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", + "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "electron-to-chromium": { "version": "1.3.616", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.616.tgz", @@ -310,6 +372,16 @@ "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=", "dev": true }, + "header-case": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz", + "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==", + "dev": true, + "requires": { + "capital-case": "^1.0.4", + "tslib": "^2.0.3" + } + }, "html-tags": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.1.0.tgz", @@ -374,6 +446,15 @@ "integrity": "sha1-JMS/zWsvuji/0FlNsRedjptlZWE=", "dev": true }, + "lower-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", + "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", + "dev": true, + "requires": { + "tslib": "^2.0.3" + } + }, "minimatch": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz", @@ -389,6 +470,16 @@ "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==", "dev": true }, + "no-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", + "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", + "dev": true, + "requires": { + "lower-case": "^2.0.2", + "tslib": "^2.0.3" + } + }, "node-emoji": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/node-emoji/-/node-emoji-1.10.0.tgz", @@ -443,6 +534,36 @@ "wrappy": "1" } }, + "param-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", + "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==", + "dev": true, + "requires": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "pascal-case": { + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", + "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, + "path-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz", + "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==", + "dev": true, + "requires": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "path-is-absolute": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz", @@ -603,6 +724,17 @@ "path-parse": "^1.0.6" } }, + "sentence-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz", + "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==", + "dev": true, + "requires": { + "no-case": "^3.0.4", + "tslib": "^2.0.3", + "upper-case-first": "^2.0.2" + } + }, "simple-swizzle": { "version": "0.2.2", "resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.2.tgz", @@ -612,6 +744,16 @@ "is-arrayish": "^0.3.1" } }, + "snake-case": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", + "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", + "dev": true, + "requires": { + "dot-case": "^3.0.4", + "tslib": "^2.0.3" + } + }, "source-map": { "version": "0.6.1", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", @@ -708,6 +850,12 @@ } } }, + "tslib": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.0.3.tgz", + "integrity": "sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==", + "dev": true + }, "uniq": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/uniq/-/uniq-1.0.1.tgz", @@ -720,6 +868,24 @@ "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==", "dev": true }, + "upper-case": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz", + "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==", + "dev": true, + "requires": { + "tslib": "^2.0.3" + } + }, + "upper-case-first": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz", + "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==", + "dev": true, + "requires": { + "tslib": "^2.0.3" + } + }, "util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index d2f3a43..dabacc7 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "license": "MIT", "devDependencies": { "autoprefixer": "^9.6.1", + "change-case": "^4.1.2", "clean-css": "^4.2.1", "lodash": "^4.17.20", "tailwindcss": "^1.8.3" diff --git a/public/utilities.css b/public/utilities.css new file mode 100644 index 0000000..a838435 --- /dev/null +++ b/public/utilities.css @@ -0,0 +1,452 @@ +.filter-0 { + filter: none; +} + +.drop-shadow { + filter: drop-shadow(var(--tw-filter-size, 0px 0px 2px) var(--tw-filter-color, #000000)); +} + +.drop-shadow-sm { + --tw-filter-size: 0px 0px 2px; +} + +.drop-shadow-md { + --tw-filter-size: 0px 0px 4px; +} + +.drop-shadow-lg { + --tw-filter-size: 0px 0px 8px; +} + +.drop-shadow-xl { + --tw-filter-size: 0px 0px 16px; +} + +.drop-shadow-2xl { + --tw-filter-size: 0px 0px 32px; +} + +.drop-shadow-transparent { + --tw-filter-color: transparent; +} + +.drop-shadow-current { + --tw-filter-color: currentColor; +} + +.drop-shadow-black { + --tw-filter-color: #000; +} + +.drop-shadow-white { + --tw-filter-color: #fff; +} + +.drop-shadow-gray-100 { + --tw-filter-color: #f7fafc; +} + +.drop-shadow-gray-200 { + --tw-filter-color: #edf2f7; +} + +.drop-shadow-gray-300 { + --tw-filter-color: #e2e8f0; +} + +.drop-shadow-gray-400 { + --tw-filter-color: #cbd5e0; +} + +.drop-shadow-gray-500 { + --tw-filter-color: #a0aec0; +} + +.drop-shadow-gray-600 { + --tw-filter-color: #718096; +} + +.drop-shadow-gray-700 { + --tw-filter-color: #4a5568; +} + +.drop-shadow-gray-800 { + --tw-filter-color: #2d3748; +} + +.drop-shadow-gray-900 { + --tw-filter-color: #1a202c; +} + +.drop-shadow-red-100 { + --tw-filter-color: #fff5f5; +} + +.drop-shadow-red-200 { + --tw-filter-color: #fed7d7; +} + +.drop-shadow-red-300 { + --tw-filter-color: #feb2b2; +} + +.drop-shadow-red-400 { + --tw-filter-color: #fc8181; +} + +.drop-shadow-red-500 { + --tw-filter-color: #f56565; +} + +.drop-shadow-red-600 { + --tw-filter-color: #e53e3e; +} + +.drop-shadow-red-700 { + --tw-filter-color: #c53030; +} + +.drop-shadow-red-800 { + --tw-filter-color: #9b2c2c; +} + +.drop-shadow-red-900 { + --tw-filter-color: #742a2a; +} + +.drop-shadow-orange-100 { + --tw-filter-color: #fffaf0; +} + +.drop-shadow-orange-200 { + --tw-filter-color: #feebc8; +} + +.drop-shadow-orange-300 { + --tw-filter-color: #fbd38d; +} + +.drop-shadow-orange-400 { + --tw-filter-color: #f6ad55; +} + +.drop-shadow-orange-500 { + --tw-filter-color: #ed8936; +} + +.drop-shadow-orange-600 { + --tw-filter-color: #dd6b20; +} + +.drop-shadow-orange-700 { + --tw-filter-color: #c05621; +} + +.drop-shadow-orange-800 { + --tw-filter-color: #9c4221; +} + +.drop-shadow-orange-900 { + --tw-filter-color: #7b341e; +} + +.drop-shadow-yellow-100 { + --tw-filter-color: #fffff0; +} + +.drop-shadow-yellow-200 { + --tw-filter-color: #fefcbf; +} + +.drop-shadow-yellow-300 { + --tw-filter-color: #faf089; +} + +.drop-shadow-yellow-400 { + --tw-filter-color: #f6e05e; +} + +.drop-shadow-yellow-500 { + --tw-filter-color: #ecc94b; +} + +.drop-shadow-yellow-600 { + --tw-filter-color: #d69e2e; +} + +.drop-shadow-yellow-700 { + --tw-filter-color: #b7791f; +} + +.drop-shadow-yellow-800 { + --tw-filter-color: #975a16; +} + +.drop-shadow-yellow-900 { + --tw-filter-color: #744210; +} + +.drop-shadow-green-100 { + --tw-filter-color: #f0fff4; +} + +.drop-shadow-green-200 { + --tw-filter-color: #c6f6d5; +} + +.drop-shadow-green-300 { + --tw-filter-color: #9ae6b4; +} + +.drop-shadow-green-400 { + --tw-filter-color: #68d391; +} + +.drop-shadow-green-500 { + --tw-filter-color: #48bb78; +} + +.drop-shadow-green-600 { + --tw-filter-color: #38a169; +} + +.drop-shadow-green-700 { + --tw-filter-color: #2f855a; +} + +.drop-shadow-green-800 { + --tw-filter-color: #276749; +} + +.drop-shadow-green-900 { + --tw-filter-color: #22543d; +} + +.drop-shadow-teal-100 { + --tw-filter-color: #e6fffa; +} + +.drop-shadow-teal-200 { + --tw-filter-color: #b2f5ea; +} + +.drop-shadow-teal-300 { + --tw-filter-color: #81e6d9; +} + +.drop-shadow-teal-400 { + --tw-filter-color: #4fd1c5; +} + +.drop-shadow-teal-500 { + --tw-filter-color: #38b2ac; +} + +.drop-shadow-teal-600 { + --tw-filter-color: #319795; +} + +.drop-shadow-teal-700 { + --tw-filter-color: #2c7a7b; +} + +.drop-shadow-teal-800 { + --tw-filter-color: #285e61; +} + +.drop-shadow-teal-900 { + --tw-filter-color: #234e52; +} + +.drop-shadow-blue-100 { + --tw-filter-color: #ebf8ff; +} + +.drop-shadow-blue-200 { + --tw-filter-color: #bee3f8; +} + +.drop-shadow-blue-300 { + --tw-filter-color: #90cdf4; +} + +.drop-shadow-blue-400 { + --tw-filter-color: #63b3ed; +} + +.drop-shadow-blue-500 { + --tw-filter-color: #4299e1; +} + +.drop-shadow-blue-600 { + --tw-filter-color: #3182ce; +} + +.drop-shadow-blue-700 { + --tw-filter-color: #2b6cb0; +} + +.drop-shadow-blue-800 { + --tw-filter-color: #2c5282; +} + +.drop-shadow-blue-900 { + --tw-filter-color: #2a4365; +} + +.drop-shadow-indigo-100 { + --tw-filter-color: #ebf4ff; +} + +.drop-shadow-indigo-200 { + --tw-filter-color: #c3dafe; +} + +.drop-shadow-indigo-300 { + --tw-filter-color: #a3bffa; +} + +.drop-shadow-indigo-400 { + --tw-filter-color: #7f9cf5; +} + +.drop-shadow-indigo-500 { + --tw-filter-color: #667eea; +} + +.drop-shadow-indigo-600 { + --tw-filter-color: #5a67d8; +} + +.drop-shadow-indigo-700 { + --tw-filter-color: #4c51bf; +} + +.drop-shadow-indigo-800 { + --tw-filter-color: #434190; +} + +.drop-shadow-indigo-900 { + --tw-filter-color: #3c366b; +} + +.drop-shadow-purple-100 { + --tw-filter-color: #faf5ff; +} + +.drop-shadow-purple-200 { + --tw-filter-color: #e9d8fd; +} + +.drop-shadow-purple-300 { + --tw-filter-color: #d6bcfa; +} + +.drop-shadow-purple-400 { + --tw-filter-color: #b794f4; +} + +.drop-shadow-purple-500 { + --tw-filter-color: #9f7aea; +} + +.drop-shadow-purple-600 { + --tw-filter-color: #805ad5; +} + +.drop-shadow-purple-700 { + --tw-filter-color: #6b46c1; +} + +.drop-shadow-purple-800 { + --tw-filter-color: #553c9a; +} + +.drop-shadow-purple-900 { + --tw-filter-color: #44337a; +} + +.drop-shadow-pink-100 { + --tw-filter-color: #fff5f7; +} + +.drop-shadow-pink-200 { + --tw-filter-color: #fed7e2; +} + +.drop-shadow-pink-300 { + --tw-filter-color: #fbb6ce; +} + +.drop-shadow-pink-400 { + --tw-filter-color: #f687b3; +} + +.drop-shadow-pink-500 { + --tw-filter-color: #ed64a6; +} + +.drop-shadow-pink-600 { + --tw-filter-color: #d53f8c; +} + +.drop-shadow-pink-700 { + --tw-filter-color: #b83280; +} + +.drop-shadow-pink-800 { + --tw-filter-color: #97266d; +} + +.drop-shadow-pink-900 { + --tw-filter-color: #702459; +} + +.blur-0 { + filter: blur(none); +} + +.blur-1 { + filter: blur(1px); +} + +.blur-2 { + filter: blur(2px); +} + +.blur-3 { + filter: blur(3px); +} + +.blur-4 { + filter: blur(4px); +} + +.blur-5 { + filter: blur(5px); +} + +.backdrop-blur-0 { + backdrop-filter: blur(none); +} + +.backdrop-blur-1 { + backdrop-filter: blur(1px); +} + +.backdrop-blur-2 { + backdrop-filter: blur(2px); +} + +.backdrop-blur-3 { + backdrop-filter: blur(3px); +} + +.backdrop-blur-4 { + backdrop-filter: blur(4px); +} + +.backdrop-blur-5 { + backdrop-filter: blur(5px); +} + diff --git a/scripts/build.js b/scripts/build.js index d1679e9..4f9052c 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -12,6 +12,7 @@ function buildDistFile() { variants: ["responsive"], utilities: ["drop-shadow", "blur", "backdrop-blur"], debug: true, + export: true, }), ], }), diff --git a/src/index.js b/src/index.js index 1f937d2..83ac71f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,8 @@ +const fs = require("fs"); const plugin = require("tailwindcss/plugin"); const _ = require("lodash"); const { colors } = require("tailwindcss/defaultTheme"); +const { paramCase } = require("change-case"); const blurs = [ { @@ -56,6 +58,7 @@ const defaultOptions = { variants: ["responsive"], utilities: ["drop-shadow", "blur", "backdrop-blur"], debug: false, + export: false, }; module.exports = plugin.withOptions((options = {}) => { @@ -80,6 +83,17 @@ module.exports = plugin.withOptions((options = {}) => { if (options.debug === true) { console.info(new_utilities); } + if (options.export === true) { + fs.writeFile( + "./public/utilities.css", + flattenObject(new_utilities), + function (err) { + if (err) { + return console.log(err); + } + } + ); + } addUtilities(new_utilities, { variants: options.variants, @@ -134,3 +148,23 @@ function getBlur() { }); return new_utilities; } + +function flattenObject(ob) { + var toReturn = ""; + for (var a in ob) { + toReturn += a + " "; + if (typeof ob[a] == "object" && ob[a] !== null) { + toReturn += "{" + "\n"; + for (var b in ob[a]) { + if (b.substring(0,2) === '--') { + toReturn += "\t" + b + ": " + ob[a][b] + ";\n"; + } else { + toReturn += "\t" + paramCase(b) + ": " + ob[a][b] + ";\n"; + } + } + toReturn += "}" + "\n"; + } + toReturn += "\n"; + } + return toReturn; +}