@empjs/plugin-lightningcss 1.0.0

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/loader.cjs

@@ -0,0 +1,57 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/loader.ts
+var loader_exports = {};
+__export(loader_exports, {
+  default: () => loader_default
+});
+module.exports = __toCommonJS(loader_exports);
+var import_lightningcss = require("lightningcss");
+var import_node_buffer = require("node:buffer");
+var LOADER_NAME = "lightningcss-loader";
+async function LightningCSSLoader(source, prevMap) {
+  const done = this.async();
+  const options = this.getOptions();
+  const { implementation, targets, ...opts } = options;
+  if (implementation && typeof implementation.transform !== "function") {
+    done(
+      new TypeError(
+        `[${LOADER_NAME}]: options.implementation.transform must be an 'lightningcss' transform function. Received ${typeof implementation.transform}`
+      )
+    );
+    return;
+  }
+  const transform = implementation?.transform ?? import_lightningcss.transform;
+  try {
+    const { code, map } = transform({
+      filename: this.resourcePath,
+      code: import_node_buffer.Buffer.from(source),
+      sourceMap: this.sourceMap,
+      targets,
+      inputSourceMap: this.sourceMap && prevMap ? JSON.stringify(prevMap) : void 0,
+      ...opts
+    });
+    const codeAsString = code.toString();
+    done(null, codeAsString, map && JSON.parse(map.toString()));
+  } catch (error) {
+    done(error);
+  }
+}
+var loader_default = LightningCSSLoader;

package/dist/loader.d.ts

@@ -0,0 +1,9 @@
+import type { LoaderContext } from '@rspack/core';
+import type { CustomAtRules, TransformOptions } from 'lightningcss';
+export type LightningCSSTransformOptions = Omit<TransformOptions<CustomAtRules>, 'filename' | 'code' | 'inputSourceMap'>;
+type Implementation = unknown;
+export type LightningCSSLoaderOptions = LightningCSSTransformOptions & {
+    implementation?: Implementation;
+};
+declare function LightningCSSLoader(this: LoaderContext<LightningCSSLoaderOptions>, source: string, prevMap?: Record<string, any>): Promise<void>;
+export default LightningCSSLoader;

package/dist/loader.js

@@ -0,0 +1,30 @@
+import { transform as _transform } from 'lightningcss';
+import { Buffer } from 'node:buffer';
+const LOADER_NAME = 'lightningcss-loader';
+async function LightningCSSLoader(source, prevMap) {
+    const done = this.async();
+    const options = this.getOptions();
+    // console.log('options', options)
+    const { implementation, targets, ...opts } = options;
+    if (implementation && typeof implementation.transform !== 'function') {
+        done(new TypeError(`[${LOADER_NAME}]: options.implementation.transform must be an 'lightningcss' transform function. Received ${typeof implementation.transform}`));
+        return;
+    }
+    const transform = implementation?.transform ?? _transform;
+    try {
+        const { code, map } = transform({
+            filename: this.resourcePath,
+            code: Buffer.from(source),
+            sourceMap: this.sourceMap,
+            targets,
+            inputSourceMap: this.sourceMap && prevMap ? JSON.stringify(prevMap) : undefined,
+            ...opts,
+        });
+        const codeAsString = code.toString();
+        done(null, codeAsString, map && JSON.parse(map.toString()));
+    }
+    catch (error) {
+        done(error);
+    }
+}
+export default LightningCSSLoader;

package/dist/minimizer.d.ts

@@ -0,0 +1,10 @@
+import type { Compiler } from '@rspack/core';
+type LightningCSSMinifyPluginOptions = any;
+export declare class LightningCSSMinifyPlugin {
+    private readonly options;
+    private readonly transform;
+    constructor(opts?: LightningCSSMinifyPluginOptions);
+    apply(compiler: Compiler): void;
+    private transformAssets;
+}
+export default LightningCSSMinifyPlugin;

package/dist/minimizer.js

