Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature Proposal] - Nuxt Module - Provide access to Nuxt instance and it's underlying configuration on RuleContext object #3532

Open
4 tasks done
AndrewBogdanovTSS opened this issue Jan 26, 2024 · 0 comments

Comments

@AndrewBogdanovTSS
Copy link
Contributor

Clear and concise description of the problem

I would like to have access to Nuxt Instance within RulesContext object in all Uno entitits such as Theme, Rules, Shortcuts, Safelist, Variants.
There is frequetly a need to get access to a Nuxt specific entity e.g. runtimeConfig when generating theme and extending UnoCSS funcitonality. This is extra valuable in Nuxt app with layered architecture.

Suggested solution

Example of usage in Theme:

theme({ nuxt }) {
  const { colors } = nuxt.options.runtimeConfig.designSystem
  return {
    colors
  }
} 

Example in usage in Rules:

rules: [
  [/^c-(.*)$/, ([, c], { theme, nuxt }) => {
      return { 
         color: nuxt.options.runtimeConfig.designSystem.colors[c] 
      }
  }],
]

Example of usage in Shortcuts:

shortcuts: [
  [/^badge-(.*)$/, ([, c], { theme, nuxt }) => {
    if (nuxt.options.runtimeConfig.designSystem.breakoints.includes(c))
      return `bg-${c}4:10 text-${c}5 rounded`
  }],
]

Example of usage in Variants:

variants: [
  {
    name: 'variant-name',
    match(matcher, { theme, nuxt }) {
      if(nuxt.options.runtimeConfig.designSystem.brandVariants)
        // ....
    },
  },
]

Example of usage in Safelist:

safelist: [
  ( { nuxt } ) => {
  const { breakpoints, colors } = nuxt.options.runtimeConfig.designSystem
  return ...Object.keys(colors).map(colors => Object.keys(breakpoints).map((br) => `${br}:c-${color}`))) 
}, 
]

Alternative

I tried to attach runtimeConfig as an object on theme in unocss:config Nuxt hook but for some reason the object is not available on the final theme as if something is overriding it

// custom nuxt module code
nuxt.hook('unocss:config', (config) => {
      config.runtimeConfig = nuxt.options.runtimeConfig
    })

....
// code from rule
export const overflows: Rule[] = [
  [/^overflow-wrap-(.*)$/, ([, d], ctx) => {
    console.log('ctx:', ctx.runtimeConfig) // returns undefined
    ...
  }]
]

Additional context

No response

Validations

  • Read the Contributing Guidelines.
  • Read the README.md of using the package.
  • Already used the Interactive Docs.
  • Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant