@empjs/plugin-lightningcss 1.0.3 → 1.0.5

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import empLightningcssPlugin from './plugin.js';
 import postcss from './postcss-config.js';
+import { composeVisitors } from 'lightningcss';
 export default empLightningcssPlugin;
-export { postcss };
+export { postcss, composeVisitors };

package/dist/index.js

@@ -1,4 +1,6 @@
 import empLightningcssPlugin from './plugin.js';
 import postcss from './postcss-config.js';
+import { composeVisitors } from 'lightningcss';
+//
 export default empLightningcssPlugin;
-export { postcss };
+export { postcss, composeVisitors };

package/dist/loader.js

@@ -11,6 +11,7 @@ async function LightningCSSLoader(source, prevMap) {
         return;
     }
     const transform = implementation?.transform ?? _transform;
+    // console.log(this.resourcePath, source)
     try {
         const { code, map } = transform({
             filename: this.resourcePath,

package/dist/plugin.js

@@ -17,6 +17,13 @@ const uselightningcssLoader = async (store, o) => {
             .loader(importResolve('./loader.cjs', import.meta.url))
             .options(loaderOptions);
         useLightningcss.before('postcss');
+        if (!['sass', 'less'].includes(ruleName)) {
+            useLightningcss.before('postcss');
+        }
+        else {
+            useLightningcss.before(`${ruleName}Loader`);
+        }
+        // 删除后引起重排
         rule.uses.delete('postcss');
     }
 };

package/dist/postcss-config.d.ts

@@ -1,8 +1,6 @@
 import type { Visitor } from 'lightningcss';
-import type { vwOptions } from './px-to-viewport.js';
-type PxToRemType = {
-    rootValue?: number;
-};
+import type { vwOptions, PxToRemOptions } from './px-to-base.js';
+import { CustomAtRules } from 'lightningcss';
 /**
  * // 插件编写 https://github.com/parcel-bundler/lightningcss/blob/master/node/test/visitor.test.mjs
  */
@@ -10,73 +8,79 @@ declare class PostcssConfig {
     /**
      * https://github.com/cuth/postcss-pxtorem
      */
-    px_to_rem(op?: PxToRemType): Visitor<any>;
+    px_to_rem(op: PxToRemOptions): {
+        Selector(selectors: import("lightningcss").Selector): void;
+        Length(length: import("lightningcss").LengthValue): {
+            unit: "rem";
+            value: number;
+        } | undefined;
+    };
     /**
      * https://github.com/evrone/postcss-px-to-viewport
      */
-    px_to_viewport(op: vwOptions): Visitor<any>;
+    px_to_viewport(op: vwOptions): Visitor<CustomAtRules>;
     /**
      * https://www.npmjs.com/package/postcss-apply
      */
-    apply(defined: Map<any, any>): Visitor<any>;
+    apply(defined: Map<any, any>): Visitor<CustomAtRules>;
     /**
      * https://www.npmjs.com/package/postcss-prefix-selector
      */
-    selector_prefix(): Visitor<any>;
+    selector_prefix(): Visitor<CustomAtRules>;
     /**
      * https://www.npmjs.com/package/postcss-simple-vars
      */
-    static_vars(declared: Map<any, any>): Visitor<any>;
+    static_vars(declared: Map<any, any>): Visitor<CustomAtRules>;
     /**
      * https://www.npmjs.com/package/postcss-url
      */
-    url(hostUrl: string): Visitor<any>;
+    url(hostUrl: string): Visitor<CustomAtRules>;
     /**
      * https://www.npmjs.com/package/postcss-env-function
      */
     specific_environment_variables(tokens: {
         [k: string]: any;
-    }): Visitor<any>;
+    }): Visitor<CustomAtRules>;
     /**
      * https://www.npmjs.com/package/postcss-env-function
      */
-    env_function(tokens: any): Visitor<any>;
+    env_function(tokens: any): Visitor<CustomAtRules>;
     /**
      * https://www.npmjs.com/package/@csstools/postcss-design-tokens
      */
-    design_tokens(tokens: any): Visitor<any>;
+    design_tokens(tokens: any): Visitor<CustomAtRules>;
     /**
      * https://github.com/csstools/custom-units
      */
-    custom_units(): Visitor<any>;
+    custom_units(): Visitor<CustomAtRules>;
     /**
      * https://www.npmjs.com/package/postcss-property-lookup
      */
-    property_lookup(): Visitor<any>;
+    property_lookup(): Visitor<CustomAtRules>;
     /**
      * https://www.npmjs.com/package/postcss-focus-visible
      */
-    focus_visible(): Visitor<any>;
+    focus_visible(): Visitor<CustomAtRules>;
     /**
      * https://github.com/postcss/postcss-dark-theme-class
      */
-    dark_theme_class(): Visitor<any>;
+    dark_theme_class(): Visitor<CustomAtRules>;
     /**
      * https://github.com/postcss/postcss-100vh-fix
      */
-    fix_100vh(): Visitor<any>;
+    fix_100vh(): Visitor<CustomAtRules>;
     /**
      * https://github.com/MohammadYounes/rtlcss
      */
-    logical_transforms(): Visitor<any>;
+    logical_transforms(): Visitor<CustomAtRules>;
     /**
      * https://github.com/twbs/mq4-hover-shim
      */
-    hover_media_query(): Visitor<any>;
+    hover_media_query(): Visitor<CustomAtRules>;
     /**
      * https://github.com/yunusga/postcss-momentum-scrolling
      */
-    momentum_scrolling(visitOverflow: any): Visitor<any>;
+    momentum_scrolling(visitOverflow: any): Visitor<CustomAtRules>;
     /**
      * https://github.com/postcss/postcss-size
      */

package/dist/postcss-config.js

@@ -1,4 +1,4 @@
-import { createPxToVwVisitor } from './px-to-viewport.js';
+import { createPxToVwVisitor, createPxToRemVisitor } from './px-to-base.js';
 import { composeVisitors } from 'lightningcss';
 /**
  * // 插件编写 https://github.com/parcel-bundler/lightningcss/blob/master/node/test/visitor.test.mjs
@@ -7,29 +7,13 @@ class PostcssConfig {
     /**
      * https://github.com/cuth/postcss-pxtorem
      */
-    px_to_rem(op = {}) {
-        const rv = op.rootValue ? op.rootValue : 16;
-        return {
-            Length(length) {
-                if (length.unit === 'px') {
-                    return {
-                        unit: 'rem',
-                        value: length.value / rv,
-                    };
-                }
-            },
-        };
+    px_to_rem(op) {
+        return createPxToRemVisitor(op);
     }
     /**
      * https://github.com/evrone/postcss-px-to-viewport
      */
     px_to_viewport(op) {
-        op = op
-            ? op
-            : {
-                designWidth: 320,
-                minPixelValue: 1,
-            };
         return composeVisitors([createPxToVwVisitor(op)]);
     }
     /**

package/dist/px-to-base.d.ts

@@ -0,0 +1,36 @@
+interface Options {
+    designWidth: number;
+    minPixelValue: number;
+    excludeSelectors: {
+        type: string;
+        name: RegExp | string;
+    }[];
+}
+export declare function createExcludeFilter(excludes: Options['excludeSelectors']): (testItem: {
+    type: string;
+    name?: string;
+}) => boolean;
+export type vwOptions = Partial<Options>;
+export declare function createPxToVwVisitor(userOptions?: vwOptions): {
+    Selector(selectors: import("lightningcss").Selector): void;
+    Length(length: import("lightningcss").LengthValue): {
+        unit: "vw";
+        value: number;
+    } | undefined;
+};
+export type PxToRemOptions = {
+    rootValue?: number;
+    minPixelValue?: number;
+    excludeSelectors?: {
+        type: string;
+        name: RegExp | string;
+    }[];
+};
+export declare function createPxToRemVisitor(options?: PxToRemOptions): {
+    Selector(selectors: import("lightningcss").Selector): void;
+    Length(length: import("lightningcss").LengthValue): {
+        unit: "rem";
+        value: number;
+    } | undefined;
+};
+export {};

package/dist/{px-to-viewport.js → px-to-base.js}

@@ -3,7 +3,7 @@ const baseOptions = {
     minPixelValue: 1,
     excludeSelectors: [],
 };
-function createExcludeFilter(excludes) {
+export function createExcludeFilter(excludes) {
     const isExclude = (testItem) => {
         if (!testItem.name) {
             return false;
@@ -47,3 +47,28 @@ export function createPxToVwVisitor(userOptions = {}) {
         },
     };
 }
+export function createPxToRemVisitor(options = {}) {
+    const op = Object.assign({ rootValue: 16, excludeSelectors: [], minPixelValue: 1 }, options);
+    const isExclude = createExcludeFilter(op.excludeSelectors);
+    let skipCurrentSelector = false;
+    return {
+        Selector(selectors) {
+            skipCurrentSelector = false;
+            for (const selector of selectors) {
+                if (isExclude(selector)) {
+                    skipCurrentSelector = true;
+                }
+            }
+        },
+        Length(length) {
+            if (length.unit === 'px' && !skipCurrentSelector) {
+                if (length.value > op.minPixelValue) {
+                    return {
+                        unit: 'rem',
+                        value: length.value / op.rootValue,
+                    };
+                }
+            }
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@empjs/plugin-lightningcss",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "emp v3 lightningcss",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",

package/dist/px-to-viewport.d.ts

@@ -1,17 +0,0 @@
-interface Options {
-    designWidth: number;
-    minPixelValue: number;
-    excludeSelectors: {
-        type: string;
-        name: RegExp | string;
-    }[];
-}
-export type vwOptions = Partial<Options>;
-export declare function createPxToVwVisitor(userOptions?: vwOptions): {
-    Selector(selectors: import("lightningcss").Selector): void;
-    Length(length: import("lightningcss").LengthValue): {
-        unit: "vw";
-        value: number;
-    } | undefined;
-};
-export {};