Use css parser to add hover class name to selectors.

Previously we use a regexp to match all the CSS selectors and add
our hover class name to it, which has been proved not solid and
may be very slow in some situation.
Using a production ready css parser can handle this better and also
provide ability's to do more accurate things to the recorded
stylesheets.
This commit is contained in:
Yanzhen Yu
2019-08-04 14:35:35 +08:00
parent 0865c82948
commit 61a99c642a
5 changed files with 1054 additions and 10 deletions

View File

@@ -1,3 +1,5 @@
import * as fs from 'fs';
import * as path from 'path';
import 'mocha';
import { expect } from 'chai';
import { addHoverClass } from '../src/rebuild';
@@ -40,4 +42,16 @@ describe('add hover class to hover selector related rules', () => {
const cssText = '.a::after { content: ":hover" }';
expect(addHoverClass(cssText)).to.equal(cssText);
});
it('benchmark', () => {
const cssText = fs.readFileSync(
path.resolve(__dirname, './css/benchmark.css'),
'utf8',
);
const start = process.hrtime();
addHoverClass(cssText);
const end = process.hrtime(start);
const duration = end[0] * 1_000 + end[1] / 1_000_000;
expect(duration).to.below(100);
});
});