chore: Merge pull request #73 from linkedin/ident-splitting.

feat: Ability to specify identifier ranges.

Author: chriseppstein

packages/opticss/src/OpticssOptions.ts

@@ -46,6 +46,27 @@ export interface OptiCSSOptions extends Optimizations {
    */
   css?: Partial<CSSFeatureFlags>;
 
+  identifiers?: {
+    /**
+     * Sets the starting value for identifiers. This is a standard base-10 number
+     * that is converted to a corresponding identifier.
+     *
+     * An integer greater than or equal to 1.
+     * Defaults to 1.
+     */
+    startValue?: number;
+
+    /**
+     * How many identifiers the ident generator for each namespace should be
+     * allowed to produce. Note that if any of the produced identifiers are
+     * reserved, the actual number of identifiers returned will be less than
+     * the max.
+     *
+     * An integer greater than or equal to 1.
+     * Defaults to Infinity.
+     */
+    maxCount?: number;
+  };
 }
 
 export const DEFAULT_OPTIONS = Object.freeze<OptiCSSOptions>({

packages/opticss/src/OptimizationPass.ts

@@ -14,6 +14,11 @@ export class OptimizationPass {
     this.styleMapping = new StyleMapping(templateOptions);
     this.cache = new SelectorCache();
     this.actions = new Actions();
-    this.identGenerators = new IdentGenerators(options.css!.caseInsensitiveSelectors!, "id", "class");
+    this.identGenerators = new IdentGenerators({
+      caseInsensitive: options.css!.caseInsensitiveSelectors!,
+      namespaces: ["id", "class"],
+      startValue: options.identifiers && options.identifiers.startValue,
+      maxIdentCount: options.identifiers && options.identifiers.maxCount,
+    });
   }
 }

packages/opticss/src/util/IdentGenerator.ts

@@ -24,26 +24,94 @@ function increment(insensitive: boolean, counters: Array<number>, i: number) {
   return carry;
 }
 
+function countersForInteger(caseInsensitive: boolean, integer: number): Array<number> {
+  integer = Math.round(integer);
+  let firstDigitBase = caseInsensitive ? 26 : 52;
+  let otherDigitBase = caseInsensitive ? 38 : 64;
+  let numDigits = 0;
+  let maxNumber = 0;
+  let penultimateMax = 0;
+  // We need to know the maximum number for one less than the number of places
+  // in our high-base number; numbers above that can be converted using the
+  // standard base-conversion algorithm in the base of the non-first digits.
+  // (These maximums are only dependent on the number of places so in theory
+  // this could be replaced with a lookup table.)
+  while (integer > maxNumber) {
+    penultimateMax = maxNumber;
+    numDigits++;
+    maxNumber += firstDigitBase * Math.pow(otherDigitBase, numDigits - 1);
+  }
+  let counters = new Array(numDigits);
+  // tbh I don't understand why we have to subtract an extra 1 here.
+  // I think it's because our leading digit has no zero.
+  integer -= penultimateMax + 1;
+  for (let c = 0; c < numDigits; c++) {
+    // Because we've subtracted penultimateMax, counters[0] is actually 1 less
+    // than the number it should be. But we don't have to add 1 to our leading
+    // digit because the base of our leading digit doesn't have a "zero".
+    counters[numDigits - c - 1] = (integer % otherDigitBase);
+    integer = Math.floor(integer / otherDigitBase);
+  }
+  return counters;
+}
+
+function integerForCounters(counters: Array<number>, caseInsensitive: boolean): number {
+  let firstDigitBase = caseInsensitive ? 26 : 52;
+  let otherDigitBase = caseInsensitive ? 38 : 64;
+  let total = 0;
+  // We first calculate this like our leading digit has the same base as the other digits.
+  for (let i = 0; i < counters.length; i++) {
+    total += (counters[i] + (i === 0 ? 1 : 0)) * Math.pow(otherDigitBase, counters.length - i - 1);
+  }
+  // Then we subtract the numeric gaps at the digit boundaries.
+  // (This only varies by the number of digits in our number so in theory it
+  // could be replaced by a lookup table.)
+  for (let i = 0; i < counters.length - 1; i++) {
+    total -= (otherDigitBase - firstDigitBase - 1) * Math.pow(otherDigitBase, i);
+  }
+  return total;
+}
+
 export class IdentGenerator {
+  private caseInsensitive: boolean;
   lastIdent: string;
+  private maxIdentCount: number;
+  private startValue: number;
   returnedIdents: Array<string>;
   reservedIdents: Set<string>;
   private counters: Array<number>;
   private identChar: (c: number, i: number) => string;
   private increment: (counters: Array<number>, i: number) => boolean;
-  constructor(caseInsensitive = false) {
-    this.counters = [0];
+  constructor(caseInsensitive = false, startValue = 1, maxIdentCount = Infinity) {
+    if (startValue < 1) {
+      throw new RangeError("startValue must be at least 1");
+    }
+    this.caseInsensitive = caseInsensitive;
+    this.startValue = startValue;
+    this.maxIdentCount = maxIdentCount;
+    this.counters = countersForInteger(caseInsensitive, startValue);
     this.returnedIdents = [];
     this.reservedIdents = new Set();
     this.identChar = identChar.bind(null, caseInsensitive);
     this.increment = increment.bind(null, caseInsensitive);
   }
+
+  get currentValue(): number {
+    return integerForCounters(this.counters, this.caseInsensitive);
+  }
+
   nextIdent(): string {
     if (this.returnedIdents.length > 0) {
       return this.returnedIdents.pop()!;
     }
     let ident: string;
     while (this.isReserved(ident = this.generateNextIdent())) {}
+    if (this.maxIdentCount !== Infinity) {
+      let identCount = this.currentValue - this.startValue;
+      if (identCount > this.maxIdentCount) {
+        throw new Error(`Too many identifiers were generated (Max: ${this.maxIdentCount}).`);
+      }
+    }
     return this.lastIdent = ident;
   }
   private generateNextIdent() {
@@ -81,14 +149,39 @@ export class IdentGenerator {
   }
 }
 
+interface IdentGeneratorOptions<Namespace extends string = string> {
+  namespaces: Array<Namespace>;
+  /**
+   * Whether to use case-insensitive identifiers.
+   */
+  caseInsensitive?: boolean;
+  /**
+   * Sets the starting value. This is a standard base-10 number that is
+   * converted to a corresponding identifier.
+   *
+   * An integer greater than or equal to 1.
+   * Defaults to 1.
+   */
+  startValue?: number;
+  /**
+   * How many identifiers each ident generator should be allowed to produce.
+   * Note that if any of the produced identifiers are reserved, the actual
+   * number of identifiers returned will be less than the max.
+   * Defaults to Infinity.
+   */
+  maxIdentCount?: number;
+}
+
 export class IdentGenerators<Namespace extends string = string> {
   namespaces: {
     [name: string]: IdentGenerator;
   };
-  constructor(caseInsensitive: boolean, ...namespaces: Array<Namespace>) {
+  constructor(options: IdentGeneratorOptions<Namespace>) {
     this.namespaces = {};
-    namespaces.forEach(ns => {
-      this.namespaces[ns] = new IdentGenerator(caseInsensitive);
+    options.namespaces.forEach(ns => {
+      this.namespaces[ns] = new IdentGenerator(!!options.caseInsensitive,
+                                               options.startValue || 1,
+                                               options.maxIdentCount || Infinity);
     });
   }
   /**

packages/opticss/test/optimizations/rewrite-idents-test.ts

@@ -18,6 +18,7 @@ import {
 import * as path from "path";
 import { documentToString } from "resolve-cascade";
 
+import { OptiCSSOptions } from "../../src/OpticssOptions";
 import {
   IdentGenerator,
   IdentGenerators,
@@ -27,9 +28,14 @@ import {
   testOptimizationCascade,
 } from "../util/assertCascade";
 
-function testRewriteIdents(templateRewriteOpts: RewritableIdents, ...stylesAndTemplates: Array<string | TestTemplate>): Promise<CascadeTestResult> {
+function testRewriteIdents(templateRewriteOpts: RewritableIdents & Pick<OptiCSSOptions, "identifiers">, ...stylesAndTemplates: Array<string | TestTemplate>): Promise<CascadeTestResult> {
+  let identifiers = templateRewriteOpts.identifiers;
+  delete templateRewriteOpts.identifiers;
   return testOptimizationCascade(
-    { only: ["rewriteIdents"] },
+    {
+      only: ["rewriteIdents"],
+      identifiers,
+    },
     {
       rewriteIdents: templateRewriteOpts,
       analyzedAttributes: [],
@@ -40,22 +46,51 @@ function testRewriteIdents(templateRewriteOpts: RewritableIdents, ...stylesAndTe
 
 @suite("Rewrite idents")
 export class RewriteIdentsTest {
+  @test "Can select a starting value"() {
+    for (let startValue = 1; startValue < 20_000_000; startValue += Math.round(Math.random() * 50000)) {
+      const idGen = new IdentGenerator(false, startValue);
+      assert.equal(idGen.currentValue, startValue);
+      idGen.nextIdent();
+      assert.equal(idGen.currentValue, startValue + 1);
+    }
+  }
+  @test "can specify a max number of idents to generate"() {
+    let startValue = Math.round(Math.random() * 20_000_000);
+    let maxIdentCount = 100;
+    const idGen = new IdentGenerator(false, startValue, maxIdentCount);
+    for (let i = 0; i < maxIdentCount; i++) {
+      idGen.nextIdent();
+    }
+    assert.throws(() => {
+      idGen.nextIdent();
+    });
+  }
   @test "has an ident generator"() {
     const idGen = new IdentGenerator();
+    let currentValue = 1;
+    assert.equal(idGen.currentValue, currentValue++);
     assert.equal(idGen.nextIdent(), "a");
+    assert.equal(idGen.currentValue, currentValue++);
     assert.equal(idGen.nextIdent(), "b");
+    assert.equal(idGen.currentValue, currentValue++);
     for (let i = 2; i < 52; i++) {
       idGen.nextIdent();
+      currentValue++;
     }
     assert.equal(idGen.nextIdent(), "a0");
+    assert.equal(idGen.currentValue, currentValue++);
     for (let i = 1; i < 64; i++) {
       idGen.nextIdent();
+      currentValue++;
     }
     assert.equal(idGen.nextIdent(), "b0");
+    assert.equal(idGen.currentValue, currentValue++);
     for (let i = 1; i < 64 * 51; i++) {
       idGen.nextIdent();
+      currentValue++;
     }
     assert.equal(idGen.nextIdent(), "a00");
+    assert.equal(idGen.currentValue, currentValue++);
   }
 
   @test "has an case-insensitive ident generator"() {
@@ -84,7 +119,7 @@ export class RewriteIdentsTest {
   }
 
   @test "ident generator set"() {
-    const idGens = new IdentGenerators(false, "id", "class", "state");
+    const idGens = new IdentGenerators({namespaces: ["id", "class", "state"]});
     assert.equal(idGens.nextIdent("id"), "a");
     assert.equal(idGens.nextIdent("class"), "a");
     assert.equal(idGens.nextIdent("state"), "a");
@@ -93,7 +128,7 @@ export class RewriteIdentsTest {
     assert.equal(idGens.nextIdent("class"), "b");
     assert.equal(idGens.nextIdent("state"), "b");
     try {
-      const errorProneGen = new IdentGenerators<string>(false, "id", "class", "state");
+      const errorProneGen = new IdentGenerators<string>({namespaces: ["id", "class", "state"]});
       errorProneGen.nextIdent("foo");
       assert.fail("error expected");
     } catch (e) {
@@ -234,4 +269,55 @@ export class RewriteIdentsTest {
       }
     });
   }
+  @test "can configure ident start value"() {
+    let css1 = `
+      #id3 { border-width: 2px; }
+      #a { color: blue; }
+      .a { color: red; }
+      #id2 { width: 50%; }
+      .thing2 { border: 1px solid blue; }
+      .thing3 { background: red; }
+      div { background-color: white; }
+      #id3.thing4 { border-color: black; }
+    `;
+    let template = new TestTemplate("test", clean`
+      <div class="(thing3 | a)" id="(a | id2)"></div>
+      <div class="(--- | thing2 | thing4)" id="id3"></div>
+    `);
+    return testRewriteIdents({ id: true, class: true, identifiers: {startValue: 100, maxCount: 100} }, css1, template).then(result => {
+      // debugResult(css1, result);
+      assert.equal(result.optimization.output.content, `
+      #aL { border-width: 2px; }
+      #aM { color: blue; }
+      .aL { color: red; }
+      #aN { width: 50%; }
+      .aM { border: 1px solid blue; }
+      .aN { background: red; }
+      div { background-color: white; }
+      #aL.aO { border-color: black; }
+    `);
+    });
+  }
+  @test async "rejects if there's not enough idents"() {
+    let css1 = `
+      #id3 { border-width: 2px; }
+      #a { color: blue; }
+      .a { color: red; }
+      #id2 { width: 50%; }
+      .thing2 { border: 1px solid blue; }
+      .thing3 { background: red; }
+      div { background-color: white; }
+      #id3.thing4 { border-color: black; }
+    `;
+    let template = new TestTemplate("test", clean`
+      <div class="(thing3 | a)" id="(a | id2)"></div>
+      <div class="(--- | thing2 | thing4)" id="id3"></div>
+    `);
+    try {
+      await testRewriteIdents({ id: true, class: true, identifiers: {startValue: 100, maxCount: 2} }, css1, template);
+      throw new Error("Didn't reject promise");
+    } catch (e) {
+      assert.equal(e.message, "Too many identifiers were generated (Max: 2).");
+    }
+  }
 }