Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: case insensivity in CSS #16915

Merged
merged 6 commits into from Apr 12, 2023
Merged

fix: case insensivity in CSS #16915

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d733547
fix: different case `url` function
alexander-akait Apr 5, 2023
5a5b140
fix: handle at-rules
alexander-akait Apr 5, 2023
b735a56
fix: more cases
alexander-akait Apr 5, 2023
ce96e2d
test: update
alexander-akait Apr 5, 2023
1fa5b35
test: update
alexander-akait Apr 5, 2023
7a78d19
test: update
alexander-akait Apr 6, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
12 changes: 6 additions & 6 deletions lib/css/CssParser.js
View file
Open in desktop
Expand Up @@ -279,8 +279,8 @@ class CssParser extends Parser {
module.addDependency(dep);
declaredCssVariables.add(name);
} else if (
propertyName === "animation-name" ||
propertyName === "animation"
propertyName.toLowerCase() === "animation-name" ||
propertyName.toLowerCase() === "animation"
) {
modeData = "animation";
lastIdentifier = undefined;
Expand Down Expand Up @@ -343,7 +343,7 @@ class CssParser extends Parser {
return end;
},
atKeyword: (input, start, end) => {
const name = input.slice(start, end);
const name = input.slice(start, end).toLowerCase();
if (name === "@namespace") {
throw new Error("@namespace is not supported in bundled CSS");
}
Expand Down Expand Up @@ -543,7 +543,7 @@ class CssParser extends Parser {
singleClassSelector = false;
switch (mode) {
case CSS_MODE_TOP_LEVEL: {
const name = input.slice(start, end);
const name = input.slice(start, end).toLowerCase();
if (this.allowModeSwitch && name === ":global") {
modeData = "global";
const dep = new ConstDependency("", [start, end]);
Expand All @@ -566,7 +566,7 @@ class CssParser extends Parser {
pseudoFunction: (input, start, end) => {
switch (mode) {
case CSS_MODE_TOP_LEVEL: {
const name = input.slice(start, end - 1);
const name = input.slice(start, end - 1).toLowerCase();
if (this.allowModeSwitch && name === ":global") {
modeStack.push(modeData);
modeData = "global";
Expand All @@ -589,7 +589,7 @@ class CssParser extends Parser {
function: (input, start, end) => {
switch (mode) {
case CSS_MODE_IN_LOCAL_RULE: {
const name = input.slice(start, end - 1);
const name = input.slice(start, end - 1).toLowerCase();
if (name === "var") {
let pos = walkCssTokens.eatWhitespaceAndComments(input, end);
if (pos === input.length) return pos;
Expand Down
7 changes: 6 additions & 1 deletion lib/css/walkCssTokens.js
View file
Open in desktop
Expand Up @@ -62,6 +62,7 @@ const CC_LOWER_E = "e".charCodeAt(0);
const CC_LOWER_Z = "z".charCodeAt(0);
const CC_UPPER_A = "A".charCodeAt(0);
const CC_UPPER_E = "E".charCodeAt(0);
const CC_UPPER_U = "U".charCodeAt(0);
const CC_UPPER_Z = "Z".charCodeAt(0);
const CC_0 = "0".charCodeAt(0);
const CC_9 = "9".charCodeAt(0);
Expand Down Expand Up @@ -288,7 +289,10 @@ const consumeOtherIdentifier = (input, pos, callbacks) => {
const consumePotentialUrl = (input, pos, callbacks) => {
const start = pos;
pos = _consumeIdentifier(input, pos);
if (pos === start + 3 && input.slice(start, pos + 1) === "url(") {
if (
pos === start + 3 &&
input.slice(start, pos + 1).toLowerCase() === "url("
) {
pos++;
let cc = input.charCodeAt(pos);
while (_isWhiteSpace(cc)) {
Expand Down Expand Up @@ -569,6 +573,7 @@ const CHAR_MAP = Array.from({ length: 0x80 }, (_, cc) => {
case CC_AT_SIGN:
return consumeAt;
case CC_LOWER_U:
case CC_UPPER_U:
return consumePotentialUrl;
case CC_LOW_LINE:
return consumeOtherIdentifier;
Expand Down
2 changes: 2 additions & 0 deletions test/__snapshots__/ConfigCacheTestCases.longtest.js.snap
View file
Open in desktop
Expand Up @@ -15,6 +15,8 @@ Object {
"j": " green url(img\\\\ img.09a1a1112c577c279435.png) xyz",
"k": " green url(img\\\\ img.09a1a1112c577c279435.png) xyz",
"l": " green url(img.09a1a1112c577c279435.png) xyz",
"m": " green url(img.09a1a1112c577c279435.png) xyz",
"n": " green url(img.09a1a1112c577c279435.png) xyz",
}
`;

Expand Down
2 changes: 2 additions & 0 deletions test/__snapshots__/ConfigTestCases.basictest.js.snap
View file
Open in desktop
Expand Up @@ -15,6 +15,8 @@ Object {
"j": " green url(img\\\\ img.09a1a1112c577c279435.png) xyz",
"k": " green url(img\\\\ img.09a1a1112c577c279435.png) xyz",
"l": " green url(img.09a1a1112c577c279435.png) xyz",
"m": " green url(img.09a1a1112c577c279435.png) xyz",
"n": " green url(img.09a1a1112c577c279435.png) xyz",
}
`;

Expand Down
12 changes: 12 additions & 0 deletions test/configCases/css/css-modules-in-node/index.js
View file
Open in desktop
Expand Up @@ -53,6 +53,18 @@ it("should allow to create css modules", done => {
supportsInMedia: prod
? "my-app-491-SQ"
: "./style.module.css-displayFlexInSupportsInMedia",
displayFlexInSupportsInMediaUpperCase: prod
? "my-app-491-XM"
: "./style.module.css-displayFlexInSupportsInMediaUpperCase",
keyframesUPPERCASE: prod
? "my-app-491-T4"
: "./style.module.css-localkeyframesUPPERCASE",
localkeyframes2UPPPERCASE: prod
? "my-app-491-Xi"
: "./style.module.css-localkeyframes2UPPPERCASE",
VARS: prod
? "--my-app-491-DJ my-app-491-ms undefined my-app-491-cU"
: "--./style.module.css-LOCAL-COLOR ./style.module.css-VARS undefined ./style.module.css-globalVarsUpperCase",
});
} catch (e) {
return done(e);
Expand Down
12 changes: 12 additions & 0 deletions test/configCases/css/css-modules/index.js
View file
Open in desktop
Expand Up @@ -56,6 +56,18 @@ it("should allow to create css modules", done => {
supportsInMedia: prod
? "my-app-491-SQ"
: "./style.module.css-displayFlexInSupportsInMedia",
displayFlexInSupportsInMediaUpperCase: prod
? "my-app-491-XM"
: "./style.module.css-displayFlexInSupportsInMediaUpperCase",
keyframesUPPERCASE: prod
? "my-app-491-T4"
: "./style.module.css-localkeyframesUPPERCASE",
localkeyframes2UPPPERCASE: prod
? "my-app-491-Xi"
: "./style.module.css-localkeyframes2UPPPERCASE",
VARS: prod
? "--my-app-491-DJ my-app-491-ms undefined my-app-491-cU"
: "--./style.module.css-LOCAL-COLOR ./style.module.css-VARS undefined ./style.module.css-globalVarsUpperCase",
});
} catch (e) {
return done(e);
Expand Down
53 changes: 53 additions & 0 deletions test/configCases/css/css-modules/style.module.css
View file
Open in desktop
Expand Up @@ -166,3 +166,56 @@
}
}
}

@MEDIA screen and (min-width: 900px) {
@SUPPORTS (display: flex) {
.displayFlexInSupportsInMediaUpperCase {
display: flex;
}
}
}

.animationUpperCase {
ANIMATION-NAME: localkeyframesUPPERCASE;
ANIMATION: 3s ease-in 1s 2 reverse both paused localkeyframesUPPERCASE, localkeyframes2UPPPERCASE;
--pos1x: 0px;
--pos1y: 0px;
--pos2x: 10px;
--pos2y: 20px;
}

@KEYFRAMES localkeyframesUPPERCASE {
0% {
left: VAR(--pos1x);
top: VAR(--pos1y);
color: VAR(--theme-color1);
}
100% {
left: VAR(--pos2x);
top: VAR(--pos2y);
color: VAR(--theme-color2);
}
}

@KEYframes localkeyframes2UPPPERCASE {
0% {
left: 0;
}
100% {
left: 100px;
}
}

:GLOBAL .globalUpperCase :LOCAL .localUpperCase {
color: yellow;
}

.VARS {
color: VAR(--LOCAL-COLOR);
--LOCAL-COLOR: red;
}

.globalVarsUpperCase :GLOBAL {
COLOR: VAR(--GLOBAR-COLOR);
--GLOBAR-COLOR: red;
}
4 changes: 4 additions & 0 deletions test/configCases/css/css-modules/use-style.js
View file
Open in desktop
Expand Up @@ -19,6 +19,8 @@ export default {
webkitAnyWmultiParams: `${style.local16}`,
ident,
keyframes: style.localkeyframes,
keyframesUPPERCASE: style.localkeyframesUPPERCASE,
localkeyframes2UPPPERCASE: style.localkeyframes2UPPPERCASE,
animation: style.animation,
vars: `${style["local-color"]} ${style.vars} ${style["global-color"]} ${style.globalVars}`,
media: style.wideScreenClass,
Expand All @@ -27,4 +29,6 @@ export default {
supportsWithOperator: style.floatRightInNegativeSupports,
mediaInSupports: style.displayFlexInMediaInSupports,
supportsInMedia: style.displayFlexInSupportsInMedia,
displayFlexInSupportsInMediaUpperCase: style.displayFlexInSupportsInMediaUpperCase,
VARS: `${style["LOCAL-COLOR"]} ${style.VARS} ${style["GLOBAL-COLOR"]} ${style.globalVarsUpperCase}`,
};
4 changes: 3 additions & 1 deletion test/configCases/css/css-modules/warnings.js
View file
Open in desktop
Expand Up @@ -2,7 +2,9 @@ module.exports = [
[/export 'global' \(imported as 'style'\) was not found/],
[/export 'nested2' \(imported as 'style'\) was not found/],
[/export 'global-color' \(imported as 'style'\) was not found/],
[/export 'GLOBAL-COLOR' \(imported as 'style'\) was not found/],
[/export 'global' \(imported as 'style'\) was not found/],
[/export 'nested2' \(imported as 'style'\) was not found/],
[/export 'global-color' \(imported as 'style'\) was not found/]
[/export 'global-color' \(imported as 'style'\) was not found/],
[/export 'GLOBAL-COLOR' \(imported as 'style'\) was not found/]
];
8 changes: 8 additions & 0 deletions test/configCases/css/import-different-case/index.js
View file
Open in desktop
@@ -0,0 +1,8 @@
import * as style from "./style.css";

it("should compile and load style on demand", () => {
expect(style).toEqual(nsObj({}));
const computedStyle = getComputedStyle(document.body);
expect(computedStyle.getPropertyValue("background")).toBe(" red");
expect(computedStyle.getPropertyValue("margin")).toBe(" 10px");
});
3 changes: 3 additions & 0 deletions test/configCases/css/import-different-case/style-imported.css
View file
Open in desktop
@@ -0,0 +1,3 @@
body {
margin: 10px;
}
4 changes: 4 additions & 0 deletions test/configCases/css/import-different-case/style.css
View file
Open in desktop
@@ -0,0 +1,4 @@
@IMPORT "style-imported.css";
body {
background: red;
}
8 changes: 8 additions & 0 deletions test/configCases/css/import-different-case/test.config.js
View file
Open in desktop
@@ -0,0 +1,8 @@
module.exports = {
moduleScope(scope) {
const link = scope.window.document.createElement("link");
link.rel = "stylesheet";
link.href = "bundle0.css";
scope.window.document.head.appendChild(link);
}
};
8 changes: 8 additions & 0 deletions test/configCases/css/import-different-case/webpack.config.js
View file
Open in desktop
@@ -0,0 +1,8 @@
/** @type {import("../../../../").Configuration} */
module.exports = {
target: "web",
mode: "development",
experiments: {
css: true
}
};
8 changes: 8 additions & 0 deletions test/configCases/css/urls/spacing.css
View file
Open in desktop
Expand Up @@ -47,3 +47,11 @@ spacing {
spacing {
l: green url(/img.png) xyz;
}

spacing {
m: green URL(/img.png) xyz;
}

spacing {
n: green uRl(/img.png) xyz;
}