#286: Remove percent sign for zero-values percentages when safe #361

RubaXa · 2017-10-31T15:48:40Z

Короче, суть: isEqualValuePair — отстой и решает проблему только частично, потому что дальше код всё равно проходит через require('css-tree').translate, который делает всё правильно и сохраняет единицы измерения, но... а данном случае они не нужны, единицы должен отбрасывать CSSO.

Поэтому мне кажется, сравнивать через isEqualValuePair не такой уж и отстой, осталось только как-то добавить в 4-restructShorthand.js, что если свойство из MAIN_PROPERTY и оно === '0', то поменять (или заменить) тип ноды на Number.

Ну или «Миша, всё не очень, давай по новой»...

coveralls · 2017-10-31T15:55:06Z

Coverage increased (+0.0005%) to 99.368% when pulling 38f8d03 on RubaXa:ugly-zero-value-workaround into c360782 on css:master.

RubaXa · 2017-11-01T06:29:28Z

lib/restructure/4-restructShorthand.js

+        // Zero-value workaround
+        (left.node.value === '0' && left.node.value === right.node.value) ||
+        // Because `CSSTree` returning `0%`, `0px` and etc, but must just `0`
+        (translate(left.node) === translate(right.node))


Всё же мне кажется, что тут совсем не нужен CSSTree, а проверка должна быть такой:

return ( (left.node.value === right.node.value) && (left.node.value === '0' || left.node.type === right.node.type) );

Думаю нужно в CSSTree реализовать функцию compare(node, node) ;)
Сравнивать через translate не очень круто в целом

compare(node, node) всё же нет, ноды-то разные, просто ноль исключение.

lahmatiy · 2017-11-01T13:29:03Z

Привет! Спасибо за PR!
Но решение не в том месте. Проблема не только с TRLB свойствами, а в целом – остаются проценты со значением 0, что местами мешает мержу.

// Because `CSSTree` returning `0%`, `0px` and etc, but must just `0`

CSSTree возвращает то, что написали в CSS ;) А вот CSSO уже выкидывает ненужное. Собственно он откидывает единицы измерения у дименшенов с нулем, если эта единица измерения про длину – это относительно несложно. А вот процент откинуть сложнее, для этого нужно знать про что этот процент про длину, а он может быть про что угодно.
Было бы правильно решить проблему "раз и навсегда", использовав возможность CSSTree по вычислению назначения ноды в значении (то есть ее роль). Я тут понял, что просто забыл про этот issue, когда его создавали еще не было CSSTree как отдельного проекта, и матчинга в нем не было – теперь есть :)
Тем не менее матчинг пока мало поможет. Потому как сложно определить, что процент про длину: в синтаксисах он указывается, например для длины, [<length> || <percentage> || auto]. То есть нужно искать в каких группах встречается percentage вместе с length и если матчится группа, то процент засчитывать про длину. Но на данный момент это нетривиальная задача.
Думаю более простым решением будет закостылять набор свойств (типа margin/padding/width/height/etc), и убирать процент хотя бы в них. Возможно так и нужно пока сделать. Другими словами, нужно: добавить в replace новый обработчик на Percent, который конвертит ноду в Number, если value равно нулю и this.property.name одно из списка. Список можно подобрать из словарей CSSTree (см в секции Used by элементы вида <'property-name'> – с кавычками это свойства, без – типы):

Если откинуть проценты у нулей, то изменения в 4-restructShorthand будут не нужны.

lahmatiy · 2017-11-01T13:33:06Z

test/fixture/compress/restructure.margin/4.min.css

@@ -0,0 +1 @@
+.a,.b{margin:0%}


Правильный ответ должен быть margin:0

RubaXa · 2017-11-01T13:33:35Z

@lahmatiy Всё так, но я считаю, CSSTree всё правильно сделал, оптимизировать и тем более что-то отбрасывать задача csso, так что то по-моему тут всё же надо просто выпилить обработку через CSSTree и restructShorthand.js добавить логику для нулей, как и сделано с TLBR

lahmatiy · 2017-11-01T21:15:34Z

Я наверное плохо донес мысль

добавить в replace новый обработчик на Percent, который конвертит ноду в Number, если value равно нулю и this.property.name одно из списка

Имелось ввиду сделать аналог https://github.com/css/csso/blob/master/lib/replace/Dimension.js, но для Percent – тогда restructShorthand трогать не придется, он и так справится