@@ -0,0 +1,62 @@
+import { transform as _transform } from 'lightningcss';
+import { Buffer } from 'node:buffer';
+const PLUGIN_NAME = 'lightningcss-minify-plugin';
+//
+const CSS_REGEX = /\.css(?:\?.*)?$/i;
+export class LightningCSSMinifyPlugin {
+    options;
+    transform;
+    constructor(opts = {}) {
+        const { implementation } = opts;
+        if (implementation && typeof implementation.transform !== 'function') {
+            throw new TypeError(`[${PLUGIN_NAME}]: implementation.transform must be an 'lightningcss' transform function. Received ${typeof implementation.transform}`);
+        }
+        this.transform = implementation?.transform ?? _transform;
+        this.options = opts;
+    }
+    apply(compiler) {
+        compiler.hooks.compilation.tap(PLUGIN_NAME, compilation => {
+            compilation.hooks.processAssets.tapPromise({
+                name: PLUGIN_NAME,
+                stage: compilation?.PROCESS_ASSETS_STAGE_OPTIMIZE_SIZE,
+            }, async () => await this.transformAssets(compilation));
+            compilation.hooks.statsPrinter.tap(PLUGIN_NAME, statsPrinter => {
+                statsPrinter.hooks.print
+                    .for('asset.info.minimized')
+                    .tap(PLUGIN_NAME, (minimized, { green, formatFlag }) => minimized && green && formatFlag ? green(formatFlag('minimized')) : '');
+            });
+        });
+    }
+    async transformAssets(compilation) {
+        const { options: { devtool }, webpack: { sources: { SourceMapSource, RawSource }, }, } = compilation.compiler;
+        const sourcemap = this.options.sourceMap === undefined
+            ? (devtool && devtool.includes('source-map'))
+            : this.options.sourceMap;
+        const { targets: userTargets, ...transformOptions } = this.options;
+        const assets = compilation.getAssets().filter(asset => 
+        // Filter out already minimized
+        !asset.info.minimized &&
+            // Filter out by file type
+            CSS_REGEX.test(asset.name));
+        await Promise.all(assets.map(async (asset) => {
+            const { source, map } = asset.source.sourceAndMap();
+            const sourceAsString = source.toString();
+            const code = typeof source === 'string' ? Buffer.from(source) : source;
+            const result = this.transform({
+                filename: asset.name,
+                code,
+                minify: true,
+                sourceMap: sourcemap,
+                ...transformOptions,
+            });
+            const codeString = result.code.toString();
+            compilation.updateAsset(asset.name, sourcemap
+                ? new SourceMapSource(codeString, asset.name, JSON.parse(result.map.toString()), sourceAsString, map, true)
+                : new RawSource(codeString), {
+                ...asset.info,
+                minimized: true,
+            });
+        }));
+    }
+}
+export default LightningCSSMinifyPlugin;

package/dist/plugin.d.ts

@@ -0,0 +1,11 @@
+import type { GlobalStore } from '@empjs/cli';
+import type { TransformAttributeOptions } from 'lightningcss';
+export type PluginLightningCssType = {
+    transform?: boolean | TransformAttributeOptions;
+    minify?: boolean | unknown;
+};
+declare const empLightningcssPlugin: (o?: PluginLightningCssType) => {
+    name: string;
+    rsConfig(store: GlobalStore): Promise<void>;
+};
+export default empLightningcssPlugin;

package/dist/plugin.js

