fix: browserslist not work

README.md

@@ -16,7 +16,8 @@ A style loader for esbuild, support for CSS, SCSS, LESS, Stylus, and CSS Modules
 - [x] Support for CSS Modules
 - [x] Support for LESS `builtin` 
 - [x] Support for CSS 
-- [x] Autoprefixer for CSS `>= 0.25%, not dead`
+- [x] Autoprefixer for CSS
+  - default: `ios >= 11, android >= 5, chrome >= 54`
 - [x] Support sourceMap
 - [x] Fast compiler engine by [lightningcss](https://lightningcss.dev/)
 

__tests__/runTest.ts

@@ -26,6 +26,7 @@ export const runTest = async (files: string[], outdir: string, options?: BuildOp
               cssModules: {
                 pattern: '[name]__[local]',
               },
+              browsers: 'ios >= 11, android >= 5, chrome >= 54',
             }),
           ],
 

__tests__/user-case1/__snapshots__/index.test.ts.snap

@@ -0,0 +1,78 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`user-case1 style-loader 1`] = `
+"(() => {
+  var __create = Object.create;
+  var __defProp = Object.defineProperty;
+  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+  var __getOwnPropNames = Object.getOwnPropertyNames;
+  var __getProtoOf = Object.getPrototypeOf;
+  var __hasOwnProp = Object.prototype.hasOwnProperty;
+  var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+    get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+  }) : x)(function(x) {
+    if (typeof require !== "undefined")
+      return require.apply(this, arguments);
+    throw new Error('Dynamic require of "' + x + '" is not supported');
+  });
+  var __copyProps = (to, from, except, desc) => {
+    if (from && typeof from === "object" || typeof from === "function") {
+      for (let key of __getOwnPropNames(from))
+        if (!__hasOwnProp.call(to, key) && key !== except)
+          __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+    }
+    return to;
+  };
+  var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+    // If the importer is in node compatibility mode or this is not an ESM
+    // file that has been converted to a CommonJS file using a Babel-
+    // compatible transform (i.e. "__esModule" has not been set), then set
+    // "default" to the CommonJS "module.exports" for node compatibility.
+    isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+    mod
+  ));
+
+  // __tests__/user-case1/index.jsx
+  var import_react = __toESM(__require("react"));
+  var import_client = __require("react-dom/client");
+  var App = () => /* @__PURE__ */ import_react.default.createElement("div", { className: "app" }, /* @__PURE__ */ import_react.default.createElement("h1", { className: "title" }, "Hello World"));
+  (0, import_client.createRoot)(document.getElementById("root")).render(/* @__PURE__ */ import_react.default.createElement(App, null));
+})();
+//# sourceMappingURL=index.js.map
+"
+`;
+
+exports[`user-case1 style-loader 2`] = `
+"
+.index-modules__brightBox {
+  padding: 0 46rpx 0 66rpx;
+  height: 80rpx;
+  width: 100%;
+  margin-bottom: 28rpx;
+  flex-direction: row;
+  align-items: center;
+  display: flex;
+  position: relative;
+}
+.index-modules__brightBox .index-modules__sliderBox {
+  margin-left: 58rpx;
+  margin-right: 18rpx;
+  height: 60rpx;
+}
+.index-modules__brightBox .index-modules__text {
+  color: #fff;
+  font-size: 13px;
+  line-height: 80rpx;
+  width: 66rpx;
+  text-align: end;
+}
+.index-modules__sliderTextBox {
+  width: calc(100vw - 108rpx);
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+  position: absolute;
+}
+/*# sourceMappingURL=index.css.map */
+"
+`;

__tests__/user-case1/index.jsx

@@ -0,0 +1,11 @@
+import styles from './index.modules.less';
+
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+const App = () => (
+  <div className={'app'}>
+    <h1 className={'title'}>Hello World</h1>
+  </div>
+);
+
+createRoot(document.getElementById('root')).render(<App />);

__tests__/user-case1/index.modules.less

@@ -0,0 +1,31 @@
+.brightBox{
+  display: flex;
+  flex-direction: row;
+// justify-content: space-between;
+  align-items: center;
+  padding: 0 46rpx 0 66rpx;
+  height: 80rpx;
+  width: 100%;
+  margin-bottom: 28rpx;
+  position: relative;
+
+.sliderBox{
+  margin-left: 58rpx;
+  margin-right: 18rpx;
+  height: 60rpx;
+}
+.text {
+  color: #fff;
+  font-size: 13px;
+  line-height: 80rpx;
+  width: 66rpx;
+  text-align: end;
+}
+}
+.sliderTextBox {
+  position: absolute;
+  width: calc(100vw - 108rpx);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

__tests__/user-case1/index.test.ts

@@ -0,0 +1,27 @@
+import path from 'path';
+import { removeComments, runTest } from '../runTest';
+import fse from 'fs-extra';
+
+const OUTPUT_HTML = !!process.env.OUTPUT_HTML;
+
+describe(path.basename(path.dirname(__filename)), function () {
+  it('style-loader', async function () {
+    const output = path.resolve(__dirname, 'output');
+    fse.removeSync(output);
+    const result = await runTest([path.resolve(__dirname, './index.jsx')], output);
+    const allFile = result.outputFiles.map((item) => item.path);
+    allFile.forEach((file) => {
+      fse.ensureFileSync(file);
+      const content = result.outputFiles.find((item) => item.path === file)?.text;
+      fse.writeFileSync(file, content);
+
+      if (OUTPUT_HTML) {
+        expect(1).toBe(1);
+      } else {
+        if (file.endsWith('.js') || file.endsWith('.css')) {
+          expect(removeComments(content)).toMatchSnapshot();
+        }
+      }
+    });
+  });
+});

src/index.ts

@@ -19,19 +19,19 @@ type StyleLoaderOptions = {
   filter?: RegExp;
   namespace?: string[];
   cssModules?: CSSModulesConfig;
-  browserslist?: Parameters<typeof browserslist>;
+  browsers?: string;
 };
 
 const defaultOptions: StyleLoaderOptions = {
   filter: /\.(css|scss|sass|less)(\?.*)?$/,
   cssModules: { pattern: '[local]__[hash]' },
-  browserslist: ['> 0.25%, not dead'],
+  browsers: '> 0.25%, not dead',
 };
 
 export const styleLoader = (options: StyleLoaderOptions = {}): Plugin => {
   const opts = deepmerge(defaultOptions, options);
 
-  const targets = generateTargets(...opts.browserslist);
+  const targets = generateTargets(opts.browsers);
 
   const allNamespaces = Array.from(new Set(['file'].concat(opts.namespace || [])));
 

src/utils.ts

@@ -66,6 +66,6 @@ export async function resolvePath(args: OnResolveArgs, build: PluginBuild) {
   return { path: absolutePath, query };
 }
 
-export const generateTargets = (...args: Parameters<typeof browserslist>) => {
-  return browserslistToTargets(browserslist(...args));
+export const generateTargets = (queries: string) => {
+  return browserslistToTargets(browserslist(queries));
 };