From 804f5e5dc69e466e6068b5fbe97bc3909d9ac15d Mon Sep 17 00:00:00 2001 From: Martin Donadieu Date: Fri, 24 Mar 2023 19:08:10 +0200 Subject: [PATCH 1/2] feat: add unocss config --- package-lock.json | 124 ++++++++++++++++++++---------- package.json | 2 +- package/package.json | 6 +- src/config/plugin-base.js | 3 +- src/config/plugin-colors.js | 3 +- src/config/plugin-hairlines.js | 4 +- src/config/plugin-ios-material.js | 4 +- src/config/plugin-line-clamp.js | 4 +- src/config/plugin-no-scrollbar.js | 4 +- src/config/plugin-preloader.js | 4 +- src/config/plugin-range.js | 4 +- src/config/plugin-safe-areas.js | 4 +- src/config/plugin-touch-ripple.js | 3 +- src/config/plugin-touch.js | 4 +- src/config/plugin-translucent.js | 4 +- src/configUnocss.js | 57 ++++++++++++++ 16 files changed, 156 insertions(+), 78 deletions(-) create mode 100644 src/configUnocss.js diff --git a/package-lock.json b/package-lock.json index e95d774a..a6fe888b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -58,12 +58,13 @@ } }, "node_modules/@ampproject/remapping": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz", - "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", + "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==", "dev": true, "dependencies": { - "@jridgewell/trace-mapping": "^0.3.0" + "@jridgewell/gen-mapping": "^0.1.0", + "@jridgewell/trace-mapping": "^0.3.9" }, "engines": { "node": ">=6.0.0" @@ -1928,29 +1929,51 @@ "node": ">=6.9.0" } }, + "node_modules/@jridgewell/gen-mapping": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz", + "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==", + "dev": true, + "dependencies": { + "@jridgewell/set-array": "^1.0.0", + "@jridgewell/sourcemap-codec": "^1.4.10" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/@jridgewell/resolve-uri": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz", - "integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz", + "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==", + "dev": true, + "engines": { + "node": ">=6.0.0" + } + }, + "node_modules/@jridgewell/set-array": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", + "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", "dev": true, "engines": { "node": ">=6.0.0" } }, "node_modules/@jridgewell/sourcemap-codec": { - "version": "1.4.11", - "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz", - "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==", + "version": "1.4.14", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", + "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", "dev": true }, "node_modules/@jridgewell/trace-mapping": { - "version": "0.3.4", - "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz", - "integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==", + "version": "0.3.17", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz", + "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==", "dev": true, "dependencies": { - "@jridgewell/resolve-uri": "^3.0.3", - "@jridgewell/sourcemap-codec": "^1.4.10" + "@jridgewell/resolve-uri": "3.1.0", + "@jridgewell/sourcemap-codec": "1.4.14" } }, "node_modules/@material/material-color-utilities": { @@ -4700,9 +4723,9 @@ "dev": true }, "node_modules/fast-glob": { - "version": "3.2.11", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz", - "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==", + "version": "3.2.12", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", + "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==", "dev": true, "dependencies": { "@nodelib/fs.stat": "^2.0.2", @@ -7041,9 +7064,9 @@ } }, "node_modules/postcss": { - "version": "8.4.16", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz", - "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==", + "version": "8.4.21", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", + "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", "dev": true, "funding": [ { @@ -8809,12 +8832,13 @@ }, "dependencies": { "@ampproject/remapping": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.1.2.tgz", - "integrity": "sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/@ampproject/remapping/-/remapping-2.2.0.tgz", + "integrity": "sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==", "dev": true, "requires": { - "@jridgewell/trace-mapping": "^0.3.0" + "@jridgewell/gen-mapping": "^0.1.0", + "@jridgewell/trace-mapping": "^0.3.9" } }, "@babel/cli": { @@ -10119,26 +10143,42 @@ "integrity": "sha512-H9XAx3hc0BQHY6l+IFSWHDySypcXsvsuLhgYLUGywmJ5pswRVQJUHpOsobnLYp2ZUaUlKiKDrgWWhosOwAEM8Q==", "dev": true }, + "@jridgewell/gen-mapping": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz", + "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==", + "dev": true, + "requires": { + "@jridgewell/set-array": "^1.0.0", + "@jridgewell/sourcemap-codec": "^1.4.10" + } + }, "@jridgewell/resolve-uri": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz", - "integrity": "sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz", + "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==", + "dev": true + }, + "@jridgewell/set-array": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.2.tgz", + "integrity": "sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==", "dev": true }, "@jridgewell/sourcemap-codec": { - "version": "1.4.11", - "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz", - "integrity": "sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==", + "version": "1.4.14", + "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.14.tgz", + "integrity": "sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==", "dev": true }, "@jridgewell/trace-mapping": { - "version": "0.3.4", - "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz", - "integrity": "sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==", + "version": "0.3.17", + "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.17.tgz", + "integrity": "sha512-MCNzAp77qzKca9+W/+I0+sEpaUnZoeasnghNeVc41VZCEKaCH73Vq3BZZ/SzWIgrqE4H4ceI+p+b6C0mHf9T4g==", "dev": true, "requires": { - "@jridgewell/resolve-uri": "^3.0.3", - "@jridgewell/sourcemap-codec": "^1.4.10" + "@jridgewell/resolve-uri": "3.1.0", + "@jridgewell/sourcemap-codec": "1.4.14" } }, "@material/material-color-utilities": { @@ -12122,9 +12162,9 @@ "dev": true }, "fast-glob": { - "version": "3.2.11", - "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz", - "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==", + "version": "3.2.12", + "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.12.tgz", + "integrity": "sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==", "dev": true, "requires": { "@nodelib/fs.stat": "^2.0.2", @@ -13868,9 +13908,9 @@ } }, "postcss": { - "version": "8.4.16", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz", - "integrity": "sha512-ipHE1XBvKzm5xI7hiHCZJCSugxvsdq2mPnsq5+UF+VHCjiBvtDrlxJfMBToWaP9D5XlgNmcFGqoHmUn0EYEaRQ==", + "version": "8.4.21", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", + "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", "dev": true, "requires": { "nanoid": "^3.3.4", diff --git a/package.json b/package.json index f3bda996..9411a479 100644 --- a/package.json +++ b/package.json @@ -74,4 +74,4 @@ "dependencies": { "konsta": "file:src" } -} \ No newline at end of file +} diff --git a/package/package.json b/package/package.json index e1034696..95785d48 100644 --- a/package/package.json +++ b/package/package.json @@ -32,6 +32,8 @@ "import": "./svelte/konsta-svelte.js" }, "./config": "./config.js", - "./config.js": "./config.js" + "./config.js": "./config.js", + "./configUnocss": "./configUnocss.js", + "./configUnocss.js": "./configUnocss.js" } -} \ No newline at end of file +} diff --git a/src/config/plugin-base.js b/src/config/plugin-base.js index 55a4d5d4..f156c662 100644 --- a/src/config/plugin-base.js +++ b/src/config/plugin-base.js @@ -1,9 +1,8 @@ -const plugin = require('tailwindcss/plugin'); const hexToRgb = require('./hex-to-rgb.js'); const iosColors = require('./ios-colors.js'); const mdColors = require('./md-colors.js'); -module.exports = (userConfig = {}, konstConfig = {}) => { +module.exports = (userConfig = {}, konstConfig = {}, plugin) => { let iosFont = '-apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif'; let materialFont = 'Roboto, system-ui, Noto, Helvetica, Arial, sans-serif'; diff --git a/src/config/plugin-colors.js b/src/config/plugin-colors.js index b6b4d6d5..67ad415f 100644 --- a/src/config/plugin-colors.js +++ b/src/config/plugin-colors.js @@ -1,4 +1,3 @@ -const plugin = require('tailwindcss/plugin'); const hexToRgb = require('./hex-to-rgb.js'); const iosColors = require('./ios-colors.js'); const mdColors = require('./md-colors.js'); @@ -20,7 +19,7 @@ const rulesForColor = (name, hex) => { }; }; -module.exports = (konstaConfig) => +module.exports = (konstaConfig, plugin) => plugin(({ addUtilities }) => { const themeColors = konstaConfig.colors; diff --git a/src/config/plugin-hairlines.js b/src/config/plugin-hairlines.js index 7a37e1f9..045df47d 100644 --- a/src/config/plugin-hairlines.js +++ b/src/config/plugin-hairlines.js @@ -1,6 +1,4 @@ -const plugin = require('tailwindcss/plugin'); - -module.exports = () => +module.exports = (plugin) => plugin(({ addUtilities, theme }) => { const themeColors = theme('colors'); const themeDurations = theme('transitionDuration'); diff --git a/src/config/plugin-ios-material.js b/src/config/plugin-ios-material.js index ac063f93..01ad5551 100644 --- a/src/config/plugin-ios-material.js +++ b/src/config/plugin-ios-material.js @@ -1,6 +1,4 @@ -const plugin = require('tailwindcss/plugin'); - -module.exports = () => +module.exports = (plugin) => plugin(({ addVariant, e }) => { addVariant('material', ({ modifySelectors, separator }) => { modifySelectors(({ className, selector }) => { diff --git a/src/config/plugin-line-clamp.js b/src/config/plugin-line-clamp.js index fdd180fe..2c3977cb 100644 --- a/src/config/plugin-line-clamp.js +++ b/src/config/plugin-line-clamp.js @@ -1,6 +1,4 @@ -const plugin = require('tailwindcss/plugin'); - -module.exports = () => +module.exports = (plugin) => plugin(({ addUtilities }) => { const lineClamp = {}; Array.from({ length: 10 }).forEach((_, index) => { diff --git a/src/config/plugin-no-scrollbar.js b/src/config/plugin-no-scrollbar.js index 37b34335..661d0922 100644 --- a/src/config/plugin-no-scrollbar.js +++ b/src/config/plugin-no-scrollbar.js @@ -1,6 +1,4 @@ -const plugin = require('tailwindcss/plugin'); - -module.exports = () => +module.exports = (plugin) => plugin(({ addUtilities }) => { const noScrollbar = { '.no-scrollbar': { diff --git a/src/config/plugin-preloader.js b/src/config/plugin-preloader.js index 01559ce3..0318dd06 100644 --- a/src/config/plugin-preloader.js +++ b/src/config/plugin-preloader.js @@ -1,6 +1,4 @@ -const plugin = require('tailwindcss/plugin'); - -module.exports = () => +module.exports = (plugin) => plugin(({ addComponents }) => { addComponents({ '.k-ios-preloader > span': { diff --git a/src/config/plugin-range.js b/src/config/plugin-range.js index e812b89b..1c14a287 100644 --- a/src/config/plugin-range.js +++ b/src/config/plugin-range.js @@ -1,6 +1,4 @@ -const plugin = require('tailwindcss/plugin'); - -module.exports = () => +module.exports = (plugin) => plugin(({ addVariant, e }) => { addVariant('range-thumb', ({ modifySelectors, separator }) => { modifySelectors(({ className }) => { diff --git a/src/config/plugin-safe-areas.js b/src/config/plugin-safe-areas.js index edfae261..363956b6 100644 --- a/src/config/plugin-safe-areas.js +++ b/src/config/plugin-safe-areas.js @@ -1,6 +1,4 @@ -const plugin = require('tailwindcss/plugin'); - -module.exports = () => +module.exports = (plugin) => plugin(({ addUtilities, addBase, theme, e }) => { const base = { ':root': { diff --git a/src/config/plugin-touch-ripple.js b/src/config/plugin-touch-ripple.js index 338566b8..7497ce8c 100644 --- a/src/config/plugin-touch-ripple.js +++ b/src/config/plugin-touch-ripple.js @@ -1,7 +1,6 @@ -const plugin = require('tailwindcss/plugin'); const hexToRgb = require('./hex-to-rgb.js'); -module.exports = () => +module.exports = (plugin) => plugin(({ addUtilities, addBase, theme }) => { addBase({ // prettier-ignore diff --git a/src/config/plugin-touch.js b/src/config/plugin-touch.js index 1da9b4f3..b25c8538 100644 --- a/src/config/plugin-touch.js +++ b/src/config/plugin-touch.js @@ -1,6 +1,4 @@ -const plugin = require('tailwindcss/plugin'); - -module.exports = () => +module.exports = (plugin) => plugin(({ addUtilities }) => { const touch = {}; const values = ['pan-x', 'pan-y', 'none', 'manipulation']; diff --git a/src/config/plugin-translucent.js b/src/config/plugin-translucent.js index 28c0d0a8..aee46576 100644 --- a/src/config/plugin-translucent.js +++ b/src/config/plugin-translucent.js @@ -1,6 +1,4 @@ -const plugin = require('tailwindcss/plugin'); - -module.exports = () => +module.exports = (plugin) => plugin(({ addUtilities }) => { addUtilities({ '@supports (backdrop-filter: blur(20px))': { diff --git a/src/configUnocss.js b/src/configUnocss.js new file mode 100644 index 00000000..cf0a651f --- /dev/null +++ b/src/configUnocss.js @@ -0,0 +1,57 @@ +const pluginBase = require('./config/plugin-base.js'); +const pluginColors = require('./config/plugin-colors.js'); +const pluginPreloader = require('./config/plugin-preloader.js'); +const pluginHairlines = require('./config/plugin-hairlines.js'); +const pluginTouchRipple = require('./config/plugin-touch-ripple.js'); +const pluginIosMaterial = require('./config/plugin-ios-material.js'); +const pluginLineClamp = require('./config/plugin-line-clamp.js'); +const pluginSafeAreas = require('./config/plugin-safe-areas.js'); +const pluginTranslucent = require('./config/plugin-translucent.js'); +const pluginRange = require('./config/plugin-range.js'); +const pluginTouch = require('./config/plugin-touch.js'); +const pluginNoScrollbar = require('./config/plugin-no-scrollbar.js'); + +const config = (options = {}) => { + const konstaConfig = { + dark: options.dark || 'class', + colors: { + primary: '#007aff', + }, + }; + const plugin = (plg) => { + const rls = []; + plg({ + addBase: (res) => { + Object.keys(res).forEach((key) => { + rls.push([key, res[key]]); + }); + }, + config: (key) => konstaConfig[key], + }); + return rls; + }; + const rules = [ + pluginBase({}, konstaConfig, plugin), + pluginPreloader(plugin), + pluginIosMaterial(plugin), + pluginHairlines(plugin), + pluginTouchRipple(plugin), + pluginLineClamp(plugin), + pluginSafeAreas(plugin), + pluginTranslucent(plugin), + pluginRange(plugin), + pluginTouch(plugin), + pluginNoScrollbar(plugin), + pluginColors(konstaConfig, plugin), + ]; + + return { + name: 'unocss-preset-konstaui', + theme: { + colors: konstaConfig.colors, + }, + rules, + }; +}; + +module.exports = config; From 62d2c733953fb47e0b204299798075c7927b5bf7 Mon Sep 17 00:00:00 2001 From: Martin Donadieu Date: Mon, 27 Mar 2023 05:15:38 +0300 Subject: [PATCH 2/2] fix: made a draft v0 with chat gpt-4 --- src/configUnocss.js | 131 ++++++++++++++++++++++++++++++++++++-------- 1 file changed, 108 insertions(+), 23 deletions(-) diff --git a/src/configUnocss.js b/src/configUnocss.js index cf0a651f..bf82dd21 100644 --- a/src/configUnocss.js +++ b/src/configUnocss.js @@ -11,46 +11,131 @@ const pluginRange = require('./config/plugin-range.js'); const pluginTouch = require('./config/plugin-touch.js'); const pluginNoScrollbar = require('./config/plugin-no-scrollbar.js'); -const config = (options = {}) => { +const config = (optionsG = {}) => { const konstaConfig = { - dark: options.dark || 'class', + dark: optionsG.dark || 'class', colors: { primary: '#007aff', }, }; + const rules = [ + // [/^text-(.*)$/, ([, c], { theme }) => { + // if (theme.colors[c]) + // return { color: theme.colors[c] } + // }], + // [/^m-(\d)$/, ([, d]) => ({ margin: `${d / 4}rem` }), { layer: 'utilities' }], + // when you omit the layer, it will be `default` + // ['btn', { padding: '4px' }], + ]; + const shortcuts = [ + // // you could still have object style + // { + // btn: 'py-2 px-4 font-semibold rounded-lg shadow-md', + // }, + // // dynamic shortcuts + // [/^btn-(.*)$/, ([, c]) => `bg-${c}-400 text-${c}-100 py-2 px-4 rounded-lg`], + ]; + const variants = [ + // // hover: + // (matcher) => { + // if (!matcher.startsWith('hover:')) + // return matcher + // return { + // // slice `hover:` prefix and passed to the next variants and rules + // matcher: matcher.slice(6), + // selector: s => `${s}:hover`, + // } + // } + ]; + const preflights = [ + // { + // layer: 'my-layer', + // getCSS: async () => (await fetch('my-style.css')).text(), + // }, + ]; + // const preprocess = (_matcher) => { + // // return matcher.startsWith('prefix-') + // // ? matcher.slice(7) + // // : undefined // ignore + // return undefined; + // }; + const plugin = (plg) => { - const rls = []; + // plg is a PostCSS plugin plg({ + config: (key) => konstaConfig[key], + theme: (key) => konstaConfig[key], addBase: (res) => { - Object.keys(res).forEach((key) => { - rls.push([key, res[key]]); + Object.entries(res).forEach(([selector, properties]) => { + if (typeof selector === 'string') { + rules.push([selector, properties]); + } else if (typeof selector === 'object') { + Object.entries(selector).forEach( + ([nestedSelector, nestedProperties]) => { + rules.push([nestedSelector, nestedProperties]); + } + ); + } }); }, - config: (key) => konstaConfig[key], + addUtilities: (res, options = {}) => { + Object.entries(res).forEach(([selector, properties]) => { + const layer = options.layer || 'utilities'; + if (typeof selector === 'string') { + rules.push([selector, properties, { layer }]); + } else if (typeof selector === 'object') { + Object.entries(selector).forEach( + ([nestedSelector, nestedProperties]) => { + rules.push([nestedSelector, nestedProperties, { layer }]); + } + ); + } + }); + }, + addComponents: (res, options = {}) => { + Object.entries(res).forEach(([selector, properties]) => { + const layer = options.layer || 'components'; + if (typeof selector === 'string') { + rules.push([selector, properties, { layer }]); + } else if (typeof selector === 'object') { + Object.entries(selector).forEach( + ([nestedSelector, nestedProperties]) => { + rules.push([nestedSelector, nestedProperties, { layer }]); + } + ); + } + }); + }, + addVariant(name, variantFn) { + variants.push([name, variantFn]); + }, }); - return rls; }; - const rules = [ - pluginBase({}, konstaConfig, plugin), - pluginPreloader(plugin), - pluginIosMaterial(plugin), - pluginHairlines(plugin), - pluginTouchRipple(plugin), - pluginLineClamp(plugin), - pluginSafeAreas(plugin), - pluginTranslucent(plugin), - pluginRange(plugin), - pluginTouch(plugin), - pluginNoScrollbar(plugin), - pluginColors(konstaConfig, plugin), - ]; + pluginBase({}, konstaConfig, plugin); + pluginPreloader(plugin); + pluginIosMaterial(plugin); + pluginHairlines(plugin); + pluginTouchRipple(plugin); + pluginLineClamp(plugin); + pluginSafeAreas(plugin); + pluginTranslucent(plugin); + pluginRange(plugin); + pluginTouch(plugin); + pluginNoScrollbar(plugin); + pluginColors(konstaConfig, plugin); return { name: 'unocss-preset-konstaui', - theme: { - colors: konstaConfig.colors, + extendTheme(theme) { + theme.colors = { + ...konstaConfig.colors, + }; }, rules, + variants, + shortcuts, + preflights, + // preprocess, }; };