Hey, thanks for making the library.

I've been using Macaron plugin with Vite in a medium size TS Monorepo project with a React Project. After introducing the plugin library to Vite project I've noticed my hot reload times have increased substantially to 30-60 secs.

These hot reload times are bigger than when I used library such as Chakra UI with Vite in the past. To be truthful, I'm no expert in debugging hot reload speed problem but from what I can see in my network tab, the lag in web-page rendering is when the macaron plugin transpiles code.

Packages

"vite": "^3.0.9"
"@vitejs/plugin-react": "1.3.2"
"@macaron-css/core": "^0.1.10"
"@macaron-css/react": "^0.1.10"
"@macaron-css/vite": "^0.1.12"

My current Vite config

import { defineConfig } from 'vite';
import { macaronVitePlugin } from '@macaron-css/vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [macaronVitePlugin(), react()],
  server: {
    port: 3000
  },
  build: {
    target: 'esnext'
  },
  optimizeDeps: {
    esbuildOptions: { preserveSymlinks: true }
  }
});

Can you offer any tips or suggestions to get the hot reload times down?

I know this library is using VE under the hood. But solid gives opportunity to define style properties as they are named in CSS, so, and as I found out it does work, but Typescript shows error:

Is there a full esbuild example? The one linked in the documentation here emits an index.js and an index.css files. What's the suggested way to use these files in an html page? Should I just add a <link src="index.css" rel="stylesheet" /> tag in the html? Would this always be single a compiled stylesheet if I have several styled components in different files?

import * as macaronCore from '@macaron-css/core'
export const css = macaronCore.style;

Hi, I am trying to include/bundle some useful Macaron functions inside of a design system package. Specifically things like style functions in order to give users a "css" prop to use without having to install macaron/core or macaron/react itself. Also things like createTheme to make custom themes. This pattern works with other libraries, including VE. Currently when importing a function from my package in the consuming app the below error is thrown. This doesn't happen when importing any functions directly form Macaron or when importing {style as css} from @macaron-css/core in the app. This also doesn't work when importing directly to another file within in the same directory, before compiling.

Uncaught Error: Styles were unable to be assigned to a file. This is generally caused by one of the following:

• You may have created styles outside of a '.css.ts' context
• You may have incorrect configuration

Any suggestions on how to resolve this? thanks!

I am currently in the processes of porting over a design system from Vanilla Extract to Macaron.

I was compiling with Vite in Lib mode using vite-dts in Vanilla Extract and everything was working fine. When using Macaron, the builds are failing.

Here's the vite.config

import { defineConfig } from 'vite';
import dts from 'vite-plugin-dts';
import { peerDependencies } from './package.json';
import { macaronVitePlugin } from '@macaron-css/vite';

const externals = [...Object.keys(peerDependencies)];

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.ts',
      fileName: 'index',
      formats: ['cjs', 'es'],
    },
    rollupOptions: {
      external: externals,
    },
  },
  plugins: [
    macaronVitePlugin(),
    dts({
      beforeWriteFile: (filePath, content) => ({
        content,
        filePath: filePath.replace('src', ''),
      }),
      compilerOptions: {
        baseUrl: './src/',
        emitDeclarationOnly: true,
        noEmit: false,
      },
      exclude: ['src/**/*.stories.tsx'],
      outputDir: 'dist/types',
    }),
  ],
});

FWIW, I was able to get builds working by removing vite-dts from the vite.config, building, and then running a separate build step with tsc and the following flags "tsc --emitDeclarationOnly --declaration --declarationDir dist/types".

The current published version of macaron pushes all the bindings first and the styled nodes later, this means that all the nodes that reference a style declaration in the beginning of the new virtual file and the styled nodes are later. This works fine if only the variables are being used inside declaration but becomes an issue when the declaration is used inside a another variable since babel considers both to be a "binding"

Consider this:

const color = 'red';
const red = style({ color });
const entireClass = `pt-2 ${red}`;

the expected compiled output would be

const color = 'red';
const red = 'red_HASH';
const entireClass = `pt-2 ${red}`;

but it is actually

const color = 'red';
const entireClass = `pt-2 ${red}`;

const red = 'red_HASH';

This would produce an error and shouldn't be that hard to fix. I think the fix would require checking the source location of binding and declaration and based on that decide which one should be pushed first

macaron extracts every style declaration out of the current file into a separate virtual file and adds imports for those declarations in the source file. It works like this:

// main.ts
const red = style({ color: 'red' })

and this gets compiled into

// main.ts
import { red } from 'extracted_HASH.css.ts'

// extracted_HASH.css.ts
const red = style({ color: 'red' });
module.exports = { red }

The issue that this currently has is that it doesn't check the scope of these variables and just moves them. This means that if there is a variable red in the top scope and then another variable red in a function scope, it wouldn't rename them in the virtual file to prevent conflict and consider them to be the same style declaration

First of all, thank you so much for making this library, great stuff!

Is there currently a way to get Styled Component variant type definitions? Not sure if I am doing something wrong. Take a simple button using the traditional Vanilla Extract Recipe.

const ButtonWithRecipe = recipe({
  base: {
    backgroundColor: 'gainsboro',
    borderRadius: '9999px',
  },
  variants: {
    sm: { padding: '12px' },
    md: { padding: '16px' },
  },
});

//When using the RecipeVariants import the correct type is returned
export type ButtonRecipeVariants = RecipeVariants<typeof ButtonWithRecipe>;

When recreating that same thing as a Styled Component I am having trouble getting the correct type definitions.

const StyledButton = styled('button', {
    base: {
      backgroundColor: 'gainsboro',
      borderRadius: '9999px',
      fontSize: '13px',
      border: '0',
    },
    variants: {
      sm: { padding: '12px' },
      md: { padding: '16px' },
    },
  });

//I am able to get type definitions for the _entire_ component including DOM props with the following, 
export type WithDOMProps = React.ComponentProps<typeof StyledButton>;

//With the provided StyleVariants import the style always returns "type StyledButtonVariants = unknown"
export type StyledButtonVariants = StyleVariants<typeof ButtonWithRecipe>;

In Stiches you can compose components from other elements, i.e. where MyCoolElement is another component.

Currently in Macaron it will throw a type error "... is not assignable to parameter of type 'string'"

The functionality still works and I have just been using //@ts-expect-error but thats not ideal.

const Button = styled(MyCoolElement, {
  base: {
    backgroundColor: 'gainsboro',
  },
});

I'm trying to run macaron inside Astro project within Solid component. So I placed it inside Astro's vite config, plugins array. but getting an error:

[vite] Internal server error: ENOENT: no such file or directory, open 'astro:scripts/before-hydration.js'
  Plugin: macaron-css-vite
  File: astro:scripts/before-hydration.js