processor with config breaks

[alexanderniebuhr]

UPDATE: seems to be an issue of plugins in config, hex colors seems to be ok
actually do you get it in browser console aswell? if i add config to options like shown below, i get. without config everything is fine

Uncaught TypeError: can't access property "handler", e is null

source config parsed with following loading script
require(require('path').resolve(windi.config.js))

module.exports = {
  plugins: [
    require('windicss/plugin/typography'),
    require('windicss/plugin/forms'),
    require('windicss/plugin/aspect-ratio'),
    require('windicss/plugin/line-clamp'),
    require('windicss/plugin/filters'),
    require('windicss/plugin/scroll-snap'),
  ],
};

to

window.windicssRuntimeOptions = {
  extractInitial: false,
  preflight: false,
  mockClasses: true,
  config: {
     "plugins":[
        null,
        {
           
        },
        {
           "config":{
              "theme":{
                 "aspectRatio":{
                    
                 }
              },
              "variants":{
                 "aspectRatio":[
                    "responsive"
                 ]
              }
           }
        },
        {
           "config":{
              "theme":{
                 "lineClamp":{
                    
                 }
              },
              "variants":{
                 "lineClamp":[
                    "responsive"
                 ]
              }
           }
        },
        {
           "config":{
              "theme":{
                 "filter":{
                    "none":"none",
                    "grayscale":"grayscale(1)",
                    "invert":"invert(1)",
                    "sepia":"sepia(1)"
                 },
                 "backdropFilter":{
                    "none":"none",
                    "blur":"blur(20px)"
                 },
                 "blur":{
                    "none":"none"
                 }
              },
              "variants":{
                 "filter":[
                    "responsive"
                 ],
                 "backdropFilter":[
                    "responsive"
                 ]
              }
           }
        },
        {
           "config":{
              "theme":{
                 "snapMargin":{
                    
                 },
                 "snapPadding":{
                    
                 }
              },
              "variants":{
                 "snapMargin":[
                    "responsive"
                 ],
                 "snapPadding":[
                    "responsive"
                 ]
              }
           }
        }
     ]
  }
}

[alexanderniebuhr]

seems to be an issue of plugins in config, hex colors seems to be ok

[MpMeetPatel]

@alexanderniebuhr, can you provide an example of how to use this using custom config and plugin?

[alexanderniebuhr]

https://github.com/windicss/svelte-windicss-preprocess/blob/main/src/index.ts#L128-L153

[MpMeetPatel]

@alexanderniebuhr, Thanks got the custom config part, I am facing an issue with plugin config. Here is my config provided and written in script tag of Html file.

// const generateSolidButtons = (colors, theme) => {
//   const returnValue = {}

//   for (const [_, color] of colors.entries()) {
//     returnValue[`.btn-${color}`] = {
//       'backgroundColor': theme(`backgroundColor.${color}.500`),
//       'color': theme('colors.white'),
//       '&:hover': {
//         backgroundColor: theme(`backgroundColor.${color}.600`),
//       },
//     }
//   }

//   return returnValue
// }

// const generateLightButtons = (colors, theme) => {
//   const returnValue = {}

//   for (const [_, color] of colors.entries()) {
//     returnValue[`.btn-${color}-light`] = {
//       'backgroundColor': theme(`backgroundColor.${color}.100`),
//       'color': theme(`colors.${color}.500`),
//       'backgroundOpacity': theme('backgroundOpacity.50'),
//       '&:hover': {
//         backgroundOpacity: theme('backgroundOpacity.100'),
//       },
//       '&:active': {
//         backgroundColor: theme(`backgroundColor.${color}.200`),
//       },
//     }
//   }

//   return returnValue
// }

