fix: handle all valid identifier in animation name and exclude global value

.github/workflows/nodejs.yml

@@ -0,0 +1,88 @@
+name: test
+
+on:
+  push:
+    branches:
+      - master
+      - next
+  pull_request:
+    branches:
+      - master
+      - next
+
+permissions:
+  contents: read
+
+jobs:
+  lint:
+    name: Lint - ${{ matrix.os }} - Node v${{ matrix.node-version }}
+
+    env:
+      GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest]
+        node-version: [lts/*]
+
+    runs-on: ${{ matrix.os }}
+
+    concurrency:
+      group: lint-${{ matrix.os }}-v${{ matrix.node-version }}-${{ github.ref }}
+      cancel-in-progress: true
+
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Lint
+        run: yarn lint
+
+  test:
+    name: Test - ${{ matrix.os }} - Node v${{ matrix.node-version }}
+
+    strategy:
+      matrix:
+        os: [ubuntu-latest, windows-latest, macos-latest]
+        node-version: [10.x, 12.x, 14.x, 16.x, 18.x, 20.x]
+        webpack-version: [latest]
+
+    runs-on: ${{ matrix.os }}
+
+    concurrency:
+      group: test-${{ matrix.os }}-v${{ matrix.node-version }}-${{ github.ref }}
+      cancel-in-progress: true
+
+    steps:
+      - name: Setup Git
+        if: matrix.os == 'windows-latest'
+        run: git config --global core.autocrlf input
+
+      - uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "yarn"
+
+      - name: Install dependencies
+        run: yarn --frozen-lockfile
+
+      - name: Run tests for webpack version ${{ matrix.webpack-version }}
+        run: yarn test --ci
+
+      - name: Submit coverage data to codecov
+        uses: codecov/codecov-action@v3
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}

package.json

@@ -28,9 +28,8 @@
     "test:only": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage --collectCoverageFrom=\"src/**/*\"",
-    "pretest": "yarn lint",
     "test": "yarn test:coverage",
-    "prepublishOnly": "yarn test"
+    "prepublishOnly": "yarn lint && yarn test"
   },
   "dependencies": {
     "icss-utils": "^5.0.0",

src/index.js

@@ -301,10 +301,27 @@ function isWordAFunctionArgument(wordNode, functionNode) {
     : false;
 }
 
+// `none` is special value, other is global values
+const specialKeywords = [
+  "none",
+  "inherit",
+  "initial",
+  "revert",
+  "revert-layer",
+  "unset",
+];
+
 function localizeDeclarationValues(localize, declaration, context) {
   const valueNodes = valueParser(declaration.value);
 
   valueNodes.walk((node, index, nodes) => {
+    if (
+      node.type === "word" &&
+      specialKeywords.includes(node.value.toLowerCase())
+    ) {
+      return;
+    }
+
     const subContext = {
       options: context.options,
       global: context.global,
@@ -321,16 +338,27 @@ function localizeDeclaration(declaration, context) {
   const isAnimation = /animation$/i.test(declaration.prop);
 
   if (isAnimation) {
-    const validIdent = /^-?[_a-z][_a-z0-9-]*$/i;
+    // letter
+    // An uppercase letter or a lowercase letter.
+    //
+    // ident-start code point
+    // A letter, a non-ASCII code point, or U+005F LOW LINE (_).
+    //
+    // ident code point
+    // 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;
 
     /*
     The spec defines some keywords that you can use to describe properties such as the timing
     function. These are still valid animation names, so as long as there is a property that accepts
     a keyword, it is given priority. Only when all the properties that can take a keyword are
     exhausted can the animation name be set to the keyword. I.e.
-  
+
     animation: infinite infinite;
-  
+
     The animation will repeat an infinite number of times from the first argument, and will have an
     animation name of infinite from the second.
     */
@@ -356,6 +384,8 @@ function localizeDeclaration(declaration, context) {
       $initial: Infinity,
       $inherit: Infinity,
       $unset: Infinity,
+      $revert: Infinity,
+      "$revert-layer": Infinity,
     };
 
     const didParseAnimationName = false;

test/index.test.js

@@ -170,6 +170,91 @@ const tests = [
     input: ".foo { animation-name: bar, foobar; }",
     expected: ":local(.foo) { animation-name: :local(bar), :local(foobar); }",
   },
+  {
+    name: "not localize revert",
+    input: ".foo { animation: revert; }",
+    expected: ":local(.foo) { animation: revert; }",
+  },
+  {
+    name: "not localize revert #2",
+    input: ".foo { animation-name: revert; }",
+    expected: ":local(.foo) { animation-name: revert; }",
+  },
+  {
+    name: "not localize revert #3",
+    input: ".foo { animation-name: revert, foo, none; }",
+    expected: ":local(.foo) { animation-name: revert, :local(foo), none; }",
+  },
+  {
+    name: "not localize revert-layer",
+    input: ".foo { animation: revert-layer; }",
+    expected: ":local(.foo) { animation: revert-layer; }",
+  },
+  {
+    name: "not localize revert",
+    input: ".foo { animation-name: revert-layer; }",
+    expected: ":local(.foo) { animation-name: revert-layer; }",
+  },
+  {
+    name: "localize animation using special characters",
+    input: ".foo { animation: \\@bounce; }",
+    expected: ":local(.foo) { animation: :local(\\@bounce); }",
+  },
+  {
+    name: "localize animation using special characters",
+    input: ".foo { animation: bou\\@nce; }",
+    expected: ":local(.foo) { animation: :local(bou\\@nce); }",
+  },
+  {
+    name: "localize animation using special characters",
+    input: ".foo { animation: \\ as; }",
+    expected: ":local(.foo) { animation: :local(\\ as); }",
+  },
+  {
+    name: "localize animation using special characters",
+    input: ".foo { animation: t\\ t; }",
+    expected: ":local(.foo) { animation: :local(t\\ t); }",
+  },
+  {
+    name: "localize animation using special characters",
+    input: ".foo { animation: -\\a; }",
+    expected: ":local(.foo) { animation: :local(-\\a); }",
+  },
+  {
+    name: "localize animation using special characters",
+    input: ".foo { animation: --\\a; }",
+    expected: ":local(.foo) { animation: :local(--\\a); }",
+  },
+  {
+    name: "localize animation using special characters",
+    input: ".foo { animation: \\a; }",
+    expected: ":local(.foo) { animation: :local(\\a); }",
+  },
+  {
+    name: "localize animation using special characters",
+    input: ".foo { animation: -\\a; }",
+    expected: ":local(.foo) { animation: :local(-\\a); }",
+  },
+  {
+    name: "localize animation using special characters",
+    input: ".foo { animation: --; }",
+    expected: ":local(.foo) { animation: :local(--); }",
+  },
+  {
+    name: "localize animation using special characters",
+    input: ".foo { animation: 😃bounce😃; }",
+    expected: ":local(.foo) { animation: :local(😃bounce😃); }",
+  },
+  {
+    name: "not localize revert",
+    input: ".foo { animation: --foo; }",
+    expected: ":local(.foo) { animation: :local(--foo); }",
+  },
+  {
+    name: "localize animation",
+    input: ".foo { animation: a; }",
+    expected: ":local(.foo) { animation: :local(a); }",
+  },
   {
     name: "localize animation",
     input: ".foo { animation: bar 5s, foobar; }",
@@ -204,23 +289,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; }",
@@ -303,6 +385,18 @@ const tests = [
     expected:
       "@keyframes :local(foo) { from { color: red; } to { color: blue; } }",
   },
+  {
+    name: "localize keyframes starting with special characters",
+    input: "@keyframes \\@foo { from { color: red; } to { color: blue; } }",
+    expected:
+      "@keyframes :local(\\@foo) { from { color: red; } to { color: blue; } }",
+  },
+  {
+    name: "localize keyframes containing special characters",
+    input: "@keyframes f\\@oo { from { color: red; } to { color: blue; } }",
+    expected:
+      "@keyframes :local(f\\@oo) { from { color: red; } to { color: blue; } }",
+  },
   {
     name: "localize keyframes in global default mode",
     input: "@keyframes foo {}",