feat: add unocss config

package.json

@@ -74,4 +74,4 @@
   "dependencies": {
     "konsta": "file:src"
   }
-}
+}

package/package.json

@@ -35,6 +35,8 @@
       "import": "./svelte/konsta-svelte.js"
     },
     "./config": "./config.js",
-    "./config.js": "./config.js"
+    "./config.js": "./config.js",
+    "./configUnocss": "./configUnocss.js",
+    "./configUnocss.js": "./configUnocss.js"
   }
-}
+}

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';

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;
 

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');

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 }) => {

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) => {

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': {

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': {

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 }) => {

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': {

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

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'];

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))': {

src/configUnocss.js

@@ -0,0 +1,142 @@
+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 = (optionsG = {}) => {
+  const konstaConfig = {
+    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) => {
+    // plg is a PostCSS plugin
+    plg({
+      config: (key) => konstaConfig[key],
+      theme: (key) => konstaConfig[key],
+      addBase: (res) => {
+        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]);
+              }
+            );
+          }
+        });
+      },
+      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]);
+      },
+    });
+  };
+  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',
+    extendTheme(theme) {
+      theme.colors = {
+        ...konstaConfig.colors,
+      };
+    },
+    rules,
+    variants,
+    shortcuts,
+    preflights,
+    // preprocess,
+  };
+};
+
+module.exports = config;