diff options
author | CoprDistGit <infra@openeuler.org> | 2023-05-15 05:42:36 +0000 |
---|---|---|
committer | CoprDistGit <infra@openeuler.org> | 2023-05-15 05:42:36 +0000 |
commit | 1fda9510e38ddb219d8bbcc58792d8aa067b7486 (patch) | |
tree | 73272da8cbf600db2c419992ce0e80314f7d8746 | |
parent | 28538cecd1ff34c014f9614d07e5b6792db681ca (diff) |
automatic import of python-blowdrycss
-rw-r--r-- | .gitignore | 1 | ||||
-rw-r--r-- | python-blowdrycss.spec | 648 | ||||
-rw-r--r-- | sources | 1 |
3 files changed, 650 insertions, 0 deletions
@@ -0,0 +1 @@ +/blowdrycss-1.0.3.linux-x86_64.tar.gz diff --git a/python-blowdrycss.spec b/python-blowdrycss.spec new file mode 100644 index 0000000..2cb85e5 --- /dev/null +++ b/python-blowdrycss.spec @@ -0,0 +1,648 @@ +%global _empty_manifest_terminate_build 0 +Name: python-blowdrycss +Version: 1.0.3 +Release: 1 +Summary: The atomic CSS compiler +License: MIT +URL: http://blowdrycss.org +Source0: https://mirrors.nju.edu.cn/pypi/web/packages/d3/2c/22c443283846b897620eaec4da368e6218c10bd2bb0ef3670fbc5f4e8464/blowdrycss-1.0.3.linux-x86_64.tar.gz +BuildArch: noarch + +Requires: python3-cssutils +Requires: python3-pypandoc +Requires: python3-future +Requires: python3-watchdog +Requires: python3-sphinx +Requires: python3-tox +Requires: python3-coverage +Requires: python3-wheel +Requires: python3-twine +Requires: python3-sphinx +Requires: python3-coverage +Requires: python3-tox + +%description +| +`blowdrycss` is a rapid styling tool that compiles DRY CSS from encoded class selectors in your web project files. +Getting Started +~~~~~~~~~~~~~~~ +`Quick Start Docs <http://blowdrycss.readthedocs.io/en/latest/quickstart.html>`__ +`Full documentation <http://blowdrycss.readthedocs.io/en/latest/index.html>`__ +Version Changelog +~~~~~~~~~~~~~~~~~ +| See ``version.py`` for full changelog. +| +| **1.0.0** -- Enabled support for ``*.php`` extension and added integration tests. Incremented to 1.0.0 since the + code is stable and working well. +| +| **1.0.1** -- Enabled support for output file_name and extension customization. Created settings validation + utility functions and unit tests. Custom output file examples: _blowdry.scss and custom.css. Added support for + Python 3.6. +| +| **1.0.2** -- Fixed file extension printing error. Now it uses the settings output_extension. Updated unit test. +Why the name blowdrycss? +~~~~~~~~~~~~~~~~~~~~~~~~ +Inspiration for the name came from the blow dryer. A blow dryer rapidly drys and styles hair. +Similarly, ``blowdrycss`` is used to rapidly style HTML and generate DRY CSS files using encoded class names. +Example Usage in HTML Tags: +~~~~~~~~~~~~~~~~~~~~~~~~~~~ +**Use the CSS level 1, 2.1, and 3 syntax that you already know.** + <div class="text-align-center margin-top-30"> + <p class="font-size-25"> + The font-size is 25px. <span class="green">Green Text</span> + </p> + </div> +``blowdrycss`` decodes the class names ``text-align-center``, +``margin-top-30``, ``font-size-25``, and ``green``; and generates the +following atomic CSS in ``blowdry.css``: + .text-align-center { text-align: center } + .margin-top-30 { margin-top: 30px } + .font-size-25 { font-size: 25px } + .green { color: green } +Advantages of blowdrycss +~~~~~~~~~~~~~~~~~~~~~~~~ +#. **Rapid Development:** Less time spent writing CSS, and cleaning up unused style rules. +#. **DRY (Don't Repeat Yourself):** Reduces CSS file size by only defining properties once. +#. **Symbiotic:** + * Can be integrated with the current ecosystem of CSS compilers and frameworks. + Compatible with SASS, SCSS, PostCSS, LESS, Foundation, Bootstrap. + * Supports class selector discovery within HTML, JINJA, XHTML, .NET, Ruby ERB Templates, Javascript, and C#. +#. **Documented:** Hands-on `tutorial <http://blowdrycss.readthedocs.io/en/latest/quickstart.html>`__ and sphinx `documentation <http://blowdrycss.readthedocs.io/en/latest/index.html>`__ to get you up and running fast. +#. **Robust:** Built for the real world in which deadlines and division of labor is not always taken into account. Can be used across all phases of a products lifecycle from prototype to production. +#. **Customizable:** Features can be turned on and off inside of `blowdrycss_settings.py <https://github.com/nueverest/blowdrycss/blob/master/blowdrycss/blowdrycss_settings.py>`__. Examples include: + * Watchdog file monitoring + * Logging + * Unit parsing + * Color parsing + * Font parsing + * CSS Minification + * Media query parsing. +#. **Atomic:** Generates atomic CSS declarations. +#. **Standardized:** HTML5 compatible. All `W3C CSS <http://www.w3.org/Style/CSS/Overview.en.html>`__ Level 2.1, and Level 3 properties implemented. PEP8 Compliant. +#. **Tested:** UnitTest Coverage +#. **Permissive:** `MIT license <https://github.com/nueverest/blowdrycss/blob/master/LICENSE>`__ +Requirements +~~~~~~~~~~~~ +- `Python 2.7.x or 3.3+ <https://www.python.org/downloads/>`__ (required) +- `cssutils 1.0.1+ <https://bitbucket.org/cthedot/cssutils>`__ (required) +- `future 0.15.2+ <https://pypi.python.org/pypi/future>`__ (required - for Python 2.7) +- `pandoc <https://pypi.python.org/pypi/pypandoc/1.1.3#installing-pandoc>`__ (required - file type conversion) +- `pypandoc 1.1.2+ <pypi.python.org/pypi/pypandoc/1.1.3>`__ (required - file type conversion) +- `watchdog 0.8.2+ <https://pypi.python.org/pypi/watchdog/0.8.3>`__ (required - monitor directory and auto-generate CSS) +Optional +'''''''' +- tox 2.3.1+ (Multi-environment testing) +- `tox-travis 0.4+ <https://pypi.python.org/pypi/tox-travis>`__ (Allows tox to be used on Travis CI.) +- coverage 4.0.2+ (Check test coverage) +- `coveralls 1.1+ <https://github.com/coagulant/coveralls-python>`__ (Used to report coverage when tox is run via Travis CI.) +- sphinx 1.3.3+ (docs) +Pre-Requisite Knowledge +~~~~~~~~~~~~~~~~~~~~~~~ +- Basic HTML and CSS +- Zero programming experience required. +Motivation +~~~~~~~~~~ +This tool was created after seeing how many companies manage their CSS files. The following are some scenarios: +Scenario 1 - WET (Write Everything Twice) CSS +''''''''''''''''''''''''''''''''''''''''''''' +Inside a CSS file you find the following: + .header-1 { font-weight: bold; font-size: 12px; font-color: red; } + .header-2 { font-weight: bold; font-size: 16px; font-color: blue; } + .header-3 { font-weight: bold; font-size: 12px; font-color: green; } +The property ``font-weight: bold;`` appears three times, and +``font-size: 12px;`` appears twice. This is not DRY (Don't Repeat +Yourself). +Scenario 2 - Stale or Unused CSS +'''''''''''''''''''''''''''''''' +Inside a CSS file you find the following: + .banner-video { + position: absolute; + top: 48%; + left: 50%; + min-width: 100%; + min-height: 100%; + /*width: auto;*/ + /*max-height: 30.5em;*/ + z-index: -100; + transform: translateX(-50%) translateY(-50%); + background-color: rgba(0,0,0,1); + background-size: contain; + transition: 1s opacity; + } +Six months later the person who wrote this CSS is then asked to remove +banner-video from the homepage. More often than not the +front-end developer will remove the CSS class from the HTML file, but +not from the CSS file. This leaves unused CSS lurking in the project. +Reasons include: +^^^^^^^^^^^^^^^^ +- Forgetting to delete the rule from the CSS file. +- Fear that the class is used somewhere else and that it might break + the site. +- Being too busy to search all of the files in their project for other + potential use cases. +Now 326 bytes worth of stale CSS data lurks in the style files. +Scenario 3 - Modern CSS Pre-compiler: +''''''''''''''''''''''''''''''''''''' +CSS compilation with SASS/SCSS, PostCSS, or LESS is awesome, and makes +writing lots of CSS rules easy. Tools like these allow auto-generation +of hundreds of header rules like the ones above. If care is not taken +this leverage can rapidly grow the CSS file. +SCSS Mixin example from a recent project: +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + @mixin text($font-color, $font-size, $font-family:"Open Sans", $line-height:inherit) { + color: $font-color; + font-size: $font-size; + font-family: $font-family, $default-font-family; + line-height: $line-height; + } +This mixin is called using ``@include`` as follows: + @include text($color-blue, rem-calc(14px), $default-font-family); +It turns out that ``@include text(...)`` is called 627 times in our +SCSS. Most of these ``@include`` statements include at least one +matching input parameter resulting in thousands of duplicate CSS +properties. +Auto-generating ``font-size: 1rem;`` 500 times is now super easy with a +pre-compiler and a for-loop. Some might say, :: + Well we minified it to save space. +Yes but, :: + Why did you write the same property 500 times in your main CSS file? +CSS File size does matter. For consideration: +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +- Longer download times increase user bounce rates especially on mobile + devices. +- Data pollution on the Internet. +- Increased likelihood of style bugs. +- Increased time required to implement new changes and + deprecate features. +What it is not +~~~~~~~~~~~~~~ +This tool is not designed to replace the need to hand-craft complex CSS property or rule declarations. +* Custom CSS would need to be written for Multi-rule classes, Background images, url() values, multi-word fonts, and some shorthand properties. +The following is an example of something this tool in not intended to +generate, and something that still needs to be written by hand. + .home-banner { + background: url("https://somewhere.net/images/banner/home-mainbanner-bg.jpg") no-repeat; + font-family: "Open Sans","Source Sans Pro",Arial; + background-repeat: no-repeat; + background-size: cover; + min-height: 7rem; + font-weight: bold; + font-size: 3.5625rem; + color: white; + line-height: 3.6875rem; + text-align: center; + text-shadow: -2px 2px 4px rgba(0,0,0,0.5); + } +Valuable References +~~~~~~~~~~~~~~~~~~~ + `Blowdrycss Documentation <http://blowdrycss.readthedocs.io/en/latest/index.html>`__ + `Github Repo <https://github.com/nueverest/blowdrycss>`__ + `Slides presented at DessertPy <https://docs.google.com/presentation/d/1wjkbvQUorD9rzdPWjwPXaJcYPOBnrjE1qUJY2M4xwuY/edit#slide=id.gc6f8badac_0_0>`__ + `W3C Full CSS property table <http://www.w3.org/TR/CSS21/propidx.html>`__ + `Don't Repeat Yourself <https://en.wikipedia.org/wiki/Don%27t_repeat_yourself>`__ + `Download Python <https://www.python.org/downloads/>`__ + `cssutils 1.0.1+ <https://bitbucket.org/cthedot/cssutils>`__ + `watchdog 0.8.2+ <https://pypi.python.org/pypi/watchdog/0.8.3>`__ +License +~~~~~~~ + The `MIT license <https://github.com/nueverest/blowdrycss/blob/master/LICENSE>`__ +How to Contribute +~~~~~~~~~~~~~~~~~ +- Open an Issue first and get community buy-in. +- Write Code +- Write Unit Tests (All tests must pass. 100% coverage preferred.) + +%package -n python3-blowdrycss +Summary: The atomic CSS compiler +Provides: python-blowdrycss +BuildRequires: python3-devel +BuildRequires: python3-setuptools +BuildRequires: python3-pip +%description -n python3-blowdrycss +| +`blowdrycss` is a rapid styling tool that compiles DRY CSS from encoded class selectors in your web project files. +Getting Started +~~~~~~~~~~~~~~~ +`Quick Start Docs <http://blowdrycss.readthedocs.io/en/latest/quickstart.html>`__ +`Full documentation <http://blowdrycss.readthedocs.io/en/latest/index.html>`__ +Version Changelog +~~~~~~~~~~~~~~~~~ +| See ``version.py`` for full changelog. +| +| **1.0.0** -- Enabled support for ``*.php`` extension and added integration tests. Incremented to 1.0.0 since the + code is stable and working well. +| +| **1.0.1** -- Enabled support for output file_name and extension customization. Created settings validation + utility functions and unit tests. Custom output file examples: _blowdry.scss and custom.css. Added support for + Python 3.6. +| +| **1.0.2** -- Fixed file extension printing error. Now it uses the settings output_extension. Updated unit test. +Why the name blowdrycss? +~~~~~~~~~~~~~~~~~~~~~~~~ +Inspiration for the name came from the blow dryer. A blow dryer rapidly drys and styles hair. +Similarly, ``blowdrycss`` is used to rapidly style HTML and generate DRY CSS files using encoded class names. +Example Usage in HTML Tags: +~~~~~~~~~~~~~~~~~~~~~~~~~~~ +**Use the CSS level 1, 2.1, and 3 syntax that you already know.** + <div class="text-align-center margin-top-30"> + <p class="font-size-25"> + The font-size is 25px. <span class="green">Green Text</span> + </p> + </div> +``blowdrycss`` decodes the class names ``text-align-center``, +``margin-top-30``, ``font-size-25``, and ``green``; and generates the +following atomic CSS in ``blowdry.css``: + .text-align-center { text-align: center } + .margin-top-30 { margin-top: 30px } + .font-size-25 { font-size: 25px } + .green { color: green } +Advantages of blowdrycss +~~~~~~~~~~~~~~~~~~~~~~~~ +#. **Rapid Development:** Less time spent writing CSS, and cleaning up unused style rules. +#. **DRY (Don't Repeat Yourself):** Reduces CSS file size by only defining properties once. +#. **Symbiotic:** + * Can be integrated with the current ecosystem of CSS compilers and frameworks. + Compatible with SASS, SCSS, PostCSS, LESS, Foundation, Bootstrap. + * Supports class selector discovery within HTML, JINJA, XHTML, .NET, Ruby ERB Templates, Javascript, and C#. +#. **Documented:** Hands-on `tutorial <http://blowdrycss.readthedocs.io/en/latest/quickstart.html>`__ and sphinx `documentation <http://blowdrycss.readthedocs.io/en/latest/index.html>`__ to get you up and running fast. +#. **Robust:** Built for the real world in which deadlines and division of labor is not always taken into account. Can be used across all phases of a products lifecycle from prototype to production. +#. **Customizable:** Features can be turned on and off inside of `blowdrycss_settings.py <https://github.com/nueverest/blowdrycss/blob/master/blowdrycss/blowdrycss_settings.py>`__. Examples include: + * Watchdog file monitoring + * Logging + * Unit parsing + * Color parsing + * Font parsing + * CSS Minification + * Media query parsing. +#. **Atomic:** Generates atomic CSS declarations. +#. **Standardized:** HTML5 compatible. All `W3C CSS <http://www.w3.org/Style/CSS/Overview.en.html>`__ Level 2.1, and Level 3 properties implemented. PEP8 Compliant. +#. **Tested:** UnitTest Coverage +#. **Permissive:** `MIT license <https://github.com/nueverest/blowdrycss/blob/master/LICENSE>`__ +Requirements +~~~~~~~~~~~~ +- `Python 2.7.x or 3.3+ <https://www.python.org/downloads/>`__ (required) +- `cssutils 1.0.1+ <https://bitbucket.org/cthedot/cssutils>`__ (required) +- `future 0.15.2+ <https://pypi.python.org/pypi/future>`__ (required - for Python 2.7) +- `pandoc <https://pypi.python.org/pypi/pypandoc/1.1.3#installing-pandoc>`__ (required - file type conversion) +- `pypandoc 1.1.2+ <pypi.python.org/pypi/pypandoc/1.1.3>`__ (required - file type conversion) +- `watchdog 0.8.2+ <https://pypi.python.org/pypi/watchdog/0.8.3>`__ (required - monitor directory and auto-generate CSS) +Optional +'''''''' +- tox 2.3.1+ (Multi-environment testing) +- `tox-travis 0.4+ <https://pypi.python.org/pypi/tox-travis>`__ (Allows tox to be used on Travis CI.) +- coverage 4.0.2+ (Check test coverage) +- `coveralls 1.1+ <https://github.com/coagulant/coveralls-python>`__ (Used to report coverage when tox is run via Travis CI.) +- sphinx 1.3.3+ (docs) +Pre-Requisite Knowledge +~~~~~~~~~~~~~~~~~~~~~~~ +- Basic HTML and CSS +- Zero programming experience required. +Motivation +~~~~~~~~~~ +This tool was created after seeing how many companies manage their CSS files. The following are some scenarios: +Scenario 1 - WET (Write Everything Twice) CSS +''''''''''''''''''''''''''''''''''''''''''''' +Inside a CSS file you find the following: + .header-1 { font-weight: bold; font-size: 12px; font-color: red; } + .header-2 { font-weight: bold; font-size: 16px; font-color: blue; } + .header-3 { font-weight: bold; font-size: 12px; font-color: green; } +The property ``font-weight: bold;`` appears three times, and +``font-size: 12px;`` appears twice. This is not DRY (Don't Repeat +Yourself). +Scenario 2 - Stale or Unused CSS +'''''''''''''''''''''''''''''''' +Inside a CSS file you find the following: + .banner-video { + position: absolute; + top: 48%; + left: 50%; + min-width: 100%; + min-height: 100%; + /*width: auto;*/ + /*max-height: 30.5em;*/ + z-index: -100; + transform: translateX(-50%) translateY(-50%); + background-color: rgba(0,0,0,1); + background-size: contain; + transition: 1s opacity; + } +Six months later the person who wrote this CSS is then asked to remove +banner-video from the homepage. More often than not the +front-end developer will remove the CSS class from the HTML file, but +not from the CSS file. This leaves unused CSS lurking in the project. +Reasons include: +^^^^^^^^^^^^^^^^ +- Forgetting to delete the rule from the CSS file. +- Fear that the class is used somewhere else and that it might break + the site. +- Being too busy to search all of the files in their project for other + potential use cases. +Now 326 bytes worth of stale CSS data lurks in the style files. +Scenario 3 - Modern CSS Pre-compiler: +''''''''''''''''''''''''''''''''''''' +CSS compilation with SASS/SCSS, PostCSS, or LESS is awesome, and makes +writing lots of CSS rules easy. Tools like these allow auto-generation +of hundreds of header rules like the ones above. If care is not taken +this leverage can rapidly grow the CSS file. +SCSS Mixin example from a recent project: +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + @mixin text($font-color, $font-size, $font-family:"Open Sans", $line-height:inherit) { + color: $font-color; + font-size: $font-size; + font-family: $font-family, $default-font-family; + line-height: $line-height; + } +This mixin is called using ``@include`` as follows: + @include text($color-blue, rem-calc(14px), $default-font-family); +It turns out that ``@include text(...)`` is called 627 times in our +SCSS. Most of these ``@include`` statements include at least one +matching input parameter resulting in thousands of duplicate CSS +properties. +Auto-generating ``font-size: 1rem;`` 500 times is now super easy with a +pre-compiler and a for-loop. Some might say, :: + Well we minified it to save space. +Yes but, :: + Why did you write the same property 500 times in your main CSS file? +CSS File size does matter. For consideration: +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +- Longer download times increase user bounce rates especially on mobile + devices. +- Data pollution on the Internet. +- Increased likelihood of style bugs. +- Increased time required to implement new changes and + deprecate features. +What it is not +~~~~~~~~~~~~~~ +This tool is not designed to replace the need to hand-craft complex CSS property or rule declarations. +* Custom CSS would need to be written for Multi-rule classes, Background images, url() values, multi-word fonts, and some shorthand properties. +The following is an example of something this tool in not intended to +generate, and something that still needs to be written by hand. + .home-banner { + background: url("https://somewhere.net/images/banner/home-mainbanner-bg.jpg") no-repeat; + font-family: "Open Sans","Source Sans Pro",Arial; + background-repeat: no-repeat; + background-size: cover; + min-height: 7rem; + font-weight: bold; + font-size: 3.5625rem; + color: white; + line-height: 3.6875rem; + text-align: center; + text-shadow: -2px 2px 4px rgba(0,0,0,0.5); + } +Valuable References +~~~~~~~~~~~~~~~~~~~ + `Blowdrycss Documentation <http://blowdrycss.readthedocs.io/en/latest/index.html>`__ + `Github Repo <https://github.com/nueverest/blowdrycss>`__ + `Slides presented at DessertPy <https://docs.google.com/presentation/d/1wjkbvQUorD9rzdPWjwPXaJcYPOBnrjE1qUJY2M4xwuY/edit#slide=id.gc6f8badac_0_0>`__ + `W3C Full CSS property table <http://www.w3.org/TR/CSS21/propidx.html>`__ + `Don't Repeat Yourself <https://en.wikipedia.org/wiki/Don%27t_repeat_yourself>`__ + `Download Python <https://www.python.org/downloads/>`__ + `cssutils 1.0.1+ <https://bitbucket.org/cthedot/cssutils>`__ + `watchdog 0.8.2+ <https://pypi.python.org/pypi/watchdog/0.8.3>`__ +License +~~~~~~~ + The `MIT license <https://github.com/nueverest/blowdrycss/blob/master/LICENSE>`__ +How to Contribute +~~~~~~~~~~~~~~~~~ +- Open an Issue first and get community buy-in. +- Write Code +- Write Unit Tests (All tests must pass. 100% coverage preferred.) + +%package help +Summary: Development documents and examples for blowdrycss +Provides: python3-blowdrycss-doc +%description help +| +`blowdrycss` is a rapid styling tool that compiles DRY CSS from encoded class selectors in your web project files. +Getting Started +~~~~~~~~~~~~~~~ +`Quick Start Docs <http://blowdrycss.readthedocs.io/en/latest/quickstart.html>`__ +`Full documentation <http://blowdrycss.readthedocs.io/en/latest/index.html>`__ +Version Changelog +~~~~~~~~~~~~~~~~~ +| See ``version.py`` for full changelog. +| +| **1.0.0** -- Enabled support for ``*.php`` extension and added integration tests. Incremented to 1.0.0 since the + code is stable and working well. +| +| **1.0.1** -- Enabled support for output file_name and extension customization. Created settings validation + utility functions and unit tests. Custom output file examples: _blowdry.scss and custom.css. Added support for + Python 3.6. +| +| **1.0.2** -- Fixed file extension printing error. Now it uses the settings output_extension. Updated unit test. +Why the name blowdrycss? +~~~~~~~~~~~~~~~~~~~~~~~~ +Inspiration for the name came from the blow dryer. A blow dryer rapidly drys and styles hair. +Similarly, ``blowdrycss`` is used to rapidly style HTML and generate DRY CSS files using encoded class names. +Example Usage in HTML Tags: +~~~~~~~~~~~~~~~~~~~~~~~~~~~ +**Use the CSS level 1, 2.1, and 3 syntax that you already know.** + <div class="text-align-center margin-top-30"> + <p class="font-size-25"> + The font-size is 25px. <span class="green">Green Text</span> + </p> + </div> +``blowdrycss`` decodes the class names ``text-align-center``, +``margin-top-30``, ``font-size-25``, and ``green``; and generates the +following atomic CSS in ``blowdry.css``: + .text-align-center { text-align: center } + .margin-top-30 { margin-top: 30px } + .font-size-25 { font-size: 25px } + .green { color: green } +Advantages of blowdrycss +~~~~~~~~~~~~~~~~~~~~~~~~ +#. **Rapid Development:** Less time spent writing CSS, and cleaning up unused style rules. +#. **DRY (Don't Repeat Yourself):** Reduces CSS file size by only defining properties once. +#. **Symbiotic:** + * Can be integrated with the current ecosystem of CSS compilers and frameworks. + Compatible with SASS, SCSS, PostCSS, LESS, Foundation, Bootstrap. + * Supports class selector discovery within HTML, JINJA, XHTML, .NET, Ruby ERB Templates, Javascript, and C#. +#. **Documented:** Hands-on `tutorial <http://blowdrycss.readthedocs.io/en/latest/quickstart.html>`__ and sphinx `documentation <http://blowdrycss.readthedocs.io/en/latest/index.html>`__ to get you up and running fast. +#. **Robust:** Built for the real world in which deadlines and division of labor is not always taken into account. Can be used across all phases of a products lifecycle from prototype to production. +#. **Customizable:** Features can be turned on and off inside of `blowdrycss_settings.py <https://github.com/nueverest/blowdrycss/blob/master/blowdrycss/blowdrycss_settings.py>`__. Examples include: + * Watchdog file monitoring + * Logging + * Unit parsing + * Color parsing + * Font parsing + * CSS Minification + * Media query parsing. +#. **Atomic:** Generates atomic CSS declarations. +#. **Standardized:** HTML5 compatible. All `W3C CSS <http://www.w3.org/Style/CSS/Overview.en.html>`__ Level 2.1, and Level 3 properties implemented. PEP8 Compliant. +#. **Tested:** UnitTest Coverage +#. **Permissive:** `MIT license <https://github.com/nueverest/blowdrycss/blob/master/LICENSE>`__ +Requirements +~~~~~~~~~~~~ +- `Python 2.7.x or 3.3+ <https://www.python.org/downloads/>`__ (required) +- `cssutils 1.0.1+ <https://bitbucket.org/cthedot/cssutils>`__ (required) +- `future 0.15.2+ <https://pypi.python.org/pypi/future>`__ (required - for Python 2.7) +- `pandoc <https://pypi.python.org/pypi/pypandoc/1.1.3#installing-pandoc>`__ (required - file type conversion) +- `pypandoc 1.1.2+ <pypi.python.org/pypi/pypandoc/1.1.3>`__ (required - file type conversion) +- `watchdog 0.8.2+ <https://pypi.python.org/pypi/watchdog/0.8.3>`__ (required - monitor directory and auto-generate CSS) +Optional +'''''''' +- tox 2.3.1+ (Multi-environment testing) +- `tox-travis 0.4+ <https://pypi.python.org/pypi/tox-travis>`__ (Allows tox to be used on Travis CI.) +- coverage 4.0.2+ (Check test coverage) +- `coveralls 1.1+ <https://github.com/coagulant/coveralls-python>`__ (Used to report coverage when tox is run via Travis CI.) +- sphinx 1.3.3+ (docs) +Pre-Requisite Knowledge +~~~~~~~~~~~~~~~~~~~~~~~ +- Basic HTML and CSS +- Zero programming experience required. +Motivation +~~~~~~~~~~ +This tool was created after seeing how many companies manage their CSS files. The following are some scenarios: +Scenario 1 - WET (Write Everything Twice) CSS +''''''''''''''''''''''''''''''''''''''''''''' +Inside a CSS file you find the following: + .header-1 { font-weight: bold; font-size: 12px; font-color: red; } + .header-2 { font-weight: bold; font-size: 16px; font-color: blue; } + .header-3 { font-weight: bold; font-size: 12px; font-color: green; } +The property ``font-weight: bold;`` appears three times, and +``font-size: 12px;`` appears twice. This is not DRY (Don't Repeat +Yourself). +Scenario 2 - Stale or Unused CSS +'''''''''''''''''''''''''''''''' +Inside a CSS file you find the following: + .banner-video { + position: absolute; + top: 48%; + left: 50%; + min-width: 100%; + min-height: 100%; + /*width: auto;*/ + /*max-height: 30.5em;*/ + z-index: -100; + transform: translateX(-50%) translateY(-50%); + background-color: rgba(0,0,0,1); + background-size: contain; + transition: 1s opacity; + } +Six months later the person who wrote this CSS is then asked to remove +banner-video from the homepage. More often than not the +front-end developer will remove the CSS class from the HTML file, but +not from the CSS file. This leaves unused CSS lurking in the project. +Reasons include: +^^^^^^^^^^^^^^^^ +- Forgetting to delete the rule from the CSS file. +- Fear that the class is used somewhere else and that it might break + the site. +- Being too busy to search all of the files in their project for other + potential use cases. +Now 326 bytes worth of stale CSS data lurks in the style files. +Scenario 3 - Modern CSS Pre-compiler: +''''''''''''''''''''''''''''''''''''' +CSS compilation with SASS/SCSS, PostCSS, or LESS is awesome, and makes +writing lots of CSS rules easy. Tools like these allow auto-generation +of hundreds of header rules like the ones above. If care is not taken +this leverage can rapidly grow the CSS file. +SCSS Mixin example from a recent project: +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ + @mixin text($font-color, $font-size, $font-family:"Open Sans", $line-height:inherit) { + color: $font-color; + font-size: $font-size; + font-family: $font-family, $default-font-family; + line-height: $line-height; + } +This mixin is called using ``@include`` as follows: + @include text($color-blue, rem-calc(14px), $default-font-family); +It turns out that ``@include text(...)`` is called 627 times in our +SCSS. Most of these ``@include`` statements include at least one +matching input parameter resulting in thousands of duplicate CSS +properties. +Auto-generating ``font-size: 1rem;`` 500 times is now super easy with a +pre-compiler and a for-loop. Some might say, :: + Well we minified it to save space. +Yes but, :: + Why did you write the same property 500 times in your main CSS file? +CSS File size does matter. For consideration: +^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ +- Longer download times increase user bounce rates especially on mobile + devices. +- Data pollution on the Internet. +- Increased likelihood of style bugs. +- Increased time required to implement new changes and + deprecate features. +What it is not +~~~~~~~~~~~~~~ +This tool is not designed to replace the need to hand-craft complex CSS property or rule declarations. +* Custom CSS would need to be written for Multi-rule classes, Background images, url() values, multi-word fonts, and some shorthand properties. +The following is an example of something this tool in not intended to +generate, and something that still needs to be written by hand. + .home-banner { + background: url("https://somewhere.net/images/banner/home-mainbanner-bg.jpg") no-repeat; + font-family: "Open Sans","Source Sans Pro",Arial; + background-repeat: no-repeat; + background-size: cover; + min-height: 7rem; + font-weight: bold; + font-size: 3.5625rem; + color: white; + line-height: 3.6875rem; + text-align: center; + text-shadow: -2px 2px 4px rgba(0,0,0,0.5); + } +Valuable References +~~~~~~~~~~~~~~~~~~~ + `Blowdrycss Documentation <http://blowdrycss.readthedocs.io/en/latest/index.html>`__ + `Github Repo <https://github.com/nueverest/blowdrycss>`__ + `Slides presented at DessertPy <https://docs.google.com/presentation/d/1wjkbvQUorD9rzdPWjwPXaJcYPOBnrjE1qUJY2M4xwuY/edit#slide=id.gc6f8badac_0_0>`__ + `W3C Full CSS property table <http://www.w3.org/TR/CSS21/propidx.html>`__ + `Don't Repeat Yourself <https://en.wikipedia.org/wiki/Don%27t_repeat_yourself>`__ + `Download Python <https://www.python.org/downloads/>`__ + `cssutils 1.0.1+ <https://bitbucket.org/cthedot/cssutils>`__ + `watchdog 0.8.2+ <https://pypi.python.org/pypi/watchdog/0.8.3>`__ +License +~~~~~~~ + The `MIT license <https://github.com/nueverest/blowdrycss/blob/master/LICENSE>`__ +How to Contribute +~~~~~~~~~~~~~~~~~ +- Open an Issue first and get community buy-in. +- Write Code +- Write Unit Tests (All tests must pass. 100% coverage preferred.) + +%prep +%autosetup -n blowdrycss-1.0.3 + +%build +%py3_build + +%install +%py3_install +install -d -m755 %{buildroot}/%{_pkgdocdir} +if [ -d doc ]; then cp -arf doc %{buildroot}/%{_pkgdocdir}; fi +if [ -d docs ]; then cp -arf docs %{buildroot}/%{_pkgdocdir}; fi +if [ -d example ]; then cp -arf example %{buildroot}/%{_pkgdocdir}; fi +if [ -d examples ]; then cp -arf examples %{buildroot}/%{_pkgdocdir}; fi +pushd %{buildroot} +if [ -d usr/lib ]; then + find usr/lib -type f -printf "/%h/%f\n" >> filelist.lst +fi +if [ -d usr/lib64 ]; then + find usr/lib64 -type f -printf "/%h/%f\n" >> filelist.lst +fi +if [ -d usr/bin ]; then + find usr/bin -type f -printf "/%h/%f\n" >> filelist.lst +fi +if [ -d usr/sbin ]; then + find usr/sbin -type f -printf "/%h/%f\n" >> filelist.lst +fi +touch doclist.lst +if [ -d usr/share/man ]; then + find usr/share/man -type f -printf "/%h/%f.gz\n" >> doclist.lst +fi +popd +mv %{buildroot}/filelist.lst . +mv %{buildroot}/doclist.lst . + +%files -n python3-blowdrycss -f filelist.lst +%dir %{python3_sitelib}/* + +%files help -f doclist.lst +%{_docdir}/* + +%changelog +* Mon May 15 2023 Python_Bot <Python_Bot@openeuler.org> - 1.0.3-1 +- Package Spec generated @@ -0,0 +1 @@ +8fe4033cd0fb86708ef370bfccc742f5 blowdrycss-1.0.3.linux-x86_64.tar.gz |