From 5a8133cdb54ad416b16bf32295d6d12336e69809 Mon Sep 17 00:00:00 2001 From: Reto Kaiser Date: Mon, 11 Aug 2014 09:39:00 +0200 Subject: [PATCH 1/6] Move less compilation into function --- library/CM/Asset/Css.php | 47 +++++++++++++++++++++++++--------------- 1 file changed, 29 insertions(+), 18 deletions(-) diff --git a/library/CM/Asset/Css.php b/library/CM/Asset/Css.php index 413140de2..3da70974f 100644 --- a/library/CM/Asset/Css.php +++ b/library/CM/Asset/Css.php @@ -15,9 +15,9 @@ class CM_Asset_Css extends CM_Asset_Abstract { private $_children = array(); /** - * @param CM_Frontend_Render $render - * @param string|null $content - * @param string|null $prefix + * @param CM_Frontend_Render $render + * @param string|null $content + * @param string|null $prefix */ public function __construct(CM_Frontend_Render $render, $content = null, $prefix = null) { $this->_render = $render; @@ -77,26 +77,37 @@ private function _compile($content, $compress = null) { } $cache = new CM_Cache_Storage_File(); if (false === ($contentTransformed = $cache->get($cacheKey))) { - $lessCompiler = new lessc(); - $lessCompiler->registerFunction('image', function ($arg) use ($render) { - /** @var CM_Frontend_Render $render */ - list($type, $delimiter, $values) = $arg; - return array('function', 'url', array('string', $delimiter, array($render->getUrlResource('layout', 'img/' . $values[0])))); - }); - $lessCompiler->registerFunction('urlFont', function ($arg) use ($render) { - /** @var CM_Frontend_Render $render */ - list($type, $delimiter, $values) = $arg; - return array($type, $delimiter, array($render->getUrlStatic('/font/' . $values[0]))); - }); - if ($compress) { - $lessCompiler->setFormatter('compressed'); - } - $contentTransformed = $lessCompiler->compile($this->_getMixins() . $content); + $contentTransformed = $this->_compileLess($content, $compress); $cache->set($cacheKey, $contentTransformed); } return $contentTransformed; } + /** + * @param string $content + * @param bool $compress + * @return string + */ + private function _compileLess($content, $compress) { + $render = $this->_render; + + $lessCompiler = new lessc(); + $lessCompiler->registerFunction('image', function ($arg) use ($render) { + /** @var CM_Frontend_Render $render */ + list($type, $delimiter, $values) = $arg; + return array('function', 'url', array('string', $delimiter, array($render->getUrlResource('layout', 'img/' . $values[0])))); + }); + $lessCompiler->registerFunction('urlFont', function ($arg) use ($render) { + /** @var CM_Frontend_Render $render */ + list($type, $delimiter, $values) = $arg; + return array($type, $delimiter, array($render->getUrlStatic('/font/' . $values[0]))); + }); + if ($compress) { + $lessCompiler->setFormatter('compressed'); + } + return $lessCompiler->compile($this->_getMixins() . $content); + } + /** * @return string */ From 90c816c82ef6cd1478a085442c319e1f724832e3 Mon Sep 17 00:00:00 2001 From: Reto Kaiser Date: Mon, 11 Aug 2014 14:09:44 +0200 Subject: [PATCH 2/6] Adding autoprefixer step to css-asset --- library/CM/Asset/Css.php | 73 ++++++-------- tests/library/CM/Asset/CssTest.php | 157 +++++++++-------------------- 2 files changed, 79 insertions(+), 151 deletions(-) diff --git a/library/CM/Asset/Css.php b/library/CM/Asset/Css.php index 3da70974f..914c6c7cb 100644 --- a/library/CM/Asset/Css.php +++ b/library/CM/Asset/Css.php @@ -14,18 +14,25 @@ class CM_Asset_Css extends CM_Asset_Abstract { /** @var CM_Asset_Css[] */ private $_children = array(); + /** @var string|null */ + private $_autoprefixerBrowsers = null; + /** * @param CM_Frontend_Render $render * @param string|null $content - * @param string|null $prefix + * @param array|null $options */ - public function __construct(CM_Frontend_Render $render, $content = null, $prefix = null) { + public function __construct(CM_Frontend_Render $render, $content = null, array $options = null) { $this->_render = $render; if (null !== $content) { $this->_content = (string) $content; } - if (null !== $prefix) { - $this->_prefix = (string) $prefix; + $options = (array) $options; + if (isset($options['prefix'])) { + $this->_prefix = (string) $options['prefix']; + } + if (isset($options['autoprefixerBrowsers'])) { + $this->_autoprefixerBrowsers = (string) $options['autoprefixerBrowsers']; } } @@ -34,7 +41,7 @@ public function __construct(CM_Frontend_Render $render, $content = null, $prefix * @param string|null $prefix */ public function add($content, $prefix = null) { - $this->_children[] = new self($this->_render, $content, $prefix); + $this->_children[] = new self($this->_render, $content, ['prefix' => $prefix]); } public function get($compress = null) { @@ -77,7 +84,10 @@ private function _compile($content, $compress = null) { } $cache = new CM_Cache_Storage_File(); if (false === ($contentTransformed = $cache->get($cacheKey))) { - $contentTransformed = $this->_compileLess($content, $compress); + $contentTransformed = $content; + $contentTransformed = $this->_compileLess($contentTransformed, $compress); + $contentTransformed = $this->_compileAutoprefixer($contentTransformed); + $contentTransformed = trim($contentTransformed); $cache->set($cacheKey, $contentTransformed); } return $contentTransformed; @@ -108,6 +118,20 @@ private function _compileLess($content, $compress) { return $lessCompiler->compile($this->_getMixins() . $content); } + /** + * @param string $content + * @return string + */ + private function _compileAutoprefixer($content) { + $command = 'autoprefixer'; + $args = []; + if (null !== $this->_autoprefixerBrowsers) { + $args[] = '--browsers'; + $args[] = $this->_autoprefixerBrowsers; + } + return CM_Util::exec($command, null, $content); + } + /** * @return string */ @@ -115,44 +139,11 @@ private function _getMixins() { $mixins = <<< 'EOD' .gradient(@direction, @color1, @color2, @pos1: 0%, @pos2: 100%) when (@direction = horizontal) and (iscolor(@color1)) and (iscolor(@color2)) { filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=rgbahex(@color1),endColorstr=rgbahex(@color2)); - background-image: linear-gradient(left,@color1 @pos1,@color2 @pos2); - background-image: -moz-linear-gradient(left,@color1 @pos1,@color2 @pos2); - background-image: -webkit-linear-gradient(left,@color1 @pos1,@color2 @pos2); - background-image: -o-linear-gradient(left,@color1 @pos1,@color2 @pos2); - background-image: -ms-linear-gradient(left,@color1 @pos1,@color2 @pos2); - background-image: -webkit-gradient(linear,left top,right top,color-stop(@pos1, @color1),color-stop(@pos2, @color2)); + background-image: linear-gradient(to right,@color1 @pos1,@color2 @pos2); } .gradient(@direction, @color1, @color2, @pos1: 0%, @pos2: 100%) when (@direction = vertical) and (iscolor(@color1)) and (iscolor(@color2)) { filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=rgbahex(@color1),endColorstr=rgbahex(@color2)); - background-image: linear-gradient(top,@color1 @pos1,@color2 @pos2); - background-image: -moz-linear-gradient(top,@color1 @pos1,@color2 @pos2); - background-image: -webkit-linear-gradient(top,@color1 @pos1,@color2 @pos2); - background-image: -o-linear-gradient(top,@color1 @pos1,@color2 @pos2); - background-image: -ms-linear-gradient(top,@color1 @pos1,@color2 @pos2); - background-image: -webkit-gradient(linear,left top,left bottom,color-stop(@pos1, @color1),color-stop(@pos2, @color2)); -} -.box-sizing(@args...) { - box-sizing: @args; - -moz-box-sizing: @args; - -webkit-box-sizing: @args; -} -.user-select(@args...) { - user-select: @args; - -moz-user-select: @args; - -ms-user-select: @args; - -webkit-user-select: @args; -} -.transform(@args...) { - transform: @args; - -moz-transform: @args; - -o-transform: @args; - -ms-transform: @args; - -webkit-transform: @args; -} -.transition(@args...) { - transition: @args; - -moz-transition: @args; - -webkit-transition: @args; + background-image: linear-gradient(to bottom,@color1 @pos1,@color2 @pos2); } EOD; return $mixins; diff --git a/tests/library/CM/Asset/CssTest.php b/tests/library/CM/Asset/CssTest.php index c4be289ac..c82e4979d 100644 --- a/tests/library/CM/Asset/CssTest.php +++ b/tests/library/CM/Asset/CssTest.php @@ -2,12 +2,11 @@ class CM_Asset_CssTest extends CMTest_TestCase { - /** @var CM_Frontend_Render */ - private $_render; - public function testAdd() { $render = new CM_Frontend_Render(); - $css = new CM_Asset_Css($render, 'font-size: 12;', '#foo'); + $css = new CM_Asset_Css($render, 'font-size: 12;', [ + 'prefix' => '#foo', + ]); $css1 = <<<'EOD' .test:visible { color: black; @@ -25,37 +24,42 @@ public function testAdd() { color: black; height: 300px; } - EOD; - $this->assertSame($expected, $css->get()); + $this->assertSame(trim($expected), $css->get()); } public function testImage() { $render = new CM_Frontend_Render(); - $css = new CM_Asset_Css($render, "background: image('icon/mailbox_read.png') no-repeat 66px 7px;"); + $css = new CM_Asset_Css($render, "body { background: image('icon/mailbox_read.png') no-repeat 66px 7px; }"); $url = $render->getUrlResource('layout', 'img/icon/mailbox_read.png'); $expected = <<assertEquals($expected, $css->get()); + $this->assertEquals(trim($expected), $css->get()); } public function testBackgroundImage() { $render = new CM_Frontend_Render(); - $css = new CM_Asset_Css($render, "background-image: image('icon/mailbox_read.png');"); + $css = new CM_Asset_Css($render, "body { background-image: image('icon/mailbox_read.png'); }"); $url = $render->getUrlResource('layout', 'img/icon/mailbox_read.png'); $expected = <<assertEquals($expected, $css->get()); } public function testUrlFont() { $render = new CM_Frontend_Render(); - $css = new CM_Asset_Css($render, "src: url(urlFont('file.eot'));"); + $css = new CM_Asset_Css($render, "body { src: url(urlFont('file.eot')); }"); $url = $render->getUrlStatic('/font/file.eot'); $expected = <<assertEquals($expected, $css->get()); } @@ -87,7 +91,7 @@ public function testMixin() { } EOD; - $this->assertEquals($expected, $css->get()); + $this->assertEquals(trim($expected), $css->get()); } public function testLinearGradient() { @@ -101,17 +105,16 @@ public function testLinearGradient() { $expected = <<<'EOD' .foo { filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#ff000000,endColorstr=#661e321e); - background-image: linear-gradient(left,#000000 15%,rgba(30,50,30,0.4) 100%); - background-image: -moz-linear-gradient(left,#000000 15%,rgba(30,50,30,0.4) 100%); - background-image: -webkit-linear-gradient(left,#000000 15%,rgba(30,50,30,0.4) 100%); - background-image: -o-linear-gradient(left,#000000 15%,rgba(30,50,30,0.4) 100%); - background-image: -ms-linear-gradient(left,#000000 15%,rgba(30,50,30,0.4) 100%); - background-image: -webkit-gradient(linear,left top,right top,color-stop(15%,#000000),color-stop(100%,rgba(30,50,30,0.4))); + background-image: -webkit-linear-gradient(left, #000000 15%, rgba(30,50,30,0.4) 100%); + background-image: linear-gradient(to right,#000000 15%,rgba(30,50,30,0.4) 100%); } EOD; - $css = new CM_Asset_Css($render, $css); - $this->assertSame($expected, $css->get()); + $css = new CM_Asset_Css($render, $css, [ + 'autoprefixerBrowsers' => 'Safari 6', + ]); + $this->assertSame(trim($expected), $css->get()); + //vertical $css = <<<'EOD' .foo { @@ -121,17 +124,16 @@ public function testLinearGradient() { $expected = <<<'EOD' .foo { filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff000000,endColorstr=#661e321e); - background-image: linear-gradient(top,#000000 0%,rgba(30,50,30,0.4) 100%); - background-image: -moz-linear-gradient(top,#000000 0%,rgba(30,50,30,0.4) 100%); - background-image: -webkit-linear-gradient(top,#000000 0%,rgba(30,50,30,0.4) 100%); - background-image: -o-linear-gradient(top,#000000 0%,rgba(30,50,30,0.4) 100%); - background-image: -ms-linear-gradient(top,#000000 0%,rgba(30,50,30,0.4) 100%); - background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#000000),color-stop(100%,rgba(30,50,30,0.4))); + background-image: -webkit-linear-gradient(top, #000000 0%, rgba(30,50,30,0.4) 100%); + background-image: linear-gradient(to bottom,#000000 0%,rgba(30,50,30,0.4) 100%); } EOD; - $css = new CM_Asset_Css($render, $css); - $this->assertSame($expected, $css->get()); + $css = new CM_Asset_Css($render, $css, [ + 'autoprefixerBrowsers' => 'Safari 6', + ]); + $this->assertSame(trim($expected), $css->get()); + //illegal parameters $css = <<<'EOD' .foo { @@ -146,85 +148,6 @@ public function testLinearGradient() { $this->assertSame('', $css->get()); } - public function testBoxSizing() { - $render = new CM_Frontend_Render(); - $css = <<<'EOD' -.foo { - .box-sizing(border-box); -} -EOD; - $expected = <<<'EOD' -.foo { - box-sizing: border-box; - -moz-box-sizing: border-box; - -webkit-box-sizing: border-box; -} - -EOD; - $css = new CM_Asset_Css($render, $css); - $this->assertSame($expected, $css->get()); - } - - public function testUserSelect() { - $render = new CM_Frontend_Render(); - $css = <<<'EOD' -.foo { - .user-select(none); -} -EOD; - $expected = <<<'EOD' -.foo { - user-select: none; - -moz-user-select: none; - -ms-user-select: none; - -webkit-user-select: none; -} - -EOD; - $css = new CM_Asset_Css($render, $css); - $this->assertSame($expected, $css->get()); - } - - public function testTransform() { - $render = new CM_Frontend_Render(); - $css = <<<'EOD' -.foo { - .transform(matrix(0.866,0.5,-0.5,0.866,0,0)); -} -EOD; - $expected = <<<'EOD' -.foo { - transform: matrix(0.866,0.5,-0.5,0.866,0,0); - -moz-transform: matrix(0.866,0.5,-0.5,0.866,0,0); - -o-transform: matrix(0.866,0.5,-0.5,0.866,0,0); - -ms-transform: matrix(0.866,0.5,-0.5,0.866,0,0); - -webkit-transform: matrix(0.866,0.5,-0.5,0.866,0,0); -} - -EOD; - $css = new CM_Asset_Css($render, $css); - $this->assertSame($expected, $css->get()); - } - - public function testTransition() { - $render = new CM_Frontend_Render(); - $css = <<<'EOD' -.foo { - .transition(width 2s ease-in 2s); -} -EOD; - $expected = <<<'EOD' -.foo { - transition: width 2s ease-in 2s; - -moz-transition: width 2s ease-in 2s; - -webkit-transition: width 2s ease-in 2s; -} - -EOD; - $css = new CM_Asset_Css($render, $css); - $this->assertSame($expected, $css->get()); - } - public function testMedia() { $render = new CM_Frontend_Render(); $css = <<<'EOD' @@ -247,6 +170,20 @@ public function testMedia() { EOD; $css = new CM_Asset_Css($render, $css); - $this->assertSame($expected, $css->get()); + $this->assertSame(trim($expected), $css->get()); + } + + public function testCompress() { + $render = new CM_Frontend_Render(); + $css = <<<'EOD' +.foo { + transition: transform 1s; +} +EOD; + $expected = '.foo{-webkit-transition:-webkit-transform 1s;transition:transform 1s;}'; + $css = new CM_Asset_Css($render, $css, [ + 'autoprefixerBrowsers' => 'Safari 6', + ]); + $this->assertSame(trim($expected), $css->get(true)); } } From eda0a5450c26e436d91932f4c9911255976b5c62 Mon Sep 17 00:00:00 2001 From: Reto Kaiser Date: Mon, 11 Aug 2014 14:15:00 +0200 Subject: [PATCH 3/6] Remove vendor prefixing and some mixins --- layout/default/css/animation.less | 4 ---- layout/default/css/mixins.less | 27 --------------------------- 2 files changed, 31 deletions(-) diff --git a/layout/default/css/animation.less b/layout/default/css/animation.less index 923138af8..1490b4ca7 100644 --- a/layout/default/css/animation.less +++ b/layout/default/css/animation.less @@ -59,22 +59,18 @@ @-webkit-keyframes spinner { 0% { - -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { - -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spinner { 0% { - -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { - -webkit-transform: rotate(360deg); transform: rotate(360deg); } } diff --git a/layout/default/css/mixins.less b/layout/default/css/mixins.less index b48b006d0..019d69e8a 100644 --- a/layout/default/css/mixins.less +++ b/layout/default/css/mixins.less @@ -149,33 +149,6 @@ } } -// Vendor prefixing -.appearance(@value) { - -webkit-appearance: @value; - -moz-appearance: @value; - appearance: @value; -} - .animation(@name, @duration: 300ms, @timing-function: ease, @delay: 0s, @iteration-count: 1, @direction: normal, @fill-mode: none) { - -webkit-animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode; animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode; } - -.background-size(@value) { - -webkit-background-size: @value; - background-size: @value; -} - -.hyphens(@arg) { - -webkit-hyphens: @arg; - -moz-hyphens: @arg; - hyphens: @arg; -} - -.transform-origin (@x:center, @y:center) { - -webkit-transform-origin: @x @y; - -moz-transform-origin: @x @y; - -ms-transform-origin: @x @y; - -o-transform-origin: @x @y; - transform-origin: @x @y; -} From 2f4e4a487adca2a8635d9b8a08036a4c5e113ad8 Mon Sep 17 00:00:00 2001 From: Reto Kaiser Date: Mon, 11 Aug 2014 14:29:00 +0200 Subject: [PATCH 4/6] Move linear-gradient to mixins.less --- layout/default/css/mixins.less | 10 +++++++ library/CM/Asset/Css.php | 19 +------------ tests/library/CM/Asset/CssTest.php | 44 +++--------------------------- 3 files changed, 15 insertions(+), 58 deletions(-) diff --git a/layout/default/css/mixins.less b/layout/default/css/mixins.less index 019d69e8a..55ec7d955 100644 --- a/layout/default/css/mixins.less +++ b/layout/default/css/mixins.less @@ -152,3 +152,13 @@ .animation(@name, @duration: 300ms, @timing-function: ease, @delay: 0s, @iteration-count: 1, @direction: normal, @fill-mode: none) { animation: @name @duration @timing-function @delay @iteration-count @direction @fill-mode; } + +.gradient(@direction, @color1, @color2, @pos1: 0%, @pos2: 100%) when (@direction = horizontal) and (iscolor(@color1)) and (iscolor(@color2)) { + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=rgbahex(@color1),endColorstr=rgbahex(@color2)); + background-image: linear-gradient(to right,@color1 @pos1,@color2 @pos2); +} + +.gradient(@direction, @color1, @color2, @pos1: 0%, @pos2: 100%) when (@direction = vertical) and (iscolor(@color1)) and (iscolor(@color2)) { + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=rgbahex(@color1),endColorstr=rgbahex(@color2)); + background-image: linear-gradient(to bottom,@color1 @pos1,@color2 @pos2); +} diff --git a/library/CM/Asset/Css.php b/library/CM/Asset/Css.php index 914c6c7cb..78717f832 100644 --- a/library/CM/Asset/Css.php +++ b/library/CM/Asset/Css.php @@ -115,7 +115,7 @@ private function _compileLess($content, $compress) { if ($compress) { $lessCompiler->setFormatter('compressed'); } - return $lessCompiler->compile($this->_getMixins() . $content); + return $lessCompiler->compile($content); } /** @@ -131,21 +131,4 @@ private function _compileAutoprefixer($content) { } return CM_Util::exec($command, null, $content); } - - /** - * @return string - */ - private function _getMixins() { - $mixins = <<< 'EOD' -.gradient(@direction, @color1, @color2, @pos1: 0%, @pos2: 100%) when (@direction = horizontal) and (iscolor(@color1)) and (iscolor(@color2)) { - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=rgbahex(@color1),endColorstr=rgbahex(@color2)); - background-image: linear-gradient(to right,@color1 @pos1,@color2 @pos2); -} -.gradient(@direction, @color1, @color2, @pos1: 0%, @pos2: 100%) when (@direction = vertical) and (iscolor(@color1)) and (iscolor(@color2)) { - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=rgbahex(@color1),endColorstr=rgbahex(@color2)); - background-image: linear-gradient(to bottom,@color1 @pos1,@color2 @pos2); -} -EOD; - return $mixins; - } } diff --git a/tests/library/CM/Asset/CssTest.php b/tests/library/CM/Asset/CssTest.php index c82e4979d..ce811a258 100644 --- a/tests/library/CM/Asset/CssTest.php +++ b/tests/library/CM/Asset/CssTest.php @@ -89,63 +89,27 @@ public function testMixin() { .foo #bar { color: blue; } - EOD; $this->assertEquals(trim($expected), $css->get()); } - public function testLinearGradient() { + public function testAutoprefixer() { $render = new CM_Frontend_Render(); - //horizontal $css = <<<'EOD' .foo { - .gradient(horizontal, #000000, rgba(30, 50,30, 0.4), 15%); -} -EOD; - $expected = <<<'EOD' -.foo { - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr=#ff000000,endColorstr=#661e321e); - background-image: -webkit-linear-gradient(left, #000000 15%, rgba(30,50,30,0.4) 100%); - background-image: linear-gradient(to right,#000000 15%,rgba(30,50,30,0.4) 100%); -} - -EOD; - $css = new CM_Asset_Css($render, $css, [ - 'autoprefixerBrowsers' => 'Safari 6', - ]); - $this->assertSame(trim($expected), $css->get()); - - //vertical - $css = <<<'EOD' -.foo { - .gradient(vertical, #000000, rgba(30, 50,30, 0.4)); + transition: transform 1s; } EOD; $expected = <<<'EOD' .foo { - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#ff000000,endColorstr=#661e321e); - background-image: -webkit-linear-gradient(top, #000000 0%, rgba(30,50,30,0.4) 100%); - background-image: linear-gradient(to bottom,#000000 0%,rgba(30,50,30,0.4) 100%); + -webkit-transition: -webkit-transform 1s; + transition: transform 1s; } - EOD; $css = new CM_Asset_Css($render, $css, [ 'autoprefixerBrowsers' => 'Safari 6', ]); $this->assertSame(trim($expected), $css->get()); - - //illegal parameters - $css = <<<'EOD' -.foo { - .gradient(vertical, foo, rgba(30, 50,30, 0.4)); - .gradient(vertical, #000000, foo); - .gradient(horizontal, foo, rgba(30, 50,30, 0.4)); - .gradient(horizontal, #000000, foo); - .gradient(foo, #000000, rgba(30, 50,30, 0.4)); -} -EOD; - $css = new CM_Asset_Css($render, $css); - $this->assertSame('', $css->get()); } public function testMedia() { From db4612b9b494240c70be5491ae122963274c5f5f Mon Sep 17 00:00:00 2001 From: Reto Kaiser Date: Mon, 11 Aug 2014 14:38:21 +0200 Subject: [PATCH 5/6] Refactor usages of removed mixins --- layout/default/Component/Debug/default.less | 4 ++-- .../default/Component/Example/tabs/icons.less | 2 +- layout/default/FormField/Boolean/switch.less | 10 ++++---- .../default/FormField/TreeSelect/default.less | 2 +- layout/default/css/animation.less | 24 +++++++++---------- layout/default/css/form.less | 20 ++++++++-------- layout/default/css/function.fancySelect.less | 4 ++-- layout/default/css/function.usertext.less | 4 ++-- layout/default/css/jquery.floatbox.less | 4 ++-- layout/default/css/jquery.scrollShadow.less | 2 +- layout/default/css/jquery.toggleNext.less | 4 ++-- layout/default/css/menu.less | 2 +- layout/default/css/spinner.less | 2 +- 13 files changed, 42 insertions(+), 42 deletions(-) diff --git a/layout/default/Component/Debug/default.less b/layout/default/Component/Debug/default.less index 776dae5b7..6c10ebe11 100644 --- a/layout/default/Component/Debug/default.less +++ b/layout/default/Component/Debug/default.less @@ -3,7 +3,7 @@ z-index: 9999; bottom: 0; left: 0; - .transform(translate3d(-100%, 0, 0)); + transform: translate3d(-100%, 0, 0); background-color: lighten(@colorNotice, 40); border-left: 5px solid @colorNotice; white-space: nowrap; @@ -72,7 +72,7 @@ display: block; top: 0; right: 0; - .transform(translate3d(100%, 0, 0)); + transform: translate3d(100%, 0, 0); padding: 0 5px; line-height: 22px; background-color: @colorNotice; diff --git a/layout/default/Component/Example/tabs/icons.less b/layout/default/Component/Example/tabs/icons.less index 35ed7df4a..f860063a2 100644 --- a/layout/default/Component/Example/tabs/icons.less +++ b/layout/default/Component/Example/tabs/icons.less @@ -1,5 +1,5 @@ .column { - .box-sizing(border-box); + box-sizing: border-box; padding: 10px 10px 10px 0; width: 50%; float: left; diff --git a/layout/default/FormField/Boolean/switch.less b/layout/default/FormField/Boolean/switch.less index 735707a7c..fde1f7405 100644 --- a/layout/default/FormField/Boolean/switch.less +++ b/layout/default/FormField/Boolean/switch.less @@ -5,7 +5,7 @@ input[type=checkbox] { margin-left: 0; .handle { - .box-sizing(border-box); + box-sizing: border-box; position: relative; display: inline-block; width: 2 * @sizeSwitch + 5px; @@ -34,7 +34,7 @@ input[type=checkbox] { } &:after { - .box-sizing(border-box); + box-sizing: border-box; left: 0; content: ''; width: @sizeSwitch - 6px; @@ -43,8 +43,8 @@ input[type=checkbox] { border: 1px solid @colorBg; border-radius: 50%; background-color: lighten(@colorFgSubtle, 10); - .transform(translateX(0)); - .transition(200ms); + transform: translateX(0); + transition: 200ms; } } @@ -65,7 +65,7 @@ input[type=checkbox] { } &:after { - .transform(translateX(@sizeSwitch + 4px)); + transform: translateX(@sizeSwitch + 4px); background-color: lighten(@colorNotice, 30); } } diff --git a/layout/default/FormField/TreeSelect/default.less b/layout/default/FormField/TreeSelect/default.less index 6c68731be..3aa8f914d 100644 --- a/layout/default/FormField/TreeSelect/default.less +++ b/layout/default/FormField/TreeSelect/default.less @@ -88,7 +88,7 @@ } > .icon-arrow-right { - .transform(rotate(90deg)); + transform: rotate(90deg); color: @colorFgHeading; } } diff --git a/layout/default/css/animation.less b/layout/default/css/animation.less index 1490b4ca7..11f984be5 100644 --- a/layout/default/css/animation.less +++ b/layout/default/css/animation.less @@ -13,46 +13,46 @@ @keyframes clickConfirm { 0% { - .transform(scale(1)); + transform: scale(1); } 4% { - .transform(scale(1.3)); + transform: scale(1.3); } 7% { - .transform(scale(1)); + transform: scale(1); } 45% { - .transform(scale(.95)); + transform: scale(.95); } 50% { - .transform(scale(1)); + transform: scale(1); opacity: 1; } 60% { - .transform(scale(.95)); + transform: scale(.95); opacity: .5; } 70% { - .transform(scale(1)); + transform: scale(1); opacity: 1; } 80% { - .transform(scale(.95)); + transform: scale(.95); opacity: 0.5; } 90% { - .transform(scale(1)); + transform: scale(1); opacity: 1; } 91% { - .transform(scale(1.05)); + transform: scale(1.05); } 94% { - .transform(scale(.7)); + transform: scale(.7); opacity: 1; } 100% { - .transform(scale(1.4)); + transform: scale(1.4); opacity: .1; } } diff --git a/layout/default/css/form.less b/layout/default/css/form.less index a1e475f7c..f2348d009 100644 --- a/layout/default/css/form.less +++ b/layout/default/css/form.less @@ -1,6 +1,6 @@ .textinput { - .appearance(none); - .box-sizing(border-box); + appearance: none; + box-sizing: border-box; width: 100%; height: @heightInputText; overflow: hidden; @@ -9,7 +9,7 @@ border-radius: 0; background: @colorBg; border: 1px solid @colorFgBorderEmphasize2; - .transition(border-color .1s); + transition: border-color .1s; &:hover { border-left: 1px solid lighten(@colorNotice, 15); @@ -55,7 +55,7 @@ textarea.textinput { .placeholder(lighten(@colorFgSubtle, 10)); .button { - .box-sizing(border-box); + box-sizing: border-box; width: auto; height: @sizeButton; line-height: @sizeButton - 2px; @@ -71,7 +71,7 @@ textarea.textinput { border-radius: 0; background-size: auto 200%; background-position: 0 0; - .transition(background-position 200ms); + transition: background-position 200ms; &:not(:disabled):active { box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); @@ -210,7 +210,7 @@ input[type=checkbox], input[type=radio] { margin-left: @sizeCheckbox+4px; &:before { - .box-sizing(border-box); + box-sizing: border-box; position: absolute; content: ""; display: block; @@ -221,7 +221,7 @@ input[type=checkbox], input[type=radio] { left: -(@sizeCheckbox+4px); margin-top: -@sizeCheckbox/2; border: 1px solid @colorFgBorderEmphasize3; - .transition(100ms); + transition: 100ms; } } @@ -260,7 +260,7 @@ input[type=checkbox] { html.no-svg & { background-image: image('checkbox.png'); } - .background-size(contain); + background-size: contain; } + label { @@ -271,14 +271,14 @@ input[type=checkbox] { } .formField, .formAction { - .box-sizing(border-box); + box-sizing: border-box; max-width: 100%; padding: 6px; } .formField { > label { - .box-sizing(border-box); + box-sizing: border-box; color: @colorFgLinkSubtle; font-weight: bold; padding-left: 2px; diff --git a/layout/default/css/function.fancySelect.less b/layout/default/css/function.fancySelect.less index 7dadd5801..92ee70d9b 100644 --- a/layout/default/css/function.fancySelect.less +++ b/layout/default/css/function.fancySelect.less @@ -23,7 +23,7 @@ width: 25px; text-align: center; color: @colorFgBorderEmphasize3; - .transition(200ms); + transition: 200ms; } } @@ -38,7 +38,7 @@ min-width: 100%; width: auto; opacity: 0; - .appearance(none); + appearance: none; cursor: pointer; &:not(:disabled) { diff --git a/layout/default/css/function.usertext.less b/layout/default/css/function.usertext.less index 2dad265de..9ee1cec20 100644 --- a/layout/default/css/function.usertext.less +++ b/layout/default/css/function.usertext.less @@ -7,7 +7,7 @@ .usertext { .word_wrap; - .hyphens(auto); + hyphens: auto; &.oneline { display: inline-block; @@ -15,7 +15,7 @@ } img:not(.emoticon) { - .box-sizing(border-box); + box-sizing: border-box; max-width: 100%; max-height: 1500px; margin: 5px 0; diff --git a/layout/default/css/jquery.floatbox.less b/layout/default/css/jquery.floatbox.less index 7c7d7da56..192e187b7 100644 --- a/layout/default/css/jquery.floatbox.less +++ b/layout/default/css/jquery.floatbox.less @@ -18,11 +18,11 @@ } .floatbox-overlay { - .transition(opacity 200ms); + transition: opacity 200ms; } .floatbox { - .transition(opacity 200ms); + transition: opacity 200ms; &:focus { outline: none; diff --git a/layout/default/css/jquery.scrollShadow.less b/layout/default/css/jquery.scrollShadow.less index 8484e1d87..3e612b424 100644 --- a/layout/default/css/jquery.scrollShadow.less +++ b/layout/default/css/jquery.scrollShadow.less @@ -1,7 +1,7 @@ .scrollShadow { &:before, &:after { background-color: transparent; - .transition(200ms); + transition: 200ms; } &:before { diff --git a/layout/default/css/jquery.toggleNext.less b/layout/default/css/jquery.toggleNext.less index c7a2bfda4..e4683134e 100644 --- a/layout/default/css/jquery.toggleNext.less +++ b/layout/default/css/jquery.toggleNext.less @@ -3,7 +3,7 @@ .icon-arrow-right { margin-right: 6px; display: inline-block; - .transition(200ms); + transition: 200ms; } &:hover, &.active { @@ -14,7 +14,7 @@ font-weight: bold; .icon-arrow-right { - .transform(rotate(90deg)); + transform: rotate(90deg); } } } diff --git a/layout/default/css/menu.less b/layout/default/css/menu.less index 95d347a01..3d57cfff5 100644 --- a/layout/default/css/menu.less +++ b/layout/default/css/menu.less @@ -49,7 +49,7 @@ } &.active > a { - .transform(translate(1px, 1px)); + transform: translate(1px, 1px); background-color: @colorBgEmphasize3; } } diff --git a/layout/default/css/spinner.less b/layout/default/css/spinner.less index 476ec60a6..174e74014 100644 --- a/layout/default/css/spinner.less +++ b/layout/default/css/spinner.less @@ -6,7 +6,7 @@ min-width: @spinnerSize; &:before { - .box-sizing(border-box); + box-sizing: border-box; content: ''; position: absolute; width: @spinnerSize; From c0f389ea742e21d66f9ba8f0bda7d1876a1bf5ca Mon Sep 17 00:00:00 2001 From: Reto Kaiser Date: Mon, 11 Aug 2014 16:40:43 +0200 Subject: [PATCH 6/6] Install "autoprefixer" on travis --- .travis.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/.travis.yml b/.travis.yml index bed0f52b3..2f3d17968 100644 --- a/.travis.yml +++ b/.travis.yml @@ -20,6 +20,7 @@ before_script: - sh -c "if [ `php-config --vernum` -ge 50500 ]; then printf "yes\n" | pecl install apcu-beta; fi" - phpenv config-add tests/travis/php.ini - phpenv config-add tests/travis/php-$TRAVIS_PHP_VERSION.ini + - npm install -g autoprefixer - composer self-update - composer install --dev