Less.js: ΠŸΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠ΅ использованиС парсСра

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 17 янв. 2016  Β·  5ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: less/less.js

ВсСм ΠΏΡ€ΠΈΠ²Π΅Ρ‚!
Π― Ρ€Π°Π±ΠΎΡ‚Π°ΡŽ Π½Π°Π΄ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ΠΎΠΌ less2sass для своСй бакалаврской диссСртации, ΠΏΠΎΠ·ΠΆΠ΅ ΠΎΠ½ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΡΡ‚Π°Ρ‚ΡŒ ΠΊΠΎΠ½Π²Π΅Ρ€Ρ‚Π΅Ρ€ΠΎΠΌ sass2less. Π― ΠΈΡ‰Ρƒ способ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ AST ΠΈΠ· мСньшСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°. Π― экспСримСнтировал со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌ ΠΊΠΎΠ΄ΠΎΠΌ:

var parser = new(less.Parser)({}, {contents: {}}, {});
var contents = ".foo {\
  background: #900;\
}\
<strong i="7">@import</strong> \"import/this-is-valid.less\";";
parser.parse(contents, function (e, tree) {
   console.log(JSON.stringify(tree, null, 2));
});

Π― ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽ AST ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ, Ссли я Π½Π΅ ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ„Π°ΠΉΠ» less. Из ΠΊΠΎΠ΄Π° я понял, Ρ‡Ρ‚ΠΎ синтаксичСский Π°Π½Π°Π»ΠΈΠ·Π°Ρ‚ΠΎΡ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ с ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ создаСтся importManager, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π½ΡƒΠΆΠ΅Π½ контСкст Π² качСствС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° ΠΈ Ρ‚. Π”. ΠœΠΎΠ³Ρƒ Π»ΠΈ я ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ подсказку, ΠΊΠ°ΠΊ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ AST мСньшСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, Ссли я знаю Π΅Π³ΠΎ исходный Ρ„Π°ΠΉΠ»?

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Бпасибо Π²Π°ΠΌ, рСбята. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Ρ€Π΅ΡˆΠ΅Π½Π° :) Π― ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽ здСсь фактичСский ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ для получСния AST, Π½Π° случай, Ссли ΠΊΡ‚ΠΎ-Ρ‚ΠΎ столкнСтся с Ρ‚Π΅ΠΌ ΠΆΠ΅ прСпятствиСм ΠΈ столкнСтся с этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ.

var less = require('less')
  , fs = require('fs')
  , path = require('path');

var src = './test_import.less'; //some less source file
var result = less.parse(fs.readFileSync(src).toString(), {
  filename: path.resolve(src)
}, function(e, tree) {
  console.log(JSON.stringify(tree, null, 2));
});

ВсС 5 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π­Ρ‚ΠΎ ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ? https://github.com/matthew-dean/postcss-less/blob/master/lib/render.js

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΠ½Π΅ ΡƒΠ΄Π°Π»ΠΎΡΡŒ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΡ†Π΅Π½Π΅Π½Π½ΠΎΠ΅ Π΄Π΅Ρ€Π΅Π²ΠΎ AST, ΠΈ я ΡΡ‡ΠΈΡ‚Π°ΡŽ, Ρ‡Ρ‚ΠΎ ΠΎΡ†Π΅Π½Π΅Π½Π½ΠΎΠ΅ Π΄Π΅Ρ€Π΅Π²ΠΎ содСрТит ссылку Π½Π° Π½Π΅ΠΎΡ†Π΅Π½Π΅Π½Π½ΠΎΠ΅ Π΄Π΅Ρ€Π΅Π²ΠΎ.

Π― ΠΏΠΎΠ»ΡƒΡ‡Π°ΡŽ AST ΠΎΠ±Ρ€Π°Ρ‚Π½ΠΎ, Ссли я Π½Π΅ ΠΏΡ‹Ρ‚Π°ΡŽΡΡŒ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Π΄Ρ€ΡƒΠ³ΠΎΠΉ Ρ„Π°ΠΉΠ» less.