@@ -0,0 +1,40 @@
+import { browserslistToTargets } from 'lightningcss';
+import browserslist from 'browserslist';
+const uselightningcssLoader = async (store, o) => {
+    if (o?.transform === false)
+        return;
+    const { importResolve, chain } = store;
+    const ruleMap = ['sass', 'less', 'css'];
+    //
+    const transform = o?.transform || {};
+    const targets = browserslistToTargets(browserslist('>= 0.25%'));
+    //
+    const loaderOptions = { ...transform, targets };
+    for (const ruleName of ruleMap) {
+        const rule = chain.module.rule(ruleName);
+        const useLightningcss = rule
+            .use('lightningcss')
+            .loader(importResolve('./loader.cjs', import.meta.url))
+            .options(loaderOptions);
+        useLightningcss.before('postcss');
+        rule.uses.delete('postcss');
+    }
+};
+const uselightningcssMinify = async (store, o) => {
+    if (o?.minify === false)
+        return;
+    const { chain } = store;
+    const minify = o?.minify || {};
+    const { LightningCSSMinifyPlugin } = await import('./minimizer.js');
+    chain.optimization.minimizer('minCss').use(LightningCSSMinifyPlugin, [minify]);
+};
+//
+const empLightningcssPlugin = (o) => {
+    return {
+        name: '@empjs/plugin-lightningcss',
+        async rsConfig(store) {
+            await Promise.all([uselightningcssLoader(store, o), uselightningcssMinify(store, o)]);
+        },
+    };
+};
+export default empLightningcssPlugin;

package/dist/postcss-config.d.ts

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

package/dist/postcss-config.js

