css-classname-mapping

Generate a classname mapping from a minimified css file and corresponding sourcemap.

A classname mapping that maps the minified classname to original one and the source file that contains it will be generated by this tool.

Usage

Command line utility

css-classname-mapping --help

generate css classname mapping

Commands:
  runner-ts.js <files...>       generate css classname mapping         [default]

Positionals:
  files  path to css files                                              [string]

Options:
  --version  Show version number                                       [boolean]
  --help     Show help                                                 [boolean]
  --output   output path, print to console if omitted                   [string]

Sample output

css-classname-mapping ./src/processor/tests/fixtures/single_file.css prints the following in the console

{
  "version": "v1",
  "mapping": {
    "HHNCVg": [
      {
        "classname": "fakeComponent",
        "source": "webpack:///pages/dummy/fakes/fake_component.css"
      }
    ],
    "Tt7OJQ": [
      {
        "classname": "foo",
        "source": "webpack:///pages/dummy/fakes/fake_component.css"
      }
    ],
    "lXfJHQ": [
      {
        "classname": "ele",
        "source": "webpack:///pages/dummy/fakes/fake_component.css"
      }
    ],
    "IGlTFQ": [
      {
        "classname": "gold",
        "source": "webpack:///pages/dummy/fakes/fake_component.css"
      }
    ],
    "Rebjuw": [
      {
        "classname": "bar",
        "source": "webpack:///pages/dummy/fakes/fake_component.css"
      }
    ],
    "_0qzQbw": [
      {
        "classname": "baz",
        "source": "webpack:///pages/dummy/fakes/fake_component.css"
      }
    ],
    "_Zwvmw": [
      {
        "classname": "apple",
        "source": "webpack:///pages/dummy/fakes/fake_component.css"
      }
    ],
    "GWn3Lg": [
      {
        "classname": "boy",
        "source": "webpack:///pages/dummy/fakes/fake_component.css"
      }
    ],
    "tHNuqw": [
      {
        "classname": "cat",
        "source": "webpack:///pages/dummy/fakes/fake_component.css"
      }
    ],
    "DmVGGw": [
      {
        "classname": "dog",
        "source": "webpack:///pages/dummy/fakes/fake_component.css"
      }
    ]
  }
}

Debugging utilities via command line

find-source-at

Find source content and print the code block near that point based on the minified css file and a code position in it.

css-classname-mapping find-source-at --help

find the source code based on the position

Options:
  --version      Show version number                                   [boolean]
  --help         Show help                                             [boolean]
  --cssFilePath  path to css file                            [string] [required]
  --line         line number                                 [number] [required]
  --column       column number                               [number] [required]

Sample output

running css-classname-mapping find-source-at --css-file-path ./src/processor/tests/fixtures/single_file.css --line 1 --column 30 will print the following in the console

sourceFile: webpack:///pages/dummy/fakes/fake_component.css

.fakeComponent {
    padding: 8px;
}
.foo {
^^^^^^
    color: red;
    line-height: 12px;
}
.ele > .gold {
    size: 12px;
}

find-source-for

Find source content and print the code block near that point based on the minified css file and a minified classname.

css-classname-mapping find-source-for --help

find the original classname based on the classname

Options:
  --version      Show version number                                   [boolean]
  --help         Show help                                             [boolean]
  --cssFilePath  path to css file                            [string] [required]
  --classname    minified classname                          [string] [required]

Sample output

running find-source-for --css-file-path ./src/processor/tests/fixtures/single_file.css --classname IGlTFQ will print the following in the console

sourceFile: webpack:///pages/dummy/fakes/fake_component.css
mapping: IGlTFQ -> [ 'gold' ]

.foo {
    color: red;
    line-height: 12px;
}
.ele > .gold {
       ^^^^^
    size: 12px;
}
.bar:focus {
    border-radius: 50%;
}

fa93hws / css-classname-mapping Goto Github PK