proteum 2.1.9-5 → 2.1.9-6

package/cli/compiler/client/index.ts

@@ -83,6 +83,26 @@ const isCoreSourceModule = (module: Module) => {
 
     return modulePath.startsWith(frameworkSourceRoot + '/') || modulePath.includes('/node_modules/proteum/');
 };
+const resolveLightningCssTargets = (app: App) => {
+    const browserslistConfig = app.packageJson.browserslist;
+
+    if (typeof browserslistConfig === 'string') return browserslistConfig;
+
+    if (Array.isArray(browserslistConfig) && browserslistConfig.every((target) => typeof target === 'string'))
+        return browserslistConfig;
+
+    if (!browserslistConfig || typeof browserslistConfig !== 'object') return undefined;
+
+    for (const env of ['production', 'defaults']) {
+        const targets = browserslistConfig[env];
+
+        if (typeof targets === 'string') return targets;
+
+        if (Array.isArray(targets) && targets.every((target) => typeof target === 'string')) return targets;
+    }
+
+    return undefined;
+};
 
 /*----------------------------------
 - CONFIG
@@ -100,6 +120,7 @@ export default function createCompiler(
         (rootPath, index, list) => list.indexOf(rootPath) === index,
     );
     const transpileModuleDirectories = app.transpileModuleDirectories;
+    const lightningCssTargets = resolveLightningCssTargets(app);
     const hmrClientEntry = path.join(frameworkSourceRoot, 'client', 'dev', 'hmr.ts');
 
     const commonConfig = createCommonConfig(app, 'client', mode, outputTarget);
@@ -320,7 +341,9 @@ export default function createCompiler(
                       removeAvailableModules: true,
                       minimizer: [
                           new rspack.SwcJsMinimizerRspackPlugin({}),
-                          new rspack.LightningCssMinimizerRspackPlugin({}),
+                          new rspack.LightningCssMinimizerRspackPlugin({
+                              ...(lightningCssTargets ? { minimizerOptions: { targets: lightningCssTargets } } : {}),
+                          }),
                       ],
                       nodeEnv: 'production',
                       sideEffects: true,

package/cli/compiler/common/files/style.ts

@@ -2,7 +2,7 @@ import path from 'path';
 
 // Plugons
 import { rspack } from '@rspack/core';
-import type { Root } from 'postcss';
+import type { Declaration, Root } from 'postcss';
 
 import type { App } from '../../../app';
 
@@ -11,6 +11,17 @@ const normalizePath = (value: string) => path.resolve(value).replace(/\\/g, '/')
 const isPathInsideDirectory = (filepath: string, directory: string) =>
     filepath === directory || filepath.startsWith(directory + '/');
 
+const VENDOR_PROPERTY_PREFIXES = ['-webkit-', '-moz-', '-ms-', '-o-'] as const;
+const getVendorlessProperty = (property: string) => {
+    for (const prefix of VENDOR_PROPERTY_PREFIXES) {
+        if (property.startsWith(prefix)) return property.slice(prefix.length);
+    }
+
+    return property;
+};
+const isVendorPrefixedProperty = (property: string) =>
+    VENDOR_PROPERTY_PREFIXES.some((prefix) => property.startsWith(prefix));
+
 const createTailwindTranspileSourcesPlugin = (app: App) => {
     const appRoot = normalizePath(app.paths.root);
     const transpileSourceDirectories = Array.from(
@@ -50,9 +61,42 @@ const createTailwindTranspileSourcesPlugin = (app: App) => {
     };
 };
 
+const createVendorPropertyOrderPlugin = () => {
+    return {
+        postcssPlugin: 'proteum-normalize-vendor-property-order',
+        Once(root: Root) {
+            root.walkRules((rule) => {
+                const declarations = (rule.nodes || []).filter((node): node is Declaration => node.type === 'decl');
+
+                for (const declaration of declarations) {
+                    if (isVendorPrefixedProperty(declaration.prop)) continue;
+
+                    const property = declaration.prop;
+                    let nextNode = declaration.next();
+
+                    // LightningCSS canonicalizes property aliases based on source order.
+                    // Keep prefixed declarations before the standard property so target-aware
+                    // minification preserves the right output for both old and modern browsers.
+                    while (nextNode && nextNode.type === 'decl' && getVendorlessProperty(nextNode.prop) === property) {
+                        const currentNextNode = nextNode;
+                        nextNode = currentNextNode.next();
+
+                        if (!isVendorPrefixedProperty(currentNextNode.prop)) continue;
+
+                        const reorderedDeclaration = currentNextNode.clone();
+                        currentNextNode.remove();
+                        rule.insertBefore(declaration, reorderedDeclaration);
+                    }
+                }
+            });
+        },
+    };
+};
+
 module.exports = (app: App, dev: boolean, _client: boolean) => {
     const enableSourceMaps = dev;
     const tailwindTranspileSourcesPlugin = createTailwindTranspileSourcesPlugin(app);
+    const vendorPropertyOrderPlugin = createVendorPropertyOrderPlugin();
 
     return [
         // Keep CSS delivery identical in dev and prod: extract files so SSR links stylesheets in both modes.
@@ -86,9 +130,10 @@ module.exports = (app: App, dev: boolean, _client: boolean) => {
                             // process is launched from another working directory (e.g. Docker).
                             base: app.paths.root,
 
-                            // Avoid double-minifying: Webpack already runs CssMinimizerPlugin in prod.
+                            // Avoid double-minifying: Rspack already runs LightningCssMinimizerRspackPlugin in prod.
                             optimize: false,
                         }),
+                        vendorPropertyOrderPlugin,
                         ///* Tailwind V3 */require('tailwindcss'),
                         require('autoprefixer'),
                     ],

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "proteum",
 	"description": "LLM-first Opinionated Typescript Framework for web applications.",
-	"version": "2.1.9-5",
+	"version": "2.1.9-6",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/proteum.git",
 	"license": "MIT",