Pobierz listę mniej zmiennych za pomocą less.js

Question

Używam strony less.js. po stronie klienta Czy istnieje sposób na uzyskanie wszystkich zmiennych z mojego pliku less. Wiem, jak zmodyfikować zmienne:

less.modifyVars({ 
    "@var": "#fff" 
}); 

Ale chcę, aby wszystkie z nich, jak (nie działa):

var variables = less.getVars(); 

Answer 1

To będzie odpowiedź niekonwencjonalny jak wydaje się, że dane te nie są ujawniane publicznie jako część interfejsu API przeglądarki.

---

tl; dr

• Zapisz lokalna kopia pliku less.js.

• Dodaj tę definicję funkcji gdzieś

  function exposeVars(root) { 
      var r=root._variables,n=Object.keys(r),m={} 
      for(var k of n){m[k]=r[k].value} 
       less.variables = m; 
  } 
  

• Dodaj następujące połączenia exposeVars(evaldRoot) tuż przed return result na linii ~ 2556.

• Teraz less.variables zawiera wszystkie zmienne z Twojego pliku.

Oświadczenie: To nie jest dobry pomysł! W porządku, jeśli po prostu bawisz się, debugujesz lub testujesz coś, ale nie polegaj na tym hackerze na nic poważnego!

---

Podstawowym celem tutaj było znaleźć punkt w źródle, gdzie .less pliki zostały przekształcone drzewo składniowe (lub innej struktury formalnej).

Wskakując prosto do źródła, znalazłem klasę ParseTree. Rozsądnym jest przypuszczenie, że będzie zawierał wynik analizy mniejszego pliku.

Napisałem szybki plik testowy i dodałem go do przeglądarki z odpowiednim znacznikiem. Wygląda to tak:

@myvar: red; 
@othervar: 12px; 

body { 
    padding: @othervar; 
    background: @myvar; 
} 

Pobrałem lokalną kopię less.js i dodaje punkt przerwania dodany do linii 2556.

ja miał grzebać w zakresie lokalnym, aby zobaczyć, co było dostępne i znaleźć zmienne w obiekcie o nazwie evaldRoot.

evaldRoot = { 
    _variables: { 
    @myvar: { 
     name: '@myvar', 
     value: Color 
    }, 
    @othervar: { 
     name: '@othervar', 
     value: Dimension 
    } 
    } 
} 

Następnym zadaniem było ustalenie, gdzie znajdują się te dane. Wygląda na to, że zmienna evaldRoot jest używana do generowania wynikowego CSS (co ma sens, ponieważ zawiera informacje takie jak zmienne).

if (options.sourceMap) { 
    sourceMapBuilder = new SourceMapBuilder(options.sourceMap); 
    result.css = sourceMapBuilder.toCSS(evaldRoot, toCSSOptions, this.imports); 
} else { 
    result.css = evaldRoot.toCSS(toCSSOptions); 
} 

Cokolwiek się zdarzy, zmienne wychodzi z zakresu po to służy do generowania ciąg CSS jako result.css.

Aby odsłonić te zmienne, skrypt wymaga niewielkiej modyfikacji. Będziesz musiał publicznie ujawnić te zmienne. Oto przykład tego.

function exposeVars(root) { 
    var varNames = Object.keys(root._variables); 

    var variables = varNames.reduce(function(varMap, varName) { 
    varMap[varName] = root._variables[varName].value; 
    }, {}); 

    less.variables = variables; 
} 

Można to dodać bezpośrednio przed instrukcją return z punktem przerwania.

exposeVars(evaldRoot); 
return result; 

Teraz zmienne będą dostępne w name: value obiektu na światowym less obiektu.

Można nawet zmodyfikować funkcję wystawiać na powrót zmienne z wywołania less.getVars(). Tak jak twoja początkowa sugestia.

function exposeVars(root) { 
    // ... 
    less.getVars = function() { 
    return variables; 
    }; 
}