@@ -0,0 +1,457 @@
+import { createPxToVwVisitor } from './px-to-viewport.js';
+import { composeVisitors } from 'lightningcss';
+/**
+ * // 插件编写 https://github.com/parcel-bundler/lightningcss/blob/master/node/test/visitor.test.mjs
+ */
+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,
+                    };
+                }
+            },
+        };
+    }
+    /**
+     * https://github.com/evrone/postcss-px-to-viewport
+     */
+    px_to_viewport(op) {
+        op = op
+            ? op
+            : {
+                designWidth: 320,
+                minPixelValue: 1,
+            };
+        return composeVisitors([createPxToVwVisitor(op)]);
+    }
+    /**
+     * https://www.npmjs.com/package/postcss-apply
+     */
+    apply(defined) {
+        defined = defined ? defined : new Map();
+        return {
+            Rule: {
+                style(rule) {
+                    for (const selector of rule.value.selectors) {
+                        if (selector.length === 1 && selector[0].type === 'type' && selector[0].name.startsWith('--')) {
+                            defined.set(selector[0].name, rule.value.declarations);
+                            return { type: 'ignored', value: null };
+                        }
+                    }
+                    rule.value.rules = rule.value.rules.filter(child => {
+                        if (child.type === 'unknown' && child.value.name === 'apply') {
+                            for (const token of child.value.prelude) {
+                                if (token.type === 'dashed-ident' && defined.has(token.value)) {
+                                    const r = defined.get(token.value);
+                                    const decls = rule.value.declarations;
+                                    decls.declarations.push(...r.declarations);
+                                    decls.importantDeclarations.push(...r.importantDeclarations);
+                                }
+                            }
+                            return false;
+                        }
+                        return true;
+                    });
+                    return rule;
+                },
+            },
+        };
+    }
+    /**
+     * https://www.npmjs.com/package/postcss-prefix-selector
+     */
+    selector_prefix() {
+        return {
+            Selector(selector) {
+                return [{ type: 'class', name: 'prefix' }, { type: 'combinator', value: 'descendant' }, ...selector];
+            },
+        };
+    }
+    /**
+     * https://www.npmjs.com/package/postcss-simple-vars
+     */
+    static_vars(declared) {
+        declared = declared ? declared : new Map();
+        return {
+            Rule: {
+                unknown(rule) {
+                    declared.set(rule.name, rule.prelude);
+                    return [];
+                },
+            },
+            Token: {
+                'at-keyword'(token) {
+                    if (declared.has(token.value)) {
+                        return declared.get(token.value);
+                    }
+                },
+            },
+        };
+    }
+    /**
+     * https://www.npmjs.com/package/postcss-url
+     */
+    url(hostUrl) {
+        return {
+            Url(url) {
+                url.url = hostUrl + url.url;
+                return url;
+            },
+        };
+    }
+    /**
+     * https://www.npmjs.com/package/postcss-env-function
+     */
+    specific_environment_variables(tokens) {
+        const ev = {};
+        for (const key in tokens) {
+            ev[key] = () => tokens[key];
+        }
+        return {
+            EnvironmentVariable: ev,
+        };
+    }
+    /**
+     * https://www.npmjs.com/package/postcss-env-function
+     */
+    env_function(tokens) {
+        return {
+            EnvironmentVariable(env) {
+                if (env.name.type === 'custom') {
+                    return tokens[env.name.ident];
+                }
+            },
+        };
+    }
+    /**
+     * https://www.npmjs.com/package/@csstools/postcss-design-tokens
+     */
+    design_tokens(tokens) {
+        return {
+            Function: {
+                'design-token'(fn) {
+                    if (fn.arguments.length === 1 &&
+                        fn.arguments[0].type === 'token' &&
+                        fn.arguments[0].value.type === 'string') {
+                        return tokens[fn.arguments[0].value.value];
+                    }
+                },
+            },
+        };
+    }
+    /**
+     * https://github.com/csstools/custom-units
+     */
+    custom_units() {
+        return {
+            Token: {
+                dimension(token) {
+                    if (token.unit.startsWith('--')) {
+                        return {
+                            type: 'function',
+                            value: {
+                                name: 'calc',
+                                arguments: [
+                                    {
+                                        type: 'token',
+                                        value: {
+                                            type: 'number',
+                                            value: token.value,
+                                        },
+                                    },
+                                    {
+                                        type: 'token',
+                                        value: {
+                                            type: 'delim',
+                                            value: '*',
+                                        },
+                                    },
+                                    {
+                                        type: 'var',
+                                        value: {
+                                            name: {
+                                                ident: token.unit,
+                                            },
+                                        },
+                                    },
+                                ],
+                            },
+                        };
+                    }
+                },
+            },
+        };
+    }
+    /**
+     * https://www.npmjs.com/package/postcss-property-lookup
+     */
+    property_lookup() {
+        return {
+            Rule: {
+                style(rule) {
+                    const valuesByProperty = new Map();
+                    for (const decl of rule.value.declarations.declarations) {
+                        let name = decl.property;
+                        if (decl.property === 'unparsed') {
+                            name = decl.value.propertyId.property;
+                        }
+                        valuesByProperty.set(name, decl);
+                    }
+                    rule.value.declarations.declarations = rule.value.declarations.declarations.map((decl) => {
+                        // Only single value supported. Would need a way to convert parsed values to unparsed tokens otherwise.
+                        if (decl.property === 'unparsed' && decl.value.value.length === 1) {
+                            const token = decl.value.value[0];
+                            if (token.type === 'token' &&
+                                token.value.type === 'at-keyword' &&
+                                valuesByProperty.has(token.value.value)) {
+                                const v = valuesByProperty.get(token.value.value);
+                                return {
+                                    /** @type any */
+                                    property: decl.value.propertyId.property,
+                                    value: v.value,
+                                };
+                            }
+                        }
+                        return decl;
+                    });
+                    return rule;
+                },
+            },
+        };
+    }
+    /**
+     * https://www.npmjs.com/package/postcss-focus-visible
+     */
+    focus_visible() {
+        return {
+            Rule: {
+                style(rule) {
+                    let clone = null;
+                    for (const selector of rule.value.selectors) {
+                        for (const [i, component] of selector.entries()) {
+                            if (component.type === 'pseudo-class' && component.kind === 'focus-visible') {
+                                if (clone == null) {
+                                    clone = [...rule.value.selectors.map(s => [...s])];
+                                }
+                                selector[i] = { type: 'class', name: 'focus-visible' };
+                            }
+                        }
+                    }
+                    if (clone) {
+                        return [rule, { type: 'style', value: { ...rule.value, selectors: clone } }];
+                    }
+                },
+            },
+        };
+    }
+    /**
+     * https://github.com/postcss/postcss-dark-theme-class
+     */
+    dark_theme_class() {
+        return {
+            Rule: {
+                media(rule) {
+                    const q = rule.value.query.mediaQueries[0];
+                    if (q.condition?.type === 'feature' &&
+                        q.condition.value.type === 'plain' &&
+                        q.condition.value.name === 'prefers-color-scheme' &&
+                        q.condition.value.value.value === 'dark') {
+                        const clonedRules = [rule];
+                        for (const r of rule.value.rules) {
+                            if (r.type === 'style') {
+                                const clonedSelectors = [];
+                                for (const selector of r.value.selectors) {
+                                    clonedSelectors.push([
+                                        { type: 'type', name: 'html' },
+                                        { type: 'attribute', name: 'theme', operation: { operator: 'equal', value: 'dark' } },
+                                        { type: 'combinator', value: 'descendant' },
+                                        ...selector,
+                                    ]);
+                                    selector.unshift({ type: 'type', name: 'html' }, {
+                                        type: 'pseudo-class',
+                                        kind: 'not',
+                                        selectors: [[{ type: 'attribute', name: 'theme', operation: { operator: 'equal', value: 'light' } }]],
+                                    }, { type: 'combinator', value: 'descendant' });
+                                }
+                                clonedRules.push({ type: 'style', value: { ...r.value, selectors: clonedSelectors } });
+                            }
+                        }
+                        return clonedRules;
+                    }
+                },
+            },
+        };
+    }
+    /**
+     * https://github.com/postcss/postcss-100vh-fix
+     */
+    fix_100vh() {
+        return {
+            Rule: {
+                style(style) {
+                    let cloned;
+                    for (const property of style.value.declarations.declarations) {
+                        if (property.property === 'height' &&
+                            property.value.type === 'length-percentage' &&
+                            property.value.value.type === 'dimension' &&
+                            property.value.value.value.unit === 'vh' &&
+                            property.value.value.value.value === 100) {
+                            if (!cloned) {
+                                cloned = structuredClone(style);
+                                cloned.value.declarations.declarations = [];
+                            }
+                            cloned.value.declarations.declarations.push({
+                                ...property,
+                                value: {
+                                    type: 'stretch',
+                                    vendorPrefix: ['webkit'],
+                                },
+                            });
+                        }
+                    }
+                    if (cloned) {
+                        return [
+                            style,
+                            {
+                                type: 'supports',
+                                value: {
+                                    condition: {
+                                        type: 'declaration',
+                                        propertyId: {
+                                            property: '-webkit-touch-callout',
+                                        },
+                                        value: 'none',
+                                    },
+                                    loc: style.value.loc,
+                                    rules: [cloned],
+                                },
+                            },
+                        ];
+                    }
+                },
+            },
+        };
+    }
+    /**
+     * https://github.com/MohammadYounes/rtlcss
+     */
+    logical_transforms() {
+        return {
+            Rule: {
+                style(style) {
+                    let cloned;
+                    for (const property of style.value.declarations.declarations) {
+                        if (property.property === 'transform') {
+                            const clonedTransforms = property.value.map(transform => {
+                                if (transform.type !== 'translateX') {
+                                    return transform;
+                                }
+                                if (!cloned) {
+                                    cloned = structuredClone(style);
+                                    cloned.value.declarations.declarations = [];
+                                }
+                                let value;
+                                switch (transform.value.type) {
+                                    case 'dimension':
+                                        value = {
+                                            type: 'dimension',
+                                            value: { unit: transform.value.value.unit, value: -transform.value.value.value },
+                                        };
+                                        break;
+                                    case 'percentage':
+                                        value = { type: 'percentage', value: -transform.value.value };
+                                        break;
+                                    case 'calc':
+                                        value = { type: 'calc', value: { type: 'product', value: [-1, transform.value.value] } };
+                                        break;
+                                }
+                                return {
+                                    type: 'translateX',
+                                    value,
+                                };
+                            });
+                            if (cloned) {
+                                cloned.value.selectors.at(-1).push({ type: 'pseudo-class', kind: 'dir', direction: 'rtl' });
+                                cloned.value.declarations.declarations.push({
+                                    ...property,
+                                    value: clonedTransforms,
+                                });
+                            }
+                        }
+                    }
+                    if (cloned) {
+                        return [style, cloned];
+                    }
+                },
+            },
+        };
+    }
+    /**
+     * https://github.com/twbs/mq4-hover-shim
+     */
+    hover_media_query() {
+        return {
+            Rule: {
+                media(media) {
+                    const mediaQueries = media.value.query.mediaQueries;
+                    if (mediaQueries.length === 1 &&
+                        mediaQueries[0].condition &&
+                        mediaQueries[0].condition.type === 'feature' &&
+                        mediaQueries[0].condition.value.type === 'boolean' &&
+                        mediaQueries[0].condition.value.name === 'hover') {
+                        for (const rule of media.value.rules) {
+                            if (rule.type === 'style') {
+                                for (const selector of rule.value.selectors) {
+                                    selector.unshift({ type: 'class', name: 'hoverable' }, { type: 'combinator', value: 'descendant' });
+                                }
+                            }
+                        }
+                        return media.value.rules;
+                    }
+                },
+            },
+        };
+    }
+    /**
+     * https://github.com/yunusga/postcss-momentum-scrolling
+     */
+    momentum_scrolling(visitOverflow) {
+        return {
+            Declaration: {
+                overflow: visitOverflow,
+                'overflow-x': visitOverflow,
+                'overflow-y': visitOverflow,
+            },
+        };
+    }
+    /**
+     * https://github.com/postcss/postcss-size
+     */
+    size() {
+        return {
+            Declaration: {
+                custom: {
+                    size(property) {
+                        if (property.value[0].type === 'length') {
+                            /** @type {import('../ast').Size} */
+                            const value = { type: 'length-percentage', value: { type: 'dimension', value: property.value[0].value } };
+                            return [
+                                { property: 'width', value },
+                                { property: 'height', value },
+                            ];
+                        }
+                    },
+                },
+            },
+        };
+    }
+}
+export default new PostcssConfig();

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

@@ -0,0 +1,17 @@
+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 {};

package/dist/px-to-viewport.js

@@ -0,0 +1,49 @@
+const baseOptions = {
+    designWidth: 320,
+    minPixelValue: 1,
+    excludeSelectors: [],
+};
+function createExcludeFilter(excludes) {
+    const isExclude = (testItem) => {
+        if (!testItem.name) {
+            return false;
+        }
+        for (const rule of excludes) {
+            if (testItem.type === rule.type) {
+                if (typeof rule.name === 'string' && rule.name === testItem.name) {
+                    return true;
+                }
+                if (typeof rule.name === 'object' && rule.name.test(testItem.name)) {
+                    return true;
+                }
+            }
+        }
+        return false;
+    };
+    return isExclude;
+}
+export function createPxToVwVisitor(userOptions = {}) {
+    const options = Object.assign(baseOptions, userOptions);
+    const isExclude = createExcludeFilter(options.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 > options.minPixelValue) {
+                    return {
+                        unit: 'vw',
+                        value: (length.value / options.designWidth) * 100,
+                    };
+                }
+            }
+        },
+    };
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@empjs/plugin-lightningcss",
+  "version": "1.0.0",
+  "description": "emp v3 lightningcss",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "maintainers": [
+    "xuhongbin",
+    "ckken"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/empjs/emp.git",
+    "directory": "packages/plugin-lightningcss"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "rimraf dist && pnpm run /^dev:.*/",
+    "dev:tsc": "tsc -w",
+    "dev:tsc-alias": "tsc-alias -w",
+    "dev:cjs": "cross-env ENV=dev node esbuild.js",
+    "build": "rimraf dist && pnpm run /^build:.*/",
+    "build:tsc": "tsc && tsc-alias",
+    "build:cjs": "cross-env ENV=prod node esbuild.js"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "browserslist": "^4.23.0",
+    "lightningcss": "^1.24.1"
+  },
+  "devDependencies": {
+    "@empjs/cli": "workspace:*",
+    "@rspack/core": "0.5.8",
+    "cross-env": "^7.0.3",
+    "esbuild": "^0.19.5",
+    "rimraf": "^5.0.5",
+    "tsc-alias": "^1.8.8"
+  }
+}