cacheProvider options for @wyw-in-js/webpack-loader doesn't support custom memoryCache

[Esquimor]

Environment

• wyw-in-js version: 0.5.4
• custom processor: @linaria/core 6.2.0
• Bundler (+ version): webpack 5.95.0
• Node.js version: v22.5.1
• OS: macOS Sonoma version 14.5
• framework: react 18.3.1

Description

Hi, I try to custom the cacheProvider option in webpack.
But it can't generate css anymore

Reproducible Demo

// package.json:
{
  "name": "wyw-js-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack serve --mode development --open",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@linaria/core": "^6.2.0",
    "@linaria/react": "^6.2.1",
    "@wyw-in-js/babel-preset": "^0.5.4",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@babel/core": "^7.25.8",
    "@babel/preset-env": "^7.25.8",
    "@babel/preset-react": "^7.25.7",
    "@testing-library/dom": "^10.4.0",
    "@testing-library/jest-dom": "^6.5.0",
    "@testing-library/react": "^16.0.1",
    "@wyw-in-js/webpack-loader": "^0.5.4",
    "babel-jest": "^29.7.0",
    "babel-loader": "^9.2.1",
    "css-loader": "^7.1.2",
    "html-webpack-plugin": "^5.6.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "jest-transform-css": "^6.0.1",
    "mini-css-extract-plugin": "^2.9.1",
    "style-loader": "^4.0.0",
    "webpack": "^5.95.0",
    "webpack-cli": "^5.1.4",
    "webpack-dev-server": "^5.1.0"
  }
}

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { memoryCache } = require('./memory.js');
module.exports = {
    entry: path.join(__dirname, "src", "index.js"),
    output: {
      path:path.resolve(__dirname, "dist"),
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.join(__dirname, "public", "index.html"),
      }),
      new MiniCssExtractPlugin(),
    ],
    module: {
        rules: [
          {
            test: /\.?(js|jsx)$/,
            exclude: /node_modules/,
            use: [{
              loader: "babel-loader",
              options: {
                presets: ['@babel/preset-env', '@babel/preset-react'],
              }
            }, { loader: '@wyw-in-js/webpack-loader', options: {
              cacheProvider: memoryCache
            } }]
          },
          {
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, { loader: 'css-loader', options: {
              esModule: true,
              modules:  {
                namedExport: true,
                localIdentName: '[local]'
              },
            } }],
          },
        ]
      },
  devServer: {
    port: 3000,
  },
};

// memory.js
// memory cache, which is the default cache implementation in WYW-in-JS

class MemoryCache2 {
  cache = new Map();

  dependenciesCache = new Map();

  get(key) {
    return Promise.resolve(this.cache.get(key) ?? '');
  }

  getDependencies(key) {
    return Promise.resolve(this.dependenciesCache.get(key) ?? []);
  }

  set(key, value) {
    this.cache.set(key, value);
    return Promise.resolve();
  }

  setDependencies(key, value) {
    this.dependenciesCache.set(key, value);
    return Promise.resolve();
  }
}
const memoryCache = new MemoryCache2();
exports.memoryCache = memoryCache

// src/App.jsx
import React from 'react';
import { styled } from '@linaria/react';

const Title = styled.h1`
  color: red
`;

const Link = styled.a`
  color: blue;
  display: none;
`;

const App = () => {
  return (
    <div>
      <Title>Hello, React with Webpack!</Title>
      <Link data-testid='link'>link</Link>
    </div>
  );
};

export default App;

// src/index.js
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

root.render(<App />);

// babel.config.js
module.exports = {
  "presets": [["@babel/preset-env", {targets: {node: "current"}}], "@babel/preset-react", "@wyw-in-js"]
}

// wywin-js.config.js
module.exports = {
  evaluate: true,
  displayName: false,
};

// public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>React with Webpack</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

If I launch pnpm build. I will only got an empty css file in dist/main.css.

I reuse https://github.com/Anber/wyw-in-js/blob/main/packages/webpack-loader/src/cache.ts as template for my cacheMemory.
In my project, I want to override some functions.

I have make some investigation and https://github.com/Anber/wyw-in-js/blob/main/packages/webpack-loader/src/index.ts seem to work but https://github.com/Anber/wyw-in-js/blob/main/packages/webpack-loader/src/outputCssLoader.ts doesn't get cacheProvider option. So it break.

---

Update:
I find a workaround:

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
    entry: path.join(__dirname, "src", "index.js"),
    output: {
      path:path.resolve(__dirname, "dist"),
    },
    resolve: {
        extensions: ['.js', '.jsx']
    },
    plugins: [
      new HtmlWebpackPlugin({
        template: path.join(__dirname, "public", "index.html"),
      }),
      new MiniCssExtractPlugin(),
    ],
    module: {
        rules: [
          {
            test: /\.?(js|jsx)$/,
            exclude: /node_modules/,
            use: [{
              loader: "babel-loader",
              options: {
                presets: ['@babel/preset-env', '@babel/preset-react'],
              }
            }, { loader: '@wyw-in-js/webpack-loader', options: {
              cacheProvider: path.resolve(__dirname, 'memory.js')// here and change memory.js to have a module.exports = memoryCache
            } }]
          },
          {
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, { loader: 'css-loader', options: {
              esModule: true,
              modules:  {
                namedExport: true,
                localIdentName: '[local]'
              },
            } }],
          },
        ]
      },
  devServer: {
    port: 3000,
  },
};