window.windicssRuntimeOptions = {
  mockClasses: true,
  targetElementId: 'watcher',
  config: {

    mode: 'jit',
    theme: {
      extend: {
        colors: {
          primary: {
            100: '#e4e1fe',
            200: '#cac3fd',
            300: '#ada4fa',
            400: '#968cf6',
            500: '#7367f0',
            600: '#554bce',
            700: '#3c33ac',
            800: '#27208b',
            900: '#181373',
          },
          success: {
            100: '#f1fcd4',
            200: '#dff9aa',
            300: '#c4ee7d',
            400: '#a7de5a',
            500: '#7fc92a',
            600: '#64ac1e',
            700: '#4b9015',
            800: '#36740d',
            900: '#266008',
          },
          warning: {
            100: '#fff4d1',
            200: '#ffe5a3',
            300: '#ffd375',
            400: '#ffc152',
            500: '#ffa319',
            600: '#db8212',
            700: '#b7650c',
            800: '#934a07',
            900: '#7a3804',
          },
          danger: {
            100: '#ffe6d9',
            200: '#ffc7b4',
            300: '#ffa28e',
            400: '#ff7e72',
            500: '#ff4444',
            600: '#db3140',
            700: '#b7223c',
            800: '#931536',
            900: '#7a0d32',
          },
        },
        fontFamily: {
          headings: ['Montserrat', 'sans-serif'],
          content: ['Montserrat', 'sans-serif'],
        },
        container: {
          padding: '2rem',
          center: true,
        },
      },
      sprinkleConfig: {
        borderRadius: 'lg',
      },
    },
    // plugins: [plugin(({ addComponents, theme }) => {
    //   addComponents({
    //     '.btn': {
    //       'borderRadius': theme(
    //         `borderRadius.${theme('sprinkleConfig.borderRadius')}`,
    //       ),
    //       'padding': `${theme('padding.3')} ${theme('padding.5')} ${theme(
    //         'padding.3',
    //       )} ${theme('padding.5')}`,
    //       'fontSize': theme('fontSize.sm'),
    //       'fontWeight': theme('fontWeight.medium'),
    //       'display': 'flex',
    //       'alignItems': 'center',
    //       'transitionProperty': theme('transitionProperty.DEFAULT'),
    //       'transitionDuration': theme('transitionDuration.200'),
    //       'transitionTimingFunction': theme('transitionTimingFunction.in-out'),
    //       '&:focus': {
    //         outline: theme('outline.none'),
    //       },
    //     },
    //     ...generateSolidButtons(['primary', 'success', 'warning', 'danger'], theme),
    //     ...generateLightButtons(['primary', 'success', 'warning', 'danger'], theme),
    //   })
    // })],
  },
}

My doubt is, how to work with require statements windicss config? here plugin should come from windicss import but how to do that in script tag of html ?

[alexanderniebuhr]

sems to be an issue of plugins in config, hex colors seems to be ok

plugins can't be used without multiple custom workarounds. Therefore, I opened the issue, so you just post the same issue I posted earlier above.

[MpMeetPatel]

Ok, Thanks @alexanderniebuhr got it, I thought you had a slightly different issue. Any plan to working on it? or can you guide little bit then I might also work on this issue then?

[alexanderniebuhr]

Currently not on my priority list.
Workarounds might be with using cdn like jsdelivr / unpkg to load the plugins and then do some logic in the config script to get them.
If you find a good general solution, pr is welcome. But all workarounds I found are project specific

[MpMeetPatel]

Okay Sure.

[MpMeetPatel]

Hey @alexanderniebuhr, There is one general solution I am thinking but before start implementing I like to have a suggestion on what do you think about it.

Here's what I am thinking...

1. We can export UMD of each export of official windicss exports (Including plugin and others).
2. Then serve UMD via CDN.
3. Put needed config imports (UMD script tag with src of CDN link) as they will be available via window object.
4. Then we can resolve the needed config in the browser as well.

Thanks and regards.

[alexanderniebuhr]

/cc @antfu what do you think of that proposal?

[MpMeetPatel]

hI @alexanderniebuhr, Here is my implementation of in-browser windiCSS looks like (Forked windiCSS and made separate npm package) to serve IIFE of windiCSS (using rollup config). Have look at demos and share views. Would love to make PR on official windiCSS as well if you like.

HTML demo link: https://codesandbox.io/s/html-windicss-live-playground-b2kbh
React demo link: https://codesandbox.io/s/react-windicss-live-playground-5j7xr

UNPKG CDN link: https://unpkg.com/browse/windicss-with-web-api@0.2.1/

[alexanderniebuhr]

@MpMeetPatel Thanks so much. Ported the issue over to the core repo, to see all team's opinion of whether to merge it into core or to leave it as an additional integration maintained by the community. Hope this is all fine for you.

However, if we merge it in core, I guess we would have to split parts into core and parts into this runtime-dom package.
Thanks a lot for your time and your ideas.

[MpMeetPatel]

@alexanderniebuhr, Thanks man, I am fine with any solution which provides web-APIs via plugin or in core windicss or runtime-dom or any other.

[alexanderniebuhr]

Yeah, you could also just open the pr for the rollup in core, and one in here to import them. But keep in mind that this might take longer than the RFC discussion :)

[MpMeetPatel]

@alexanderniebuhr, No problem. I will do that till then I will use my separate fork for my project.