migrate new costume style syntax

demos/__main__.py

@@ -12,7 +12,7 @@ from demos.markdown_previewer import main as markdown_previewer
 from demos.gomoku_game import main as gomoku_game
 
 from pywebio import STATIC_PATH
-from pywebio.output import put_markdown, put_row, put_html, style
+from pywebio.output import put_markdown, put_row, put_html
 from pywebio.platform.tornado import webio_handler
 from pywebio.session import info as session_info
 from tornado.options import define, options
@@ -109,10 +109,10 @@ def index():
     Basic demo and data visualization demo of PyWebIO.
     PyWebIO的基本demo和数据可视化demo
     """
-    style(put_row([
+    put_row([
         put_markdown('# PyWebIO demos'),
         put_html('<a class="github-button" data-size="large" href="https://github.com/wang0618/PyWebIO" data-show-count="true" aria-label="Star wang0618/PyWebIO on GitHub">Star</a>')
-    ], size='1fr auto'), 'align-items:center')
+    ], size='1fr auto').style('align-items:center')
     put_html('<script async defer src="https://buttons.github.io/buttons.js"></script>')
 
     if 'zh' in session_info.user_language:

pywebio/io_ctrl.py

@@ -75,7 +75,7 @@ class Output:
         # For Context manager
         self.enabled_context_manager = False
         self.container_selector = None
-        self.container_dom_id = None
+        self.container_dom_id = None  # todo: this name is ambiguous, rename it to `scope_name` or others
         self.custom_enter = None
         self.custom_exit = None
 

pywebio/output.py

@@ -426,7 +426,7 @@ def put_code(content, language='', rows=None, scope=Scope.Current, position=Outp
     out = put_markdown(code, scope=scope, position=position)
     if rows is not None:
         max_height = rows * 19 + 32  # 32 is the code css padding
-        out = style(out, "max-height: %spx" % max_height)
+        out.style("max-height: %spx" % max_height)
     return out
 
 
@@ -921,15 +921,15 @@ def put_loading(shape='border', color='dark', scope=Scope.Current, position=Outp
                 <span class="sr-only">Loading...</span>
             </div>""".format(shape=shape, color=color)
 
-    dom_id = random_str(10)
+    scope_name = random_str(10)
 
     def enter(self):
-        self.spec['container_dom_id'] = scope2dom(dom_id, no_css_selector=True)
+        self.spec['container_dom_id'] = scope2dom(scope_name, no_css_selector=True)
         self.send()
-        return dom_id
+        return scope_name
 
     def exit_(self, exc_type, exc_val, exc_tb):
-        remove(dom_id)
+        remove(scope_name)
         return False  # Propagate Exception
 
     return put_html(html, sanitize=False, scope=scope, position=position). \
@@ -1266,7 +1266,7 @@ def put_grid(content, cell_width='auto', cell_height='auto', cell_widths=None, c
 
                 css = 'grid-row-start: span {row}; grid-column-start: span {col};'.format(row=cell.row, col=cell.col)
                 elem = put_html('<div></div>') if cell.content is None else cell.content
-                content[x][y] = style(elem, css)
+                content[x][y] = elem.style(css)
             else:
                 lens[x] += 1
 

test/template.py

@@ -61,22 +61,20 @@ def basic_output():
     put_html("<hr/>")
 
     put_markdown('### Style')
-    style(put_text('Red'), 'color:red')
+    put_text('Red').style('color:red')
 
-    style([
-        put_text('Red'),
-        put_markdown('~~del~~')
-    ], 'color:red')
+    put_text('Red').style('color:red')
+    put_markdown('~~del~~').style('color:red')
 
     put_table([
         ['A', 'B'],
-        ['C', style(put_text('Red'), 'color:red')],
+        ['C', put_text('Red').style('color:red')],
     ])
 
-    put_collapse('title', style([
-        put_text('text'),
-        put_markdown('~~del~~'),
-    ], 'margin-left:20px'), open=True)
+    put_collapse('title', [
+        put_text('text').style('margin-left:20px'),
+        put_markdown('~~del~~').style('margin-left:20px'),
+    ], open=True)
 
     put_markdown('### Table')
     put_table([
@@ -256,18 +254,18 @@ def basic_output():
             put_code('C'),
         ]), None,
         put_code('python'), None,
-        style(put_code('python\n' * 20), 'max-height:200px;'),
+        put_code('python\n' * 20).style('max-height:200px;'),
     ])
 
     put_grid([
-        [style(put_code('[%s,%s]' % (x, y)), 'margin-right:10px;') for y in range(4)]
+        [put_code('[%s,%s]' % (x, y)).style('margin-right:10px;') for y in range(4)]
         for x in range(5)
     ], direction='column')
 
-    put_row([style(put_code(i), 'margin-right:10px;') for i in range(4)], 'repeat(auto-fill, 25%)')
+    put_row([put_code(i).style('margin-right:10px;') for i in range(4)], 'repeat(auto-fill, 25%)')
 
     put_markdown('### Span')
-    cell = lambda text: style(put_code(text), 'margin-right:10px;')
+    cell = lambda text: put_code(text).style('margin-right:10px;')
     put_grid([
         [span(cell('A'), col=2), None],
         [span(cell('C'), row=2, col=2), span(cell('D'), row=2)],