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.
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]
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"
}
]
}
}
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]
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 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]
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%;
}