coveralls · 2017-11-02T07:18:33Z

Coverage increased (+0.003%) to 99.371% when pulling 5890c1f on RubaXa:ugly-zero-value-workaround into c360782 on css:master.

RubaXa · 2017-11-02T07:18:43Z

@lahmatiy аааа, только вот если добавить обработку Percent, взрываются тесты, потому что реплейсер дляcolor проверяет, что аргументы должны быть гомогенными, а как понять, что это значение именно value от margin я не понял, у ноды нет ссылки на parent (ну либо я слеп), поэтому сделал обработку декларации:
https://github.com/css/csso/pull/361/files#diff-8392cfbdaad322e9a3d015e07457327b

ps так себе из меня помошник ;]

coveralls · 2017-11-02T07:21:25Z

Coverage increased (+0.003%) to 99.371% when pulling 5890c1f on RubaXa:ugly-zero-value-workaround into c360782 on css:master.

coveralls · 2017-11-02T07:33:55Z

Coverage increased (+0.005%) to 99.372% when pulling d41462a on RubaXa:ugly-zero-value-workaround into c360782 on css:master.

lahmatiy · 2017-11-02T07:45:37Z

только вот если добавить обработку Percent, взрываются тесты

поэтому нужно делать только для определенных свойств и если это не внутри функции

а как понять, что это значение именно value от margin я не понял, у ноды нет ссылки на parent

Я не просто так отправлял на, там это есть: https://github.com/css/csso/blob/master/lib/replace/Dimension.js#L39 ;)
Внутри функции волкера: this.declaration ссылка на Declaration (если внутри декларации), this.function – если внутри функции (подробнее).

RubaXa · 2017-11-02T08:09:01Z

@lahmatiy блин, видно что-то я не так сделал и в прошлый раз у меня там declaration был null, а сейчас да, вижу :|

lahmatiy · 2017-11-02T07:48:21Z

lib/replace/Declaration.js

@@ -0,0 +1,21 @@
+var INDENT_PROPS = ['margin', 'padding'].reduce(function(ind, prop) {


А как же другие свойства?

Список можно подобрать из словарей CSSTree (см в секции Used by элементы вида <'property-name'> – с кавычками это свойства, без – типы):

https://csstree.github.io/docs/syntax.html#Type:length

https://csstree.github.io/docs/syntax.html#Type:length-percentage&Type:length

И лучше списком указывать свойства, и проще и наглядней чем генерация

Странно, а почему в этом списке нет left, top, но есть position?

Аааа, кажись понял ;]

RubaXa · 2017-11-02T08:47:21Z

lib/replace/Dimension.js


    node.value = value;

-    if (value === '0' && this.declaration !== null && this.atrulePrelude === null) {
+    if (node.type === 'Percentage') {
+        if (PERCENTAGE_LENGTH_DELC.hasOwnProperty(decl) || PERCENTAGE_LENGTH_FN.hasOwnProperty(fnName)) {


@lahmatiy оно?

coveralls · 2017-11-02T08:54:40Z

Coverage increased (+0.004%) to 99.371% when pulling 0e5166e on RubaXa:ugly-zero-value-workaround into c360782 on css:master.

lahmatiy · 2017-11-02T10:57:37Z

Здорово, то что нужно!
Только не стоит объединять обработчики в один. Во-первых, так сложнее в последствии искать где делает трансформация. Во-вторых, в функции появляется ненужное ветвление и она становится полиморфной. Давай сделаем оставим два модуля Dimension.js & Percentage.js?

RubaXa · 2017-11-02T10:59:18Z

@lahmatiy да не вопрос, только даже если тебе понравиться, не мэржди это, слишком много мусора в комитах.

RubaXa · 2017-11-02T11:04:45Z

Готово ;]

coveralls · 2017-11-02T11:06:01Z

Coverage increased (+0.005%) to 99.373% when pulling 362ca2b on RubaXa:ugly-zero-value-workaround into c360782 on css:master.

lahmatiy · 2017-11-02T11:05:35Z

lib/replace/Percentage.js

@@ -0,0 +1,80 @@
+var packNumber = require('./Number').pack;
+var PERCENTAGE_LENGTH_DELC = {


PERCENTAGE_LENGTH_DELC -> PERCENTAGE_LENGTH_PROPERTY

lahmatiy · 2017-11-02T11:05:58Z

lib/replace/Percentage.js

+    'transform-origin': true,
+    'word-spacing': true
+};
+var PERCENTAGE_LENGTH_FN = {


PERCENTAGE_LENGTH_FN -> PERCENTAGE_LENGTH_FUNCTION

lahmatiy · 2017-11-02T11:07:12Z

lib/replace/Percentage.js

+
+    node.value = value;
+
+    if (PERCENTAGE_LENGTH_DELC.hasOwnProperty(decl) || PERCENTAGE_LENGTH_FN.hasOwnProperty(fnName)) {


Нужно поменять местами условия, сначала проверяем на ноль, а потом контекст. Проверка по словарю гораздо дороже, и нужна только для нулей, которые в целом не так часто встречаются.

Кста, я в своё время сравнивал hasOwnProperty vs obj[name] !== void 0 и второй выиграл, а Егоров (оочень давно) говорил мне, что v8 строгое сравнение с void 0 по особому выполняет, поэтому и быстро.

lahmatiy · 2017-11-02T11:07:47Z

lib/replace/Percentage.js

+    node.value = value;
+
+    if (PERCENTAGE_LENGTH_DELC.hasOwnProperty(decl) || PERCENTAGE_LENGTH_FN.hasOwnProperty(fnName)) {
+        // Zero-value workaround


Комментарий не нужен – это решение, а не workaround ;)

lahmatiy · 2017-11-02T11:12:53Z

Было бы круто добавить пару тестов – на проверку свойств в которых делается подмена, и проверку функций. То есть:

.test {
    width: 0%;
    height: 0%;
    ...
}

если тебе понравиться, не мэржди это, слишком много мусора в комитах.

Для этого есть Squash and merge – все комиты объединятся в один ;)

coveralls · 2017-11-02T11:26:11Z

Coverage increased (+0.005%) to 99.373% when pulling 3ce2933 on RubaXa:ugly-zero-value-workaround into c360782 on css:master.

RubaXa · 2017-11-02T11:32:48Z

Было бы круто добавить пару тестов

Это да, это тоже одна из причин не брать ветку, а squash нафиг, название ветки, тоже надо сменить ;]

Обновил PR, добавил проверку на null

PS Слушай, а ведь можно выкинуть проверку на hasOwnProp совсем и перейти на кода генерацию, просто развернуть словарь в функцию, типа:

var PERCENTAGE_LENGTH_DELC = {...};
var isPercentageLengthDecl = generateIsMethodByMap(PERCENTAGE_LENGTH_DELC);

function generateByDict(dict) {
  var body = Object.keys(dict).map(function(key) {
      return 'case ' + JSON.stringify(key) + ': return true;';
  }).join('\n');

  return Function('prop', 'switch (prop){' + body + ';} return false;');
}

м? я вот люблю кодогенерацию ;]

lahmatiy · 2017-11-02T13:11:18Z

Я думал о таком решении, да. Имхо лучше генерировать код статически, чем динамически.
Но в любом случае, на данный момент кодогенерация это оверкилл.

coveralls · 2017-11-02T13:18:55Z

Coverage increased (+0.005%) to 99.373% when pulling f314bfb on RubaXa:ugly-zero-value-workaround into c360782 on css:master.

lahmatiy · 2017-11-02T13:12:25Z

lib/replace/Percentage.js

+
+module.exports = function compressPercentage(node, item) {
+    var value = packNumber(node.value, item);
+    var decl = this.declaration !== null ? this.declaration.property : null;


decl -> property

lahmatiy · 2017-11-02T13:22:23Z

Тесты добавишь? :)

RubaXa · 2017-11-02T13:25:16Z

Конечно, только скажи куда или по какому принципу?
Свойств много, все они разные.

lahmatiy · 2017-11-02T13:57:22Z

Я тут обнаружил, что для height, max-height, width и max-width нельзя удалять %
clean-css/clean-css#957
Хотя у тебя почему то их и нет в списке...

Тест с перечнем всех свойств и функций, для которых убираем процент

RubaXa · 2017-11-02T14:08:32Z

Тест с перечнем всех свойств и функций, для которых убираем процент
окей

Я тут обнаружил, что для height, max-height, width и max-width нельзя удалять %
clean-css/clean-css#957

Чест говоря, это из серии css is awesome

RubaXa · 2017-11-02T14:09:38Z

Хотя если подумать, это даже логично :|

RubaXa · 2017-11-02T14:42:05Z

#363

css#286: Zero-value workaround for pading, margin and etc

38f8d03

RubaXa commented Nov 1, 2017

View reviewed changes

lahmatiy reviewed Nov 1, 2017

View reviewed changes

+ Declaration: Zero-value normalization for margin/padding

f16c6ad

RubaXa changed the title ~~#286: Zero-value workaround for pading, margin and etc~~ #286: Zero-value workaround for pading and margin Nov 2, 2017

* typo

5890c1f

* without split

d41462a

lahmatiy reviewed Nov 2, 2017

View reviewed changes

RubaXa added 3 commits November 2, 2017 11:40

- Declaration and * Dimension

8bd4649

* border

ac35272

* upd

0e5166e

RubaXa commented Nov 2, 2017

View reviewed changes

+ Percentage replacer

362ca2b

lahmatiy reviewed Nov 2, 2017

View reviewed changes

* null check

3ce2933

* ABBR -> FULLNAME

f314bfb

lahmatiy reviewed Nov 2, 2017

View reviewed changes

lahmatiy changed the title ~~#286: Zero-value workaround for pading and margin~~ #286: Remove percentage for zero-values when safe Nov 2, 2017

lahmatiy changed the title ~~#286: Remove percentage for zero-values when safe~~ #286: Remove percent sign for zero-values percentages when safe Nov 2, 2017

RubaXa closed this Nov 2, 2017

		@@ -0,0 +1,21 @@
		var INDENT_PROPS = ['margin', 'padding'].reduce(function(ind, prop) {

		@@ -0,0 +1,80 @@
		var packNumber = require('./Number').pack;
		var PERCENTAGE_LENGTH_DELC = {


		node.value = value;

		if (PERCENTAGE_LENGTH_DELC.hasOwnProperty(decl) \|\| PERCENTAGE_LENGTH_FN.hasOwnProperty(fnName)) {

		@@ -0,0 +1 @@
		.a,.b{margin:0%}

#286: Remove percent sign for zero-values percentages when safe #361

#286: Remove percent sign for zero-values percentages when safe #361

Conversation

RubaXa commented Oct 31, 2017

coveralls commented Oct 31, 2017 • edited

Choose a reason for hiding this comment

lahmatiy Nov 1, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lahmatiy commented Nov 1, 2017 • edited

Choose a reason for hiding this comment

RubaXa commented Nov 1, 2017 • edited

lahmatiy commented Nov 1, 2017

coveralls commented Nov 2, 2017 • edited

RubaXa commented Nov 2, 2017 • edited

coveralls commented Nov 2, 2017 • edited

coveralls commented Nov 2, 2017 • edited

lahmatiy commented Nov 2, 2017

RubaXa commented Nov 2, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

coveralls commented Nov 2, 2017 • edited

lahmatiy commented Nov 2, 2017

RubaXa commented Nov 2, 2017

RubaXa commented Nov 2, 2017

coveralls commented Nov 2, 2017 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

lahmatiy commented Nov 2, 2017

coveralls commented Nov 2, 2017 • edited

RubaXa commented Nov 2, 2017

lahmatiy commented Nov 2, 2017

coveralls commented Nov 2, 2017 • edited

Choose a reason for hiding this comment

lahmatiy commented Nov 2, 2017

RubaXa commented Nov 2, 2017

lahmatiy commented Nov 2, 2017

RubaXa commented Nov 2, 2017

RubaXa commented Nov 2, 2017

RubaXa commented Nov 2, 2017

coveralls commented Oct 31, 2017 •

edited

lahmatiy Nov 1, 2017 •

edited

lahmatiy commented Nov 1, 2017 •

edited

RubaXa commented Nov 1, 2017 •

edited

coveralls commented Nov 2, 2017 •

edited

RubaXa commented Nov 2, 2017 •

edited

coveralls commented Nov 2, 2017 •

edited

coveralls commented Nov 2, 2017 •

edited

coveralls commented Nov 2, 2017 •

edited

coveralls commented Nov 2, 2017 •

edited

coveralls commented Nov 2, 2017 •

edited

coveralls commented Nov 2, 2017 •

edited