Для ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° Π½Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ Ρ€Π°Π·Π½ΠΈΡ†Ρ‹, просто ΡƒΠ±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Π½Π΅ пропустили:

Π° Π·Π°Ρ‚Π΅ΠΌ установитС ΠΏΠΎΠ»Π΅ ΠΈΠΌΠ΅Π½ΠΈ Ρ„Π°ΠΉΠ»Π° Π² ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°Ρ… ΠΊΠ°ΠΊ имя основного Ρ„Π°ΠΉΠ»Π°. less Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒ всю ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΡƒ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π°.

Π² ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½ΠΎΠΌ использовании (ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ см. https://github.com/less/less.js/issues/2342#issuecomment-67596931).

Ρ‡Ρ‚ΠΎ синтаксичСский Π°Π½Π°Π»ΠΈΠ·Π°Ρ‚ΠΎΡ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ с ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΎΠΌ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ создаСтся importManager, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌΡƒ Π½ΡƒΠΆΠ΅Π½ контСкст Π² качСствС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° ΠΈ Ρ‚. Π΄.

НС совсСм. importManager (ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ) являСтся Ρ‡Π°ΡΡ‚ΡŒΡŽ Π°Π½Π°Π»ΠΈΠ·Π°Ρ‚ΠΎΡ€Π°, ΠΈ вСсь ΠΈΠΌΠΏΠΎΡ€Ρ‚ (ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ) обрабатываСтся Π²Π½ΡƒΡ‚Ρ€ΠΈ самого Π°Π½Π°Π»ΠΈΠ·Π°Ρ‚ΠΎΡ€Π°.

Бпасибо Π²Π°ΠΌ, рСбята. ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ° Ρ€Π΅ΡˆΠ΅Π½Π° :) Π― ΠΏΠΎΠΌΠ΅Ρ‰Π°ΡŽ здСсь фактичСский ΠΊΠΎΠ΄, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ для получСния AST, Π½Π° случай, Ссли ΠΊΡ‚ΠΎ-Ρ‚ΠΎ столкнСтся с Ρ‚Π΅ΠΌ ΠΆΠ΅ прСпятствиСм ΠΈ столкнСтся с этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ.

var less = require('less')
  , fs = require('fs')
  , path = require('path');

var src = './test_import.less'; //some less source file
var result = less.parse(fs.readFileSync(src).toString(), {
  filename: path.resolve(src)
}, function(e, tree) {
  console.log(JSON.stringify(tree, null, 2));
});

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π»ΠΈ, Ρ‡Ρ‚ΠΎ функция синтаксичСского Π°Π½Π°Π»ΠΈΠ·Π° ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΡ‚ΡŒ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΡŽΡ‰ΠΈΠΉ ΠΈΠΌΠΏΠΎΡ€Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅? Π’ ΠΌΠΎΠ΅ΠΌ случаС Ρƒ мСня Π΅ΡΡ‚ΡŒ особыС ΠΏΡ€Π°Π²ΠΈΠ»Π° для ΠΏΡƒΡ‚Π΅ΠΉ ΠΈΠΌΠΏΠΎΡ€Ρ‚Π°, поэтому Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΠΉ процСсс ΠΈΠΌΠΏΠΎΡ€Ρ‚Π° less.js Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Π½. МоТСм Π»ΠΈ ΠΌΡ‹ просто ΠΏΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚ΡŒ строку Π² AST Π±Π΅Π· ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΠΎΡ†Π΅Π½ΠΊΠΈ?

Π― просто ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Π» исходный ΠΊΠΎΠ΄ ΠΈ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ», Ρ‡Ρ‚ΠΎ ΠΌΠΎΠ³Ρƒ ΠΏΠ΅Ρ€Π΅Π΄Π°Ρ‚ΡŒ { processImports: false } Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ процСсс ΠΈΠΌΠΏΠΎΡ€Ρ‚Π°, Ρƒ мСня это Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ :)

less.parse(content, { processImports: false }, (e, tree) => {
  if (e) { return console.error(e) };
  return console.log(tree);
})

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