feat: add windicss

package.json

@@ -72,6 +72,7 @@
     "vue-router": "^4.1.6"
   },
   "dependencies": {
-    "konsta": "file:src"
+    "konsta": "file:src",
+    "windicss": "^3.5.6"
   }
-}
+}

package/package.json

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

src/config.js

@@ -1,4 +1,5 @@
 const path = require('path');
+const plugin = require('tailwindcss/plugin');
 const configExtend = require('./config/config-extend.js');
 const extendTheme = require('./config/extend-theme.js');
 
@@ -36,18 +37,18 @@ const config = (userConfig = {}) => {
         extend: extendTheme(konstaConfig),
       },
       plugins: [
-        pluginBase(userConfig, konstaConfig),
-        pluginPreloader(),
-        pluginIosMaterial(),
-        pluginHairlines(),
-        pluginTouchRipple(),
-        pluginLineClamp(),
-        pluginSafeAreas(),
-        pluginTranslucent(),
-        pluginRange(),
-        pluginTouch(),
-        pluginNoScrollbar(),
-        pluginColors(konstaConfig),
+        pluginBase(plugin, userConfig, konstaConfig),
+        pluginPreloader(plugin),
+        pluginIosMaterial(plugin),
+        pluginHairlines(plugin),
+        pluginTouchRipple(plugin),
+        pluginLineClamp(plugin),
+        pluginSafeAreas(plugin),
+        pluginTranslucent(plugin),
+        pluginRange(plugin),
+        pluginTouch(plugin),
+        pluginNoScrollbar(plugin),
+        pluginColors(plugin, konstaConfig),
       ],
     },
     userConfigModified

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 = (plugin, userConfig = {}, konstConfig = {}) => {
   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 = (plugin, konstaConfig) =>
   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/configWindicss.js

@@ -0,0 +1,69 @@
+const path = require('path');
+const plugin = require('windicss/plugin');
+const configExtend = require('./config/config-extend.js');
+const extendTheme = require('./config/extend-theme.js');
+
+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 content = `${path.resolve(__dirname)}/**/*.{js,jsx,vue,svelte}`;
+
+const config = (userConfig = {}) => {
+  const userConfigKonsta = { ...(userConfig.konsta || {}) };
+  const userConfigModified = { ...userConfig };
+  delete userConfigModified.konsta;
+
+  const konstaConfig = {
+    colors: {
+      primary: '#007aff',
+      ...(userConfigKonsta.colors || {}),
+    },
+  };
+
+  const newConfig = configExtend(
+    {},
+    {
+      theme: {
+        extend: extendTheme(konstaConfig),
+      },
+      plugins: [
+        pluginBase(plugin, userConfig, konstaConfig),
+        pluginPreloader(plugin),
+        pluginIosMaterial(plugin),
+        pluginHairlines(plugin),
+        pluginTouchRipple(plugin),
+        pluginLineClamp(plugin),
+        pluginSafeAreas(plugin),
+        pluginTranslucent(plugin),
+        pluginRange(plugin),
+        pluginTouch(plugin),
+        pluginNoScrollbar(plugin),
+        pluginColors(plugin, konstaConfig),
+      ],
+    },
+    userConfigModified
+  );
+
+  if (!newConfig.content) {
+    newConfig.content = [content];
+  } else if (Array.isArray(newConfig.content)) {
+    newConfig.content = [...newConfig.content, content];
+  } else if (newConfig.content.files) {
+    newConfig.content.files = [...newConfig.content.files, content];
+  } else if (!newConfig.content.files) {
+    newConfig.content.files = [content];
+  }
+
+  return newConfig;
+};
+module.exports = config;