Skip to content

Commit

Permalink
refactor: using object form of lightningcss feature options (#7311)
Browse files Browse the repository at this point in the history
  • Loading branch information
@JSerFeng
JSerFeng authored Jul 25, 2024
1 parent 6f6978d commit 52dd72e
Show file tree
Hide file tree
Showing 9 changed files with 261 additions and 95 deletions.
6 changes: 6 additions & 0 deletions ...es/rspack-test-tools/tests/configCases/builtin-lightningcss-loader/basic-include/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
import * as styles from './index.module.css'

it("should transform css correct", () => {
expect(styles).toHaveProperty('used');
expect('unused' in styles).toBeFalsy();
});
9 changes: 9 additions & 0 deletions ...k-test-tools/tests/configCases/builtin-lightningcss-loader/basic-include/index.module.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
body {
.used {
color: blue
}

.unused {
color: red
}
}
35 changes: 35 additions & 0 deletions ...k-test-tools/tests/configCases/builtin-lightningcss-loader/basic-include/rspack.config.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
const rspack = require('@rspack/core')
const browserslist = require('browserslist')

/** @type {import("@rspack/core").Configuration} */
module.exports = {
module: {
parser: {
'css/auto': {
namedExports: true
}
},
rules: [
{
test: /\.css$/,
use: [
{
loader: "builtin:lightningcss-loader",
/** @type {import("@rspack/core").LightningcssLoaderOptions} */
options: {
unusedSymbols: ['unused'],
targets: 'ie 10',
include: {
nesting: true
}
}
}
],
type: "css/auto"
}
]
},
experiments: {
css: true
}
};
99 changes: 29 additions & 70 deletions packages/rspack/etc/api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -728,9 +728,6 @@ export type BaseUri = z.infer<typeof baseUri>;
// @public (undocumented)
const baseUri: z.ZodString;

// @public (undocumented)
function browserslistToTargets(browserslist: string[]): Record<string, number>;

// @public (undocumented)
type CacheHookMap = Map<string, SyncBailHook<[any[], StatsFactoryContext], any>[]>;

Expand Down Expand Up @@ -3373,58 +3370,6 @@ export type Falsy = z.infer<typeof falsy>;
// @public (undocumented)
const falsy: z.ZodUnion<[z.ZodLiteral<false>, z.ZodLiteral<0>, z.ZodLiteral<"">, z.ZodNull, z.ZodUndefined]>;

// @public (undocumented)
enum Features {
// (undocumented)
ClampFunction = 512,
// (undocumented)
Color = 64512,
// (undocumented)
ColorFunction = 1024,
// (undocumented)
CustomMediaQueries = 256,
// (undocumented)
DirSelector = 4,
// (undocumented)
DoublePositionGradients = 131072,
// (undocumented)
Empty = 0,
// (undocumented)
FontFamilySystemUi = 65536,
// (undocumented)
HexAlphaColors = 16384,
// (undocumented)
IsSelector = 16,
// (undocumented)
LabColors = 4096,
// (undocumented)
LangSelectorList = 8,
// (undocumented)
LogicalProperties = 524288,
// (undocumented)
MediaIntervalSyntax = 64,
// (undocumented)
MediaQueries = 448,
// (undocumented)
MediaRangeSyntax = 128,
// (undocumented)
Nesting = 1,
// (undocumented)
NotSelectorList = 2,
// (undocumented)
OklabColors = 2048,
// (undocumented)
P3Colors = 8192,
// (undocumented)
Selectors = 31,
// (undocumented)
SpaceSeparatedColorNotation = 32768,
// (undocumented)
TextDecorationThicknessPercent = 32,
// (undocumented)
VendorPrefixes = 262144
}

// @public (undocumented)
const FetchCompileAsyncWasmPlugin: {
new (): {
Expand Down Expand Up @@ -4848,25 +4793,39 @@ export type LibraryType = z.infer<typeof libraryType>;
// @public (undocumented)
const libraryType: z.ZodUnion<[z.ZodEnum<["var", "module", "assign", "assign-properties", "this", "window", "self", "global", "commonjs", "commonjs2", "commonjs-module", "commonjs-static", "amd", "amd-require", "umd", "umd2", "jsonp", "system"]>, z.ZodString]>;

declare namespace lightningcss {
export {
browserslistToTargets,
Features,
Targets,
Drafts,
NonStandard,
PseudoClasses,
LightningcssLoaderOptions as LoaderOptions
}
}
export { lightningcss }
// @public (undocumented)
export type LightningcssFeatureOptions = {
nesting?: boolean;
notSelectorList?: boolean;
dirSelector?: boolean;
langSelectorList?: boolean;
isSelector?: boolean;
textDecorationThicknessPercent?: boolean;
mediaIntervalSyntax?: boolean;
mediaRangeSyntax?: boolean;
customMediaQueries?: boolean;
clampFunction?: boolean;
colorFunction?: boolean;
oklabColors?: boolean;
labColors?: boolean;
p3Colors?: boolean;
hexAlphaColors?: boolean;
spaceSeparatedColorNotation?: boolean;
fontFamilySystemUi?: boolean;
doublePositionGradients?: boolean;
vendorPrefixes?: boolean;
logicalProperties?: boolean;
selectors?: boolean;
mediaQueries?: boolean;
color?: boolean;
};

// @public (undocumented)
export type LightningcssLoaderOptions = {
errorRecovery?: boolean;
targets?: Targets | string[] | string;
include?: Features;
exclude?: Features;
include?: LightningcssFeatureOptions;
exclude?: LightningcssFeatureOptions;
draft?: Drafts;
nonStandard?: NonStandard;
pseudoClasses?: PseudoClasses;
Expand Down Expand Up @@ -8792,7 +8751,7 @@ declare namespace rspackExports {
SwcLoaderTransformConfig,
SwcLoaderTsParserConfig,
LightningcssLoaderOptions,
lightningcss,
LightningcssFeatureOptions,
experiments,
getRawResolve,
getRawLibrary,
Expand Down
111 changes: 109 additions & 2 deletions packages/rspack/src/builtin-loader/lightningcss/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,87 @@ export function browserslistToTargets(
return targets;
}

export function toFeatures(featureOptions: FeatureOptions): Features {
let feature = 0;
for (const key of Reflect.ownKeys(featureOptions)) {
if (featureOptions[key as keyof FeatureOptions] !== true) {
continue;
}
switch (key as keyof FeatureOptions) {
case "nesting":
feature |= Features.Nesting;
break;
case "notSelectorList":
feature |= Features.NotSelectorList;
break;
case "dirSelector":
feature |= Features.DirSelector;
break;
case "langSelectorList":
feature |= Features.LangSelectorList;
break;
case "isSelector":
feature |= Features.IsSelector;
break;
case "textDecorationThicknessPercent":
feature |= Features.TextDecorationThicknessPercent;
break;
case "mediaIntervalSyntax":
feature |= Features.MediaIntervalSyntax;
break;
case "mediaRangeSyntax":
feature |= Features.MediaRangeSyntax;
break;
case "customMediaQueries":
feature |= Features.CustomMediaQueries;
break;
case "clampFunction":
feature |= Features.ClampFunction;
break;
case "colorFunction":
feature |= Features.ColorFunction;
break;
case "oklabColors":
feature |= Features.OklabColors;
break;
case "labColors":
feature |= Features.LabColors;
break;
case "p3Colors":
feature |= Features.P3Colors;
break;
case "hexAlphaColors":
feature |= Features.HexAlphaColors;
break;
case "spaceSeparatedColorNotation":
feature |= Features.SpaceSeparatedColorNotation;
break;
case "fontFamilySystemUi":
feature |= Features.FontFamilySystemUi;
break;
case "doublePositionGradients":
feature |= Features.DoublePositionGradients;
break;
case "vendorPrefixes":
feature |= Features.VendorPrefixes;
break;
case "logicalProperties":
feature |= Features.LogicalProperties;
break;
case "selectors":
feature |= Features.Selectors;
break;
case "mediaQueries":
feature |= Features.MediaQueries;
break;
case "color":
feature |= Features.Color;
break;
}
}
return feature;
}

function parseVersion(version: string) {
const [major, minor = 0, patch = 0] = version
.split("-")[0]
Expand Down Expand Up @@ -141,11 +222,37 @@ export interface PseudoClasses {
focusWithin?: string;
}

export type FeatureOptions = {
nesting?: boolean;
notSelectorList?: boolean;
dirSelector?: boolean;
langSelectorList?: boolean;
isSelector?: boolean;
textDecorationThicknessPercent?: boolean;
mediaIntervalSyntax?: boolean;
mediaRangeSyntax?: boolean;
customMediaQueries?: boolean;
clampFunction?: boolean;
colorFunction?: boolean;
oklabColors?: boolean;
labColors?: boolean;
p3Colors?: boolean;
hexAlphaColors?: boolean;
spaceSeparatedColorNotation?: boolean;
fontFamilySystemUi?: boolean;
doublePositionGradients?: boolean;
vendorPrefixes?: boolean;
logicalProperties?: boolean;
selectors?: boolean;
mediaQueries?: boolean;
color?: boolean;
};

export type LoaderOptions = {
errorRecovery?: boolean;
targets?: Targets | string[] | string;
include?: Features;
exclude?: Features;
include?: FeatureOptions;
exclude?: FeatureOptions;
draft?: Drafts;
nonStandard?: NonStandard;
pseudoClasses?: PseudoClasses;
Expand Down
14 changes: 13 additions & 1 deletion packages/rspack/src/config/adapterRuleUse.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,11 @@ import type { Compilation } from "../Compilation";
import type { Compiler } from "../Compiler";
import type { Module } from "../Module";
import { resolvePluginImport } from "../builtin-loader";
import { browserslistToTargets } from "../builtin-loader/lightningcss";
import {
type FeatureOptions,
browserslistToTargets,
toFeatures
} from "../builtin-loader/lightningcss";
import { type LoaderObject, parsePathQueryFragment } from "../loader-runner";
import type { Logger } from "../logging/Logger";
import { isNil } from "../util";
Expand Down Expand Up @@ -220,6 +224,14 @@ const getLightningcssLoaderOptions: GetLoaderOptions = (o, _) => {
if (o.targets && Array.isArray(o.targets)) {
o.targets = browserslistToTargets(o.targets);
}

if (o.include) {
o.include = toFeatures(o.include as unknown as FeatureOptions);
}

if (o.exclude) {
o.exclude = toFeatures(o.exclude as unknown as FeatureOptions);
}
}
return o;
};
Expand Down
8 changes: 4 additions & 4 deletions packages/rspack/src/exports.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -260,10 +260,10 @@ export type {
SwcLoaderTsParserConfig
} from "./builtin-loader/swc/index";

import * as lightningcss from "./builtin-loader/lightningcss/index";

export { type LoaderOptions as LightningcssLoaderOptions } from "./builtin-loader/lightningcss/index";
export { lightningcss };
export {
type LoaderOptions as LightningcssLoaderOptions,
type FeatureOptions as LightningcssFeatureOptions
} from "./builtin-loader/lightningcss/index";

///// Experiments Stuff /////
import { cleanupGlobalTrace, registerGlobalTrace } from "@rspack/binding";
Expand Down
Loading

2 comments on commit 52dd72e

@rspack-bot
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 Benchmark detail: Open

Name Base (2024-07-25 0436693) Current Change
10000_development-mode + exec 2.19 s ± 30 ms 2.19 s ± 28 ms +0.01 %
10000_development-mode_hmr + exec 694 ms ± 15 ms 695 ms ± 7.5 ms +0.12 %
10000_production-mode + exec 2.67 s ± 27 ms 2.64 s ± 17 ms -1.25 %
arco-pro_development-mode + exec 1.9 s ± 53 ms 1.88 s ± 76 ms -0.68 %
arco-pro_development-mode_hmr + exec 434 ms ± 1.6 ms 433 ms ± 2.2 ms -0.06 %
arco-pro_production-mode + exec 3.48 s ± 85 ms 3.41 s ± 62 ms -1.99 %
threejs_development-mode_10x + exec 1.76 s ± 28 ms 1.77 s ± 22 ms +0.36 %
threejs_development-mode_10x_hmr + exec 858 ms ± 9 ms 878 ms ± 5.7 ms +2.35 %
threejs_production-mode_10x + exec 5.7 s ± 38 ms 5.48 s ± 23 ms -3.82 %

@rspack-bot
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

📝 Ran ecosystem CI: Open

suite result
modernjs ❌ failure
_selftest ✅ success
nx ❌ failure
rspress ✅ success
rsbuild ❌ failure
examples ❌ failure

Please sign in to comment.