diff --git a/src/generators/extractSelectors.ts b/src/generators/extractSelectors.ts
index d838296551..5f7d3452b6 100644
--- a/src/generators/extractSelectors.ts
+++ b/src/generators/extractSelectors.ts
@@ -122,6 +122,15 @@ function classMatches(node: Node, className: string) {
return value.split(' ').indexOf(className) !== -1;
}
+const operators = {
+ '=' : (value: string, flags: string) => new RegExp(`^${value}$`, flags),
+ '~=': (value: string, flags: string) => new RegExp(`\\b${value}\\b`, flags),
+ '|=': (value: string, flags: string) => new RegExp(`^${value}(-.+)?$`, flags),
+ '^=': (value: string, flags: string) => new RegExp(`^${value}`, flags),
+ '$=': (value: string, flags: string) => new RegExp(`${value}$`, flags),
+ '*=': (value: string, flags: string) => new RegExp(value, flags)
+};
+
function attributeMatches(node: Node, selector: Node) {
const attr = node.attributes.find((attr: Node) => attr.name === selector.name.name);
if (!attr) return false;
@@ -130,15 +139,8 @@ function attributeMatches(node: Node, selector: Node) {
const expectedValue = unquote(selector.value.value);
const actualValue = attr.value[0].data;
- if (selector.operator === '=') {
- return actualValue === expectedValue;
- }
-
- if(selector.operator === '~=') {
- return actualValue.split(/\s/).indexOf(expectedValue) !== -1;
- }
-
- return true;
+ const pattern = operators[selector.operator](expectedValue, selector.flags || '');
+ return pattern.test(actualValue);
}
function isDynamic(value: Node) {
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-contains/_config.js b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/_config.js
new file mode 100644
index 0000000000..b37866f9b6
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/_config.js
@@ -0,0 +1,3 @@
+export default {
+ cascade: false
+};
\ No newline at end of file
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css
new file mode 100644
index 0000000000..b48dfbe85a
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.css
@@ -0,0 +1,4 @@
+
+ [data-foo*='bar'][svelte-4224841812] {
+ color: red;
+ }
diff --git a/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.html b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.html
new file mode 100644
index 0000000000..22a45b853e
--- /dev/null
+++ b/test/css/samples/omit-scoping-attribute-attribute-selector-contains/expected.html
@@ -0,0 +1,2 @@
+this is styled
+
this is unstyled
+
this is styled
+
this is unstyled
+
this is styled
+
this is unstyled
+
this is styled
+
this is unstyled
+
this is styled
+
this is styled
+
this is unstyled
+
this is styled
+
this is styled
+
this is unstyled
+
this is styled
+
this is unstyled
+
this is styled
+
this is unstyled
+
this is unstyled
+
this is styled
+
this is unstyled
+
this is styled
+
this is styled
-
this is unstyled
-
this is styled
-
this is unstyled
-