diff --git a/index.js b/index.js index b23edc7..52acd1c 100644 --- a/index.js +++ b/index.js @@ -1,70 +1,12 @@ -var _ = require('lodash') -var flatten = require('flat') - -module.exports = function () { - return function ({ - addUtilities, addComponents, addBase, addVariant, - e, prefix, theme, variants, config, - }) { - const buildObjectFromTheme = themeKey => { - const buildObject = ([ modifier, value ]) => [ modifier, { [themeKey]: value } ] - const themeEntries = Object.entries(theme(themeKey, {})).map(entry => buildObject(entry)) - return _.fromPairs(themeEntries) - } - - const pluginUtilities = { - 'blend': { - 'normal': { mixBlendMode: 'normal' }, - 'multiply': { mixBlendMode: 'multiply' }, - 'screen': { mixBlendMode: 'screen' }, - 'overlay': { mixBlendMode: 'overlay' }, - 'darken': { mixBlendMode: 'darken' }, - 'lighten': { mixBlendMode: 'lighten' }, - 'color-dodge': { mixBlendMode: 'color-dodge' }, - 'color-burn': { mixBlendMode: 'color-burn' }, - 'hard-light': { mixBlendMode: 'hard-light' }, - 'soft-light': { mixBlendMode: 'soft-light' }, - 'difference': { mixBlendMode: 'difference' }, - 'exclusion': { mixBlendMode: 'exclusion' }, - 'hue': { mixBlendMode: 'hue' }, - 'saturation': { mixBlendMode: 'saturation' }, - 'color': { mixBlendMode: 'color' }, - 'luminosity': { mixBlendMode: 'luminosity' }, - }, - 'bg-blend': { - 'normal': { backgroundBlendMode: 'normal' }, - 'multiply': { backgroundBlendMode: 'multiply' }, - 'screen': { backgroundBlendMode: 'screen' }, - 'overlay': { backgroundBlendMode: 'overlay' }, - 'darken': { backgroundBlendMode: 'darken' }, - 'lighten': { backgroundBlendMode: 'lighten' }, - 'color-dodge': { backgroundBlendMode: 'color-dodge' }, - 'color-burn': { backgroundBlendMode: 'color-burn' }, - 'hard-light': { backgroundBlendMode: 'hard-light' }, - 'soft-light': { backgroundBlendMode: 'soft-light' }, - 'difference': { backgroundBlendMode: 'difference' }, - 'exclusion': { backgroundBlendMode: 'exclusion' }, - 'hue': { backgroundBlendMode: 'hue' }, - 'saturation': { backgroundBlendMode: 'saturation' }, - 'color': { backgroundBlendMode: 'color' }, - 'luminosity': { backgroundBlendMode: 'luminosity' }, - }, - 'isolation': { - 'isolate': { isolation: 'isolate' }, - 'auto': { isolation: 'auto' }, - } - } - - Object.entries(pluginUtilities) - .filter(([ modifier, values ]) => !_.isEmpty(values)) - .forEach(([ modifier, values ]) => { - const variantName = Object.keys(Object.entries(values)[0][1])[0] - const utilities = flatten( - { [`.${e(`${modifier}`)}`]: values }, - { delimiter: '-', maxDepth: 2 }, - ) - - addUtilities(utilities, variants(variantName, ['responsive'])) - }) +const tailwindConfig = require('./tailwind.config.js') +const { buildPlugin } = require('@hacknug/tailwindcss-plugin-utils') + +module.exports = function (pluginConfig) { + return function (coreUtils) { + return buildPlugin(tailwindConfig, coreUtils, { + 'blend': ['mixBlendMode'], + 'bg-blend': ['backgroundBlendMode', 'mixBlendMode'], + 'isolation': ['isolation'], + }) } } diff --git a/index.test.js b/index.test.js new file mode 100644 index 0000000..55509a6 --- /dev/null +++ b/index.test.js @@ -0,0 +1,49 @@ +const tailwindConfig = require('./tailwind.config.js') +const { generatePluginCss } = require('@hacknug/tailwindcss-plugin-utils') + +expect.extend({ toMatchCss: require('jest-matcher-css') }) + +test('generates the expected styles', () => { + const testConfig = {} + const expectedCss = ` + .blend-normal { mix-blend-mode: normal } + .blend-multiply { mix-blend-mode: multiply } + .blend-screen { mix-blend-mode: screen } + .blend-overlay { mix-blend-mode: overlay } + .blend-darken { mix-blend-mode: darken } + .blend-lighten { mix-blend-mode: lighten } + .blend-color-dodge { mix-blend-mode: color-dodge } + .blend-color-burn { mix-blend-mode: color-burn } + .blend-hard-light { mix-blend-mode: hard-light } + .blend-soft-light { mix-blend-mode: soft-light } + .blend-difference { mix-blend-mode: difference } + .blend-exclusion { mix-blend-mode: exclusion } + .blend-hue { mix-blend-mode: hue } + .blend-saturation { mix-blend-mode: saturation } + .blend-color { mix-blend-mode: color } + .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 } + + .isolation-isolate { isolation: isolate } + .isolation-auto { isolation: auto } + ` + + return generatePluginCss(tailwindConfig, testConfig) + .then(css => expect(css).toMatchCss(expectedCss)) +}) diff --git a/package.json b/package.json index 2988d45..be88c53 100644 --- a/package.json +++ b/package.json @@ -29,13 +29,10 @@ "test": "jest" }, "dependencies": { - "flat": "^4.1.0", - "lodash": "^4.17.11" + "@hacknug/tailwindcss-plugin-utils": "0.4.3" }, "devDependencies": { - "jest": "^24.8.0", - "jest-matcher-css": "^1.0.3", - "postcss": "^7.0.16", - "tailwindcss": "^1.0.1" + "jest": "24.8.0", + "jest-matcher-css": "1.1.0" } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index b88f2e0..00e1e92 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,12 +1,9 @@ dependencies: - flat: 4.1.0 - lodash: 4.17.11 + '@hacknug/tailwindcss-plugin-utils': 0.4.3 devDependencies: jest: 24.8.0 - jest-matcher-css: 1.0.3 - postcss: 7.0.16 - tailwindcss: 1.0.1 -lockfileVersion: 5 + jest-matcher-css: 1.1.0 +lockfileVersion: 5.1 packages: /@babel/code-frame/7.0.0: dependencies: @@ -141,6 +138,15 @@ packages: hasBin: true resolution: integrity: sha512-r5160ogAvGyHsal38Kux7YYtodEKOj89RGb28ht1jh3SJb08VwRwAKKJL0bGb04Zd/3r9FL3BFIc3bBidYffCA== + /@hacknug/tailwindcss-plugin-utils/0.4.3: + dependencies: + flat: 4.1.0 + lodash: 4.17.14 + postcss: 7.0.17 + tailwindcss: 1.0.5 + dev: false + resolution: + integrity: sha512-pVyKtIME2exGPSMYZOHYmaiBKsgqMPdvtTrlk4FHF5bJvcIpMpQu/aGb95bbwp1ph7qEG9rak+5XwscWAPXLpQ== /@jest/console/24.7.1: dependencies: '@jest/source-map': 24.3.0 @@ -418,7 +424,6 @@ packages: /ansi-styles/3.2.1: dependencies: color-convert: 1.9.3 - dev: true engines: node: '>=4' resolution: @@ -497,20 +502,21 @@ packages: hasBin: true resolution: integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg== - /autoprefixer/9.5.1: + /autoprefixer/9.6.1: dependencies: - browserslist: 4.6.0 - caniuse-lite: 1.0.30000969 + browserslist: 4.6.6 + caniuse-lite: 1.0.30000984 + chalk: 2.4.2 normalize-range: 0.1.2 num2fraction: 1.2.2 - postcss: 7.0.16 - postcss-value-parser: 3.3.1 - dev: true + postcss: 7.0.17 + postcss-value-parser: 4.0.0 + dev: false engines: node: '>=6.0.0' hasBin: true resolution: - integrity: sha512-KJSzkStUl3wP0D5sdMlP82Q52JLy5+atf2MHAre48+ckWkXgixmfHyWmA77wFDy6jTHU6mIgXv6hAQ2mf1PjJQ== + integrity: sha512-aVo5WxR3VyvyJxcJC3h4FKfwCQvQWb1tSI5VHNibddCVWrcD1NvlxEweg3TSgiPztMnWfjpy2FURKA2kvDE+Tw== /aws-sign2/0.7.0: dev: true resolution: @@ -567,7 +573,6 @@ packages: resolution: integrity: sha512-pdZqLEdmy1ZK5kyRUfvBb2IfTPb2BUvIJczlPspS8fWmBQslNNDBqVfh7BW5leOVJMDZKzjD8XEyABTk6gQ5yw== /balanced-match/1.0.0: - dev: true resolution: integrity: sha1-ibTRmasr7kneFk6gK4nORi1xt2c= /base/0.11.2: @@ -594,7 +599,6 @@ packages: dependencies: balanced-match: 1.0.0 concat-map: 0.0.1 - dev: true resolution: integrity: sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA== /braces/2.3.2: @@ -624,15 +628,15 @@ packages: dev: true resolution: integrity: sha512-exDi1BYWB/6raKHmDTCicQfTkqwN5fioMFV4j8BsfMU4R2DK/QfZfK7kOVkmWCNANf0snkBzqGqAJBao9gZMdQ== - /browserslist/4.6.0: + /browserslist/4.6.6: dependencies: - caniuse-lite: 1.0.30000969 - electron-to-chromium: 1.3.135 - node-releases: 1.1.19 - dev: true + caniuse-lite: 1.0.30000984 + electron-to-chromium: 1.3.194 + node-releases: 1.1.25 + dev: false hasBin: true resolution: - integrity: sha512-Jk0YFwXBuMOOol8n6FhgkDzn3mY9PYLYGk29zybF05SbRTsMgPqmTNeQQhOghCxq5oFqAXE3u4sYddr4C0uRhg== + integrity: sha512-D2Nk3W9JL9Fp/gIcWei8LrERCS+eXu9AM5cfXA8WEZ84lFks+ARnZ0q/R69m2SV3Wjma83QDDPxsNKXUwdIsyA== /bser/2.0.0: dependencies: node-int64: 0.4.0 @@ -644,7 +648,7 @@ packages: resolution: integrity: sha512-MQcXEUbCKtEo7bhqEs6560Hyd4XaovZlO/k9V3hjVUF/zwW7KBVdSK4gIt/bzwS9MbR5qob+F5jusZsb0YQK2A== /bytes/3.1.0: - dev: true + dev: false engines: node: '>= 0.8' resolution: @@ -672,7 +676,7 @@ packages: resolution: integrity: sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ== /camelcase-css/2.0.1: - dev: true + dev: false engines: node: '>= 6' resolution: @@ -683,10 +687,10 @@ packages: node: '>=6' resolution: integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg== - /caniuse-lite/1.0.30000969: - dev: true + /caniuse-lite/1.0.30000984: + dev: false resolution: - integrity: sha512-Kus0yxkoAJgVc0bax7S4gLSlFifCa7MnSZL9p9VuS/HIKEL4seaqh28KIQAAO50cD/rJ5CiJkJFapkdDAlhFxQ== + integrity: sha512-n5tKOjMaZ1fksIpQbjERuqCyfgec/m9pferkFQbLmWtqLUdmt12hNhjSwsmPdqeiG2NkITOQhr1VYIwWSAceiA== /capture-exit/2.0.0: dependencies: rsvp: 4.8.4 @@ -704,7 +708,6 @@ packages: ansi-styles: 3.2.1 escape-string-regexp: 1.0.5 supports-color: 5.5.0 - dev: true engines: node: '>=4' resolution: @@ -757,11 +760,9 @@ packages: /color-convert/1.9.3: dependencies: color-name: 1.1.3 - dev: true resolution: integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg== /color-name/1.1.3: - dev: true resolution: integrity: sha1-p9BVi9icQveV3UIyj3QIMcpTvCU= /combined-stream/1.0.8: @@ -782,7 +783,6 @@ packages: resolution: integrity: sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg== /concat-map/0.0.1: - dev: true resolution: integrity: sha1-2Klr13/Wjfd5OnMDajug1UBdR3s= /convert-source-map/1.6.0: @@ -814,14 +814,14 @@ packages: resolution: integrity: sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ== /cssesc/2.0.0: - dev: true + dev: false engines: node: '>=4' hasBin: true resolution: integrity: sha512-MsCAG1z9lPdoO/IUMLSBWBSVxVtJ1395VGIQ+Fc2gNdkQ1hNDnQdw3YhA71WJCBW1vdwA0cAnk/DnW6bqoEUYg== /cssesc/3.0.0: - dev: true + dev: false engines: node: '>=4' hasBin: true @@ -945,10 +945,10 @@ packages: dev: true resolution: integrity: sha1-OoOpBOVDUyh4dMVkt1SThoSamMk= - /electron-to-chromium/1.3.135: - dev: true + /electron-to-chromium/1.3.194: + dev: false resolution: - integrity: sha512-xXLNstRdVsisPF3pL3H9TVZo2XkMILfqtD6RiWIUmDK2sFX1Bjwqmd8LBp0Kuo2FgKO63JXPoEVGm8WyYdwP0Q== + integrity: sha512-w0LHR2YD9Ex1o+Sz4IN2hYzCB8vaFtMNW+yJcBf6SZlVqgFahkne/4rGVJdk4fPF98Gch9snY7PiabOh+vqHNg== /end-of-stream/1.4.1: dependencies: once: 1.4.0 @@ -985,7 +985,6 @@ packages: resolution: integrity: sha512-qZryBOJjV//LaxLTV6UC//WewneB3LcXOL9NP++ozKVXsIIIpm/2c13UDiD9Jp2eThsecw9m3jPqDwTyobcdbg== /escape-string-regexp/1.0.5: - dev: true engines: node: '>=0.8.0' resolution: @@ -1194,18 +1193,17 @@ packages: node: '>=0.10.0' resolution: integrity: sha1-QpD60n8T6Jvn8zeZxrxaCr//DRk= - /fs-extra/8.0.1: + /fs-extra/8.1.0: dependencies: - graceful-fs: 4.1.15 + graceful-fs: 4.2.0 jsonfile: 4.0.0 universalify: 0.1.2 - dev: true + dev: false engines: node: '>=6 <7 || >=8' resolution: - integrity: sha512-W+XLrggcDzlle47X/XnS7FXrXu9sDo+Ze9zpndeBxdgv88FHLm1HtmkhEwavruS6koanBjp098rUpHs65EmG7A== + integrity: sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g== /fs.realpath/1.0.0: - dev: true resolution: integrity: sha1-FQStJSMVjKpA20onh8sBQRmU6k8= /fsevents/1.2.9: @@ -1252,11 +1250,10 @@ packages: dependencies: fs.realpath: 1.0.0 inflight: 1.0.6 - inherits: 2.0.3 + inherits: 2.0.4 minimatch: 3.0.4 once: 1.4.0 path-is-absolute: 1.0.1 - dev: true resolution: integrity: sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A== /globals/11.12.0: @@ -1269,6 +1266,10 @@ packages: dev: true resolution: integrity: sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA== + /graceful-fs/4.2.0: + dev: false + resolution: + integrity: sha512-jpSvDPV4Cq/bgtpndIWbI5hmYxhQGHPC4d4cqBPb4DLniCfhJokdXhwhaDuLBGLQdvvRum/UiX6ECVIPvDXqdg== /growly/1.3.0: dev: true resolution: @@ -1302,7 +1303,6 @@ packages: resolution: integrity: sha512-sNvOCzEQNr/qrvJgc3UG/kD4QtlHycrzwS+6mfTrrSq97BvaYcPZZI1ZSqGSPR73Cxn4LKTD4PttRwfU7jWq5g== /has-flag/3.0.0: - dev: true engines: node: '>=4' resolution: @@ -1402,20 +1402,22 @@ packages: resolution: integrity: sha1-khi5srkoojixPcT7a21XbyMUU+o= /indexes-of/1.0.1: - dev: true + dev: false resolution: integrity: sha1-8w9xbI4r00bHtn0985FVZqfAVgc= /inflight/1.0.6: dependencies: once: 1.4.0 wrappy: 1.0.2 - dev: true resolution: integrity: sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk= /inherits/2.0.3: dev: true resolution: integrity: sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4= + /inherits/2.0.4: + resolution: + integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ== /invariant/2.2.4: dependencies: loose-envify: 1.4.0 @@ -1845,10 +1847,10 @@ packages: node: '>= 6' resolution: integrity: sha512-cG0yRSK8A831LN8lIHxI3AblB40uhv0z+SsQdW3GoMMVcK+sJwrIIyax5tu3eHHNJ8Fu6IMDpnLda2jhn2pD/g== - /jest-matcher-css/1.0.3: + /jest-matcher-css/1.1.0: dev: true resolution: - integrity: sha512-cPd6Jga7F0Pwa/FMVIoYzyw9Kd1V+5i8LppntgmVD4tGQC88Z+c3vdbeo6FuIriUQycDcjEmM9tIO7ORRZeIbQ== + integrity: sha512-HycxxNw36Cx/CD/XjIt4qcJ0SDpEH9F2ZWTndoyfK7nLiZnIJp/sGSdpQC4GoaC/XshKEee7nBJ81FhIScc5vA== /jest-matcher-utils/24.8.0: dependencies: chalk: 2.4.2 @@ -1891,6 +1893,9 @@ packages: node: '>=6' peerDependencies: jest-resolve: '*' + peerDependenciesMeta: + jest-resolve: + optional: true resolution: integrity: sha512-pgFw2tm54fzgYvc/OHrnysABEObZCUNFnhjoRjaVOCN8NYc032/gVjPaHD4Aq6ApkSieWtfKAFQtmDKAmhupnQ== /jest-regex-util/24.3.0: @@ -2142,9 +2147,9 @@ packages: resolution: integrity: sha512-8Mh9h6xViijj36g7Dxi+Y4S6hNGV96vcJZr/SrlHh1LR/pEn/8j/+qIBbs44YKl69Lrfctp4QD+AdWLTMqEZAQ== /jsonfile/4.0.0: - dev: true + dev: false optionalDependencies: - graceful-fs: 4.1.15 + graceful-fs: 4.2.0 resolution: integrity: sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss= /jsprim/1.4.1: @@ -2245,12 +2250,17 @@ packages: resolution: integrity: sha1-7dFMgk4sycHgsKG0K7UhBRakJDg= /lodash.toarray/4.4.0: - dev: true + dev: false resolution: integrity: sha1-JMS/zWsvuji/0FlNsRedjptlZWE= /lodash/4.17.11: + dev: true resolution: integrity: sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg== + /lodash/4.17.14: + dev: false + resolution: + integrity: sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw== /loose-envify/1.4.0: dependencies: js-tokens: 4.0.0 @@ -2354,7 +2364,6 @@ packages: /minimatch/3.0.4: dependencies: brace-expansion: 1.1.11 - dev: true resolution: integrity: sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA== /minimist/0.0.10: @@ -2431,7 +2440,7 @@ packages: /node-emoji/1.10.0: dependencies: lodash.toarray: 4.4.0 - dev: true + dev: false resolution: integrity: sha512-Yt3384If5H6BYGVHiHwTL+99OzJKHhgp82S8/dktEK73T26BazdgZ4JZh92xSVtGNJvz9UbXdNAc5hcrXV42vw== /node-int64/0.4.0: @@ -2454,12 +2463,12 @@ packages: dev: true resolution: integrity: sha512-SUDEb+o71XR5lXSTyivXd9J7fCloE3SyP4lSgt3lU2oSANiox+SxlNRGPjDKrwU1YN3ix2KN/VGGCg0t01rttQ== - /node-releases/1.1.19: + /node-releases/1.1.25: dependencies: semver: 5.7.0 - dev: true + dev: false resolution: - integrity: sha512-SH/B4WwovHbulIALsQllAVwqZZD1kPmKCqrhGfR29dXjLAVZMHvBjD3S6nL9D/J9QkmZ1R92/0wCMDKXUUvyyA== + integrity: sha512-fI5BXuk83lKEoZDdH3gRhtsNgh05/wZacuXkgbiYkceE7+QIMXOg98n9ZV7mz27B+kFHnqHcUpscZZlGRSmTpQ== /normalize-package-data/2.5.0: dependencies: hosted-git-info: 2.7.1 @@ -2478,13 +2487,13 @@ packages: resolution: integrity: sha1-GrKLVW4Zg2Oowab35vogE3/mrtk= /normalize-range/0.1.2: - dev: true + dev: false engines: node: '>=0.10.0' resolution: integrity: sha1-LRDAa9/TEuqXd2laTShDlFa3WUI= /normalize.css/8.0.1: - dev: true + dev: false resolution: integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg== /npm-run-path/2.0.2: @@ -2496,7 +2505,7 @@ packages: resolution: integrity: sha1-NakjLfo11wZ7TLLd8jV7GHFTbF8= /num2fraction/1.2.2: - dev: true + dev: false resolution: integrity: sha1-b2gragJ6Tp3fpFZM0lidHU5mnt4= /number-is-nan/1.0.1: @@ -2514,7 +2523,7 @@ packages: resolution: integrity: sha512-fexhUFFPTGV8ybAtSIGbV6gOkSv8UtRbDBnAyLQw4QPKkgNlsH2ByPGtMUqdWkos6YCRmAqViwgZrJc/mRDzZQ== /object-assign/4.1.1: - dev: true + dev: false engines: node: '>=0.10.0' resolution: @@ -2563,7 +2572,6 @@ packages: /once/1.4.0: dependencies: wrappy: 1.0.2 - dev: true resolution: integrity: sha1-WDsap3WWHUsROsF9nFC6753Xa9E= /optimist/0.6.1: @@ -2676,7 +2684,6 @@ packages: resolution: integrity: sha1-zg6+ql94yxiSXqfYENe1mwEP1RU= /path-is-absolute/1.0.1: - dev: true engines: node: '>=0.10.0' resolution: @@ -2747,21 +2754,21 @@ packages: object-assign: 4.1.1 postcss: 6.0.23 postcss-value-parser: 3.3.1 - dev: true + dev: false resolution: integrity: sha1-DpTQFERwCkgd4g3k1V+yZAVkJQ4= - /postcss-js/2.0.1: + /postcss-js/2.0.2: dependencies: camelcase-css: 2.0.1 - postcss: 7.0.16 - dev: true + postcss: 7.0.17 + dev: false resolution: - integrity: sha512-8XQGohCbj6+kq8e3w6WlexkGaSjb5S8zoXnH49eB8JC6+qN2kQW+ib6fTjRgCpRRN9eeFOhMlD0NDjThW1DCBg== + integrity: sha512-HxXLw1lrczsbVXxyC+t/VIfje9ZeZhkkXE8KpFa3MEKfp2FyHDv29JShYY9eLhYrhLyWWHNIuwkktTfLXu2otw== /postcss-nested/4.1.2: dependencies: - postcss: 7.0.16 + postcss: 7.0.17 postcss-selector-parser: 5.0.0 - dev: true + dev: false resolution: integrity: sha512-9bQFr2TezohU3KRSu9f6sfecXmf/x6RXDedl8CHF6fyuyVW7UqgNMRdWMHZQWuFY6Xqs2NYk+Fj4Z4vSOf7PQg== /postcss-selector-parser/5.0.0: @@ -2769,7 +2776,7 @@ packages: cssesc: 2.0.0 indexes-of: 1.0.1 uniq: 1.0.1 - dev: true + dev: false engines: node: '>=4' resolution: @@ -2779,35 +2786,39 @@ packages: cssesc: 3.0.0 indexes-of: 1.0.1 uniq: 1.0.1 - dev: true + dev: false engines: node: '>=4' resolution: integrity: sha512-36P2QR59jDTOAiIkqEprfJDsoNrvwFei3eCqKd1Y0tUsBimsq39BLp7RD+JWny3WgB1zGhJX8XVePwm9k4wdBg== /postcss-value-parser/3.3.1: - dev: true + dev: false resolution: integrity: sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== + /postcss-value-parser/4.0.0: + dev: false + resolution: + integrity: sha512-ESPktioptiSUchCKgggAkzdmkgzKfmp0EU8jXH+5kbIUB+unr0Y4CY9SRMvibuvYUBjNh1ACLbxqYNpdTQOteQ== /postcss/6.0.23: dependencies: chalk: 2.4.2 source-map: 0.6.1 supports-color: 5.5.0 - dev: true + dev: false engines: node: '>=4.0.0' resolution: integrity: sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag== - /postcss/7.0.16: + /postcss/7.0.17: dependencies: chalk: 2.4.2 source-map: 0.6.1 supports-color: 6.1.0 - dev: true + dev: false engines: node: '>=6.0.0' resolution: - integrity: sha512-MOo8zNSlIqh22Uaa3drkdIAgUGEL+AD1ESiSdmElLUmE2uVDo1QloiT/IfW9qRw8Gw+Y/w69UVMGwbufMSftxA== + integrity: sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ== /prelude-ls/1.1.2: dev: true engines: @@ -2826,7 +2837,7 @@ packages: resolution: integrity: sha512-P952T7dkrDEplsR+TuY7q3VXDae5Sr7zmQb12JU/NDQa/3CH7/QW0yvqLcGN6jL+zQFKaoJcPc+yJxMTGmosqw== /pretty-hrtime/1.0.3: - dev: true + dev: false engines: node: '>= 0.8' resolution: @@ -3087,7 +3098,6 @@ packages: resolution: integrity: sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== /semver/5.7.0: - dev: true hasBin: true resolution: integrity: sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA== @@ -3215,7 +3225,6 @@ packages: resolution: integrity: sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w= /source-map/0.6.1: - dev: true engines: node: '>=0.10.0' resolution: @@ -3361,7 +3370,6 @@ packages: /supports-color/5.5.0: dependencies: has-flag: 3.0.0 - dev: true engines: node: '>=4' resolution: @@ -3369,7 +3377,6 @@ packages: /supports-color/6.1.0: dependencies: has-flag: 3.0.0 - dev: true engines: node: '>=6' resolution: @@ -3378,27 +3385,27 @@ packages: dev: true resolution: integrity: sha1-rifbOPZgp64uHDt9G8KQgZuFGeY= - /tailwindcss/1.0.1: + /tailwindcss/1.0.5: dependencies: - autoprefixer: 9.5.1 + autoprefixer: 9.6.1 bytes: 3.1.0 chalk: 2.4.2 - fs-extra: 8.0.1 - lodash: 4.17.11 + fs-extra: 8.1.0 + lodash: 4.17.14 node-emoji: 1.10.0 normalize.css: 8.0.1 - postcss: 7.0.16 + postcss: 7.0.17 postcss-functions: 3.0.0 - postcss-js: 2.0.1 + postcss-js: 2.0.2 postcss-nested: 4.1.2 postcss-selector-parser: 6.0.2 pretty-hrtime: 1.0.3 - dev: true + dev: false engines: node: '>=8.9.0' hasBin: true resolution: - integrity: sha512-tNyvmizhIY9ydXX8m84S/69851QROZzbH6RB/Q4w0K27OssupGcyXeD8zumzb9Yuzq6PifBH2A6ehjuBPklnYA== + integrity: sha512-e5edrSKqNOvWAVEutXN5czeJSXjQQxO7zNN4RDd5vQF/JTxnKdndcMFIC6p6YkRvcGFKPCZ/0rY1zZvPeq9V4A== /test-exclude/5.2.3: dependencies: glob: 7.1.4 @@ -3523,11 +3530,11 @@ packages: resolution: integrity: sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ= /uniq/1.0.1: - dev: true + dev: false resolution: integrity: sha1-sxxa6CVIRKOoKBVBzisEuGWnNP8= /universalify/0.1.2: - dev: true + dev: false engines: node: '>= 4.0.0' resolution: @@ -3663,7 +3670,6 @@ packages: resolution: integrity: sha1-2Pw9KE3QV5T+hJc8rs3Rz4JP3YU= /wrappy/1.0.2: - dev: true resolution: integrity: sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8= /write-file-atomic/2.4.1: @@ -3713,9 +3719,6 @@ packages: resolution: integrity: sha512-Lhz8TLaYnxq/2ObqHDql8dX8CJi97oHxrjUcYtzKbbykPtVW9WB+poxI+NM2UIzsMgNCZTIf0AQwsjK5yMAqZw== specifiers: - flat: ^4.1.0 - jest: ^24.8.0 - jest-matcher-css: ^1.0.3 - lodash: ^4.17.11 - postcss: ^7.0.16 - tailwindcss: ^1.0.1 + '@hacknug/tailwindcss-plugin-utils': 0.4.3 + jest: 24.8.0 + jest-matcher-css: 1.1.0 diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 0000000..71f6f3c --- /dev/null +++ b/tailwind.config.js @@ -0,0 +1,15 @@ +const plugin = require('./index.js') +const pluginOptions = {} + +module.exports = { + theme: { + isolation: ['isolate', 'auto'], + mixBlendMode: [ + 'normal', 'multiply', 'screen', 'overlay', 'darken', 'lighten', + 'color-dodge', 'color-burn', 'hard-light', 'soft-light', 'difference', + 'exclusion', 'hue', 'saturation', 'color', 'luminosity', + ], + }, + + plugins: [plugin(pluginOptions)], +} diff --git a/test.js b/test.js deleted file mode 100644 index 42ae2ad..0000000 --- a/test.js +++ /dev/null @@ -1,193 +0,0 @@ -const _ = require('lodash') - -const plugin = require('./index.js') -const postcss = require('postcss') -const tailwindcss = require('tailwindcss') - -// const defaultConfig = require('tailwindcss/defaultConfig') -const generatePluginCss = (testConfig = {}, pluginOptions = {}) => { - const sandboxConfig = { - theme: { screens: { 'sm': '640px' } }, - corePlugins: false, - plugins: [ plugin(pluginOptions) ], - } - const postcssPlugins =[ - tailwindcss(_.merge(sandboxConfig, testConfig)), - ] - - return postcss(postcssPlugins) - .process('@tailwind utilities', { from: undefined }) - .then(result => result.css) -} - -expect.extend({ toMatchCss: require('jest-matcher-css') }) - -test('generates default utilities and responsive variants', () => { - const testConfig = {} - const expectedCss = ` - .blend-normal { mix-blend-mode: normal } - .blend-multiply { mix-blend-mode: multiply } - .blend-screen { mix-blend-mode: screen } - .blend-overlay { mix-blend-mode: overlay } - .blend-darken { mix-blend-mode: darken } - .blend-lighten { mix-blend-mode: lighten } - .blend-color-dodge { mix-blend-mode: color-dodge } - .blend-color-burn { mix-blend-mode: color-burn } - .blend-hard-light { mix-blend-mode: hard-light } - .blend-soft-light { mix-blend-mode: soft-light } - .blend-difference { mix-blend-mode: difference } - .blend-exclusion { mix-blend-mode: exclusion } - .blend-hue { mix-blend-mode: hue } - .blend-saturation { mix-blend-mode: saturation } - .blend-color { mix-blend-mode: color } - .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 } - - .isolation-isolate { isolation: isolate } - .isolation-auto { isolation: auto } - - @media (min-width: 640px) { - .sm\\:blend-normal { mix-blend-mode: normal } - .sm\\:blend-multiply { mix-blend-mode: multiply } - .sm\\:blend-screen { mix-blend-mode: screen } - .sm\\:blend-overlay { mix-blend-mode: overlay } - .sm\\:blend-darken { mix-blend-mode: darken } - .sm\\:blend-lighten { mix-blend-mode: lighten } - .sm\\:blend-color-dodge { mix-blend-mode: color-dodge } - .sm\\:blend-color-burn { mix-blend-mode: color-burn } - .sm\\:blend-hard-light { mix-blend-mode: hard-light } - .sm\\:blend-soft-light { mix-blend-mode: soft-light } - .sm\\:blend-difference { mix-blend-mode: difference } - .sm\\:blend-exclusion { mix-blend-mode: exclusion } - .sm\\:blend-hue { mix-blend-mode: hue } - .sm\\:blend-saturation { mix-blend-mode: saturation } - .sm\\:blend-color { mix-blend-mode: color } - .sm\\:blend-luminosity { mix-blend-mode: luminosity } - - .sm\\:bg-blend-normal { background-blend-mode: normal } - .sm\\:bg-blend-multiply { background-blend-mode: multiply } - .sm\\:bg-blend-screen { background-blend-mode: screen } - .sm\\:bg-blend-overlay { background-blend-mode: overlay } - .sm\\:bg-blend-darken { background-blend-mode: darken } - .sm\\:bg-blend-lighten { background-blend-mode: lighten } - .sm\\:bg-blend-color-dodge { background-blend-mode: color-dodge } - .sm\\:bg-blend-color-burn { background-blend-mode: color-burn } - .sm\\:bg-blend-hard-light { background-blend-mode: hard-light } - .sm\\:bg-blend-soft-light { background-blend-mode: soft-light } - .sm\\:bg-blend-difference { background-blend-mode: difference } - .sm\\:bg-blend-exclusion { background-blend-mode: exclusion } - .sm\\:bg-blend-hue { background-blend-mode: hue } - .sm\\:bg-blend-saturation { background-blend-mode: saturation } - .sm\\:bg-blend-color { background-blend-mode: color } - .sm\\:bg-blend-luminosity { background-blend-mode: luminosity } - - .sm\\:isolation-isolate { isolation: isolate } - .sm\\:isolation-auto { isolation: auto } - } - ` - - return generatePluginCss(testConfig).then(css => expect(css).toMatchCss(expectedCss)) -}) - -test('variants can be customized', () => { - const testConfig = { - variants: { - mixBlendMode: ['hover'], - backgroundBlendMode: ['focus'], - isolation: ['active'], - }, - } - const expectedCss = ` - .blend-normal { mix-blend-mode: normal } - .blend-multiply { mix-blend-mode: multiply } - .blend-screen { mix-blend-mode: screen } - .blend-overlay { mix-blend-mode: overlay } - .blend-darken { mix-blend-mode: darken } - .blend-lighten { mix-blend-mode: lighten } - .blend-color-dodge { mix-blend-mode: color-dodge } - .blend-color-burn { mix-blend-mode: color-burn } - .blend-hard-light { mix-blend-mode: hard-light } - .blend-soft-light { mix-blend-mode: soft-light } - .blend-difference { mix-blend-mode: difference } - .blend-exclusion { mix-blend-mode: exclusion } - .blend-hue { mix-blend-mode: hue } - .blend-saturation { mix-blend-mode: saturation } - .blend-color { mix-blend-mode: color } - .blend-luminosity { mix-blend-mode: luminosity } - - .hover\\:blend-normal:hover { mix-blend-mode: normal } - .hover\\:blend-multiply:hover { mix-blend-mode: multiply } - .hover\\:blend-screen:hover { mix-blend-mode: screen } - .hover\\:blend-overlay:hover { mix-blend-mode: overlay } - .hover\\:blend-darken:hover { mix-blend-mode: darken } - .hover\\:blend-lighten:hover { mix-blend-mode: lighten } - .hover\\:blend-color-dodge:hover { mix-blend-mode: color-dodge } - .hover\\:blend-color-burn:hover { mix-blend-mode: color-burn } - .hover\\:blend-hard-light:hover { mix-blend-mode: hard-light } - .hover\\:blend-soft-light:hover { mix-blend-mode: soft-light } - .hover\\:blend-difference:hover { mix-blend-mode: difference } - .hover\\:blend-exclusion:hover { mix-blend-mode: exclusion } - .hover\\:blend-hue:hover { mix-blend-mode: hue } - .hover\\:blend-saturation:hover { mix-blend-mode: saturation } - .hover\\:blend-color:hover { mix-blend-mode: color } - .hover\\:blend-luminosity:hover { 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 } - - .focus\\:bg-blend-normal:focus { background-blend-mode: normal } - .focus\\:bg-blend-multiply:focus { background-blend-mode: multiply } - .focus\\:bg-blend-screen:focus { background-blend-mode: screen } - .focus\\:bg-blend-overlay:focus { background-blend-mode: overlay } - .focus\\:bg-blend-darken:focus { background-blend-mode: darken } - .focus\\:bg-blend-lighten:focus { background-blend-mode: lighten } - .focus\\:bg-blend-color-dodge:focus { background-blend-mode: color-dodge } - .focus\\:bg-blend-color-burn:focus { background-blend-mode: color-burn } - .focus\\:bg-blend-hard-light:focus { background-blend-mode: hard-light } - .focus\\:bg-blend-soft-light:focus { background-blend-mode: soft-light } - .focus\\:bg-blend-difference:focus { background-blend-mode: difference } - .focus\\:bg-blend-exclusion:focus { background-blend-mode: exclusion } - .focus\\:bg-blend-hue:focus { background-blend-mode: hue } - .focus\\:bg-blend-saturation:focus { background-blend-mode: saturation } - .focus\\:bg-blend-color:focus { background-blend-mode: color } - .focus\\:bg-blend-luminosity:focus { background-blend-mode: luminosity } - - .isolation-isolate { isolation: isolate } - .isolation-auto { isolation: auto } - - .active\\:isolation-isolate:active { isolation: isolate } - .active\\:isolation-auto:active { isolation: auto } - ` - - return generatePluginCss(testConfig).then(css => expect(css).toMatchCss(expectedCss)) -})