From ef3173aae7fd3cce272986b4fcf3220d6c565a99 Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Thu, 21 Dec 2023 16:32:47 +0300 Subject: [PATCH 1/2] fix: do not tread negative values as identifiers in the animation shorthand --- src/index.js | 3 +-- test/index.test.js | 24 +++++++++++++++++++++--- 2 files changed, 22 insertions(+), 5 deletions(-) diff --git a/src/index.js b/src/index.js index 142c9fd..eb84f03 100644 --- a/src/index.js +++ b/src/index.js @@ -356,8 +356,7 @@ function localizeDeclaration(declaration, context) { // An ident-start code point, a digit, or U+002D HYPHEN-MINUS (-). // We don't validate `hex digits`, because we don't need it, it is work of linters. - const validIdent = - /^-?([a-z\u0080-\uFFFF_]|(\\[^\r\n\f])|-)((\\[^\r\n\f])|[a-z\u0080-\uFFFF_0-9-])*$/i; + const validIdent = /^-?([a-z\u0080-\uFFFF_]|(\\[^\r\n\f])|-(?![0-9]))((\\[^\r\n\f])|[a-z\u0080-\uFFFF_0-9-])*$/i; /* The spec defines some keywords that you can use to describe properties such as the timing diff --git a/test/index.test.js b/test/index.test.js index f08f916..7c976f6 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -389,20 +389,23 @@ const tests = [ expected: ":local(.foo) { animation: 1s :local(foo); }", }, { - name: "handle animations where the first value is not the animation name whilst also using keywords", + name: + "handle animations where the first value is not the animation name whilst also using keywords", input: ".foo { animation: 1s normal ease-out infinite foo; }", expected: ":local(.foo) { animation: 1s normal ease-out infinite :local(foo); }", }, { - name: "not treat animation curve as identifier of animation name even if it separated by comma", + name: + "not treat animation curve as identifier of animation name even if it separated by comma", input: ".foo { animation: slide-right 300ms forwards ease-out, fade-in 300ms forwards ease-out; }", expected: ":local(.foo) { animation: :local(slide-right) 300ms forwards ease-out, :local(fade-in) 300ms forwards ease-out; }", }, { - name: 'not treat "start" and "end" keywords in steps() function as identifiers', + name: + 'not treat "start" and "end" keywords in steps() function as identifiers', input: [ ".foo { animation: spin 1s steps(12, end) infinite; }", ".foo { animation: spin 1s STEPS(12, start) infinite; }", @@ -864,6 +867,21 @@ const tests = [ options: { mode: "pure" }, expected: ":export { foo: __foo; }", }, + { + name: "handle negative animation-delay in animation shorthand", + input: ".foo { animation: 1s -500ms; }", + expected: ":local(.foo) { animation: 1s -500ms; }", + }, + { + name: "handle negative animation-delay in animation shorthand #1", + input: ".foo { animation: 1s -500.0ms; }", + expected: ":local(.foo) { animation: 1s -500.0ms; }", + }, + { + name: "handle negative animation-delay in animation shorthand #2", + input: ".foo { animation: 1s -500.0ms -a_value; }", + expected: ":local(.foo) { animation: 1s -500.0ms :local(-a_value); }", + }, ]; function process(css, options) { From 6d0689f5deb204a6bfd5f79063f3b043793cdccb Mon Sep 17 00:00:00 2001 From: "alexander.akait" Date: Thu, 21 Dec 2023 16:37:31 +0300 Subject: [PATCH 2/2] style: fix --- src/index.js | 3 ++- test/index.test.js | 9 +++------ 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/src/index.js b/src/index.js index eb84f03..391507c 100644 --- a/src/index.js +++ b/src/index.js @@ -356,7 +356,8 @@ function localizeDeclaration(declaration, context) { // An ident-start code point, a digit, or U+002D HYPHEN-MINUS (-). // We don't validate `hex digits`, because we don't need it, it is work of linters. - const validIdent = /^-?([a-z\u0080-\uFFFF_]|(\\[^\r\n\f])|-(?![0-9]))((\\[^\r\n\f])|[a-z\u0080-\uFFFF_0-9-])*$/i; + const validIdent = + /^-?([a-z\u0080-\uFFFF_]|(\\[^\r\n\f])|-(?![0-9]))((\\[^\r\n\f])|[a-z\u0080-\uFFFF_0-9-])*$/i; /* The spec defines some keywords that you can use to describe properties such as the timing diff --git a/test/index.test.js b/test/index.test.js index 7c976f6..e0428f9 100644 --- a/test/index.test.js +++ b/test/index.test.js @@ -389,23 +389,20 @@ const tests = [ expected: ":local(.foo) { animation: 1s :local(foo); }", }, { - name: - "handle animations where the first value is not the animation name whilst also using keywords", + name: "handle animations where the first value is not the animation name whilst also using keywords", input: ".foo { animation: 1s normal ease-out infinite foo; }", expected: ":local(.foo) { animation: 1s normal ease-out infinite :local(foo); }", }, { - name: - "not treat animation curve as identifier of animation name even if it separated by comma", + name: "not treat animation curve as identifier of animation name even if it separated by comma", input: ".foo { animation: slide-right 300ms forwards ease-out, fade-in 300ms forwards ease-out; }", expected: ":local(.foo) { animation: :local(slide-right) 300ms forwards ease-out, :local(fade-in) 300ms forwards ease-out; }", }, { - name: - 'not treat "start" and "end" keywords in steps() function as identifiers', + name: 'not treat "start" and "end" keywords in steps() function as identifiers', input: [ ".foo { animation: spin 1s steps(12, end) infinite; }", ".foo { animation: spin 1s STEPS(12, start) infinite; }",