In this PR, we are relocating the excess configuration settings from vite.config.ts and other similar files to a newly created excss.config.ts. This step is crucial as we gear up for the creation of a future VSCode extension, where the extension needs the ability to read the configuration seamlessly. Additionally, this modification will streamline the process of switching between bundlers whenever necessary, making it more efficient.

vite.config.ts

In the updated configuration, we have simplified the excss plugin initialization in vite.config.ts. Similar changes are also implemented in Next.js and webpack.

import Excss from "excss/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [
+    Excss(),
-    Excss({
-      inject: ``,
-    }),
  ],
});

excss.config.ts

A new file excss.config.ts has been introduced to house the excess configuration settings, which includes the inject option.

+import { defineConfig } from "excss/config";
+
+export default defineConfig({
+  inject: ``,
+});

⚠️ BREAKING CHANGE !!

Before

import { Excss } from "excss/vite";
import { ExcssPlugin } from "excss/webpack";
import { createExcss } from "excss/next";

After

import Excss from "excss/vite";
import ExcssPlugin from "excss/webpack";
import createExcss from "excss/next";

⚠️ BREAKING CHANGE !!

Unified variants and inject fields for clearer positioning.

Before

// options
{
  variants: {
    red: "#ff0000",
  },
  inject: `
    $breakpoints: (
      400: "screen and (max-width: 400px)",
      800: "screen and (max-width: 800px)",
      1000: "screen and (max-width: 1000px)",
    ) !default;

    @mixin mq($breakpoint) {
      @media #{map-get($breakpoints, $breakpoint)} {
          @content;
      }
    }
  `,
}

After

import { variants } from "excss/config";

// options
{
  inject: `
    ${variants({
      red: "#ff0000",
    })}
    $breakpoints: (
      400: "screen and (max-width: 400px)",
      800: "screen and (max-width: 800px)",
      1000: "screen and (max-width: 1000px)",
    ) !default;

    @mixin mq($breakpoint) {
      @media #{map-get($breakpoints, $breakpoint)} {
          @content;
      }
    }
  `,
}

This PR was opened by the Changesets release GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated.

Releases

@excss/[email protected]

Minor Changes

• #48 c7b6aa6 Thanks @taishinaritomi! - refactor: rename inject to helper

  // excss.config.ts
  import { defineConfig } from "excss/config";
  
  export default defineConfig({
  -  inject: ``,
  +  helper: ``,
  });
  

• #32 6955f23 Thanks @taishinaritomi! - feat: integrated variants field into inject field

  +import { variants } from "excss/config";
  
  {
  - variants: {
  -   red: "#ff0000",
  - },
    helper: `
  +   ${variants({
  +     red: "#ff0000",
  +   })}
      $breakpoints: (
        400: "screen and (max-width: 400px)",
        800: "screen and (max-width: 800px)",
        1000: "screen and (max-width: 1000px)",
      ) !default;
  
      @mixin mq($breakpoint) {
        @media #{map-get($breakpoints, $breakpoint)} {
            @content;
        }
      }
    `,
  }
  

Patch Changes

• #28 2f59bf8 Thanks @taishinaritomi! - feat: change in hash generation method for FILE_ID

• #29 10b44d8 Thanks @taishinaritomi! - refactor: modification of the shim injected into wasm.

• #31 7e18937 Thanks @taishinaritomi! - feat: add support for ESM

[email protected]

Minor Changes

• #48 c7b6aa6 Thanks @taishinaritomi! - refactor: rename inject to helper

  // excss.config.ts
  import { defineConfig } from "excss/config";
  
  export default defineConfig({
  -  inject: ``,
  +  helper: ``,
  });
  

• #35 8953f56 Thanks @taishinaritomi! - feat: support for excss.config.ts

  vite.config.ts

  In the updated configuration, we have simplified the excss plugin initialization in vite.config.ts. Similar changes are also implemented in Next.js and webpack.

  import Excss from "excss/vite";
  import { defineConfig } from "vite";
  
  export default defineConfig({
    plugins: [
  +    Excss(),
  -    Excss({
  -      inject: ``,
  -    }),
    ],
  });
  

  excss.config.ts

  A new file excss.config.ts has been introduced to house the excess configuration settings, which includes the inject option.

  +import { defineConfig } from "excss/config";
  +
  +export default defineConfig({
  +  helper: ``,
  +});
  

• #40 5e03c41 Thanks @taishinaritomi! - refactor: webpack plugin

• #32 6955f23 Thanks @taishinaritomi! - feat: integrated variants field into inject field

  +import { variants } from "excss/config";
  
  {
  - variants: {
  -   red: "#ff0000",
  - },
    helper: `
  +   ${variants({
  +     red: "#ff0000",
  +   })}
      $breakpoints: (
        400: "screen and (max-width: 400px)",
        800: "screen and (max-width: 800px)",
        1000: "screen and (max-width: 1000px)",
      ) !default;
  
      @mixin mq($breakpoint) {
        @media #{map-get($breakpoints, $breakpoint)} {
            @content;
        }
      }
    `,
  }
  

• #33 9d49dc8 Thanks @taishinaritomi! - feat: change export method for plugins from named export to default export

  -import { Excss } from "excss/vite";
  +import Excss from "excss/vite";
  
  -import { ExcssPlugin } from "excss/webpack";
  +import ExcssPlugin from "excss/webpack";
  
  -import { createExcss } from "excss/next";
  +import createExcss from "excss/next";
  

Patch Changes

• #28 2f59bf8 Thanks @taishinaritomi! - feat: change in hash generation method for FILE_ID

• #49 303e279 Thanks @taishinaritomi! - fix: remove next warn log

• #31 7e18937 Thanks @taishinaritomi! - feat: add support for ESM

• #34 05dd416 Thanks @taishinaritomi! - feat(next-plugin): simplify next plugin

• Updated dependencies [2f59bf8, c7b6aa6, 6955f23, 10b44d8, 7e18937]:

  • @excss/[email protected]

Due to the build environment, the hash value was changing. To address this issue, I've changed it to use the relative_path instead of the absolute_path. Additionally, to ensure uniqueness, I've appended the packageName to the hash.

Before

FILE_ID = hash(absolute_path)

After

FILE_ID = hash(package_name + relative_path)