From 4071e3799e3d41ebdba5d8545dd76faeb041c2a2 Mon Sep 17 00:00:00 2001 From: kez Date: Thu, 26 May 2022 16:49:31 -0700 Subject: [PATCH] Add lektor-scss plugin Closes: #27 I've audited the plugin, and it's safe. it's a straight lektor plugin wrapper around libsass, with most of the logic handling dev server reloads. Each site individually will have to switch to the plugin to compile its SCSS. This will require a lego update, a new config file, and a change to the CI script. --- packages/lektor-scss/LICENSE | 22 ++++ packages/lektor-scss/README.md | 73 +++++++++++ packages/lektor-scss/configs/scss.ini | 7 ++ packages/lektor-scss/lektor_scss.py | 173 ++++++++++++++++++++++++++ packages/lektor-scss/setup.py | 41 ++++++ 5 files changed, 316 insertions(+) create mode 100644 packages/lektor-scss/LICENSE create mode 100644 packages/lektor-scss/README.md create mode 100644 packages/lektor-scss/configs/scss.ini create mode 100755 packages/lektor-scss/lektor_scss.py create mode 100644 packages/lektor-scss/setup.py diff --git a/packages/lektor-scss/LICENSE b/packages/lektor-scss/LICENSE new file mode 100644 index 0000000..69ca967 --- /dev/null +++ b/packages/lektor-scss/LICENSE @@ -0,0 +1,22 @@ +MIT License + +Copyright (c) 2019 L3D +Copyright (c) 2019 maxbachmann + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/packages/lektor-scss/README.md b/packages/lektor-scss/README.md new file mode 100644 index 0000000..b487016 --- /dev/null +++ b/packages/lektor-scss/README.md @@ -0,0 +1,73 @@ + SCSS compiler for lektor +============================= +[![PyPI version](https://badge.fury.io/py/lektor-scss.svg)](https://badge.fury.io/py/lektor-scss) + [![Downloads](https://pepy.tech/badge/lektor-scss)](https://pepy.tech/project/lektor-scss) + ![Upload Python Package](https://github.com/chaos-bodensee/lektor-scss/workflows/Upload%20Python%20Package/badge.svg) + ![Linting Python package](https://github.com/chaos-bodensee/lektor-scss/workflows/Linting%20Python%20package/badge.svg) + +SCSS compiler for [Lektor](https://getlektor.com) that compiles css from sass. + + How does it actually work? +---------------------------- + + It uses [libsass](https://github.com/sass/libsass-python) + + It looks for ``.scss`` and ``.sass`` files *(ignores part files that begin with a underscore e.g. '_testfile.scss') and compiles them as part of the build process.* + + It only rebuilds the css when it's needed (file changed, a file it imports changed or the config changed). + + When starting the the development server it watches the files for changes in the background and rebuilds them when needed. + + Installation +------------- +You can install the plugin with Lektor's installer: +```bash +lektor plugins add lektor-scss +``` + +Or by hand, adding the plugin to the packages section in your lektorproject file: +```ini +[packages] +lektor-scss = 1.4.1 +``` + Usage +------ +To enable the plugin, pass the ``scss`` flag when starting the development +server or when running a build: +```bash +# build and compile css from scss +lektor build -f scss + +# edit site with new generated css +lektor server -f scss +``` + + Python3 +---------- +It is highly recommended to use this plugin with a python3 version of lektor. + +Since lektor can be used as a python module it is possible to enforce this *(after lektor is installed eg. with ``pip3 install --user --upgrade lektor``)* with the following command: +```bash +# run a python3 lektor server with new generated css +python3 -m lektor server -f scss +``` + + Configuration +------------- +The Plugin has the following settings you can adjust to your needs: + +|parameter |default value |description | +|---------------|-------------------|--------------------------------------------------------------------------------------------------| +|source_dir |assets/scss/ | the directory in which the plugin searchs for sass files (subdirectories are included) | +|output_dir |assets/css/ | the directory the compiled css files get place at | +|output_style |compressed | coding style of the compiled result. choose one of: 'nested', 'expanded', 'compact', 'compressed'| +|source_comments|False | whether to add comments about source lines | +|precision |5 | precision for numbers | +|include_paths | |If you want to include SASS libraries from a different directory, libsass's compile function has a parameter called `include_paths` to add those directories to the search path. | + + +An example file with the default config can be found at ``configs/scss.ini``. For every parameter that is not specified in the config file the default value is used by the plugin. + + Development +------------- +To test and/or develop on this plugin in your running lektor installation, simply place it in the ``packages/`` Folder and have a look at the [Lektor Doku](https://www.getlektor.com/docs/plugins/dev/) + + + + diff --git a/packages/lektor-scss/configs/scss.ini b/packages/lektor-scss/configs/scss.ini new file mode 100644 index 0000000..49ac487 --- /dev/null +++ b/packages/lektor-scss/configs/scss.ini @@ -0,0 +1,7 @@ +source_dir = assets/scss/ +output_dir = assets/css/ +output_style = compressed +source_comments = False +precision = 5 +name_prefix = .min +; include_paths = node_modules/,assets/vendor/ diff --git a/packages/lektor-scss/lektor_scss.py b/packages/lektor-scss/lektor_scss.py new file mode 100755 index 0000000..bd578dd --- /dev/null +++ b/packages/lektor-scss/lektor_scss.py @@ -0,0 +1,173 @@ +#!/usr/bin/env python3 +# -*- coding: utf-8 -*- +from __future__ import print_function + +import os +import sass +import errno +import re +from lektor.pluginsystem import Plugin +from termcolor import colored +import threading +import time + +COMPILE_FLAG = "scss" + +class scssPlugin(Plugin): + name = u'Lektor scss' + description = u'Lektor plugin to compile css out of sass - based on libsass' + + def __init__(self, *args, **kwargs): + Plugin.__init__(self, *args, **kwargs) + config = self.get_config() + self.source_dir = config.get('source_dir', 'assets/scss/') + self.output_dir = config.get('output_dir', 'assets/css/') + self.output_style = config.get('output_style', 'compressed') + self.source_comments = config.get('source_comments', 'False') + self.precision = config.get('precision', '5') + self.name_prefix = config.get('name_prefix', '') + self.include_paths = [] + raw_include_paths = config.get('include_paths', '') + # convert a path expression with ',' as seperator symbol + include_path_list = list(filter(lambda el: len(el) > 0, raw_include_paths.split(','))) + for path in include_path_list: + if path.startswith('/'): + self.include_paths.append(path) + else: + self.include_paths.append(os.path.realpath(os.path.join(self.env.root_path, path))) + self.watcher = None + self.run_watcher = False + + def is_enabled(self, build_flags): + return bool(build_flags.get(COMPILE_FLAG)) + + def find_dependencies(self, target): + dependencies = [target] + with open(target, 'r') as f: + data = f.read() + imports = re.findall(r'@import\s+((?:[\'|\"]\S+[\'|\"]\s*(?:,\s*(?:\/\/\s*|)|;))+)', data) + for files in imports: + files = re.sub('[\'\"\n\r;]', '', files) + + # find correct filename and add to watchlist (recursive so dependencies of dependencies get added aswell) + for file in files.split(","): + file = file.strip() + # when filename ends with css libsass converts it to a url() + if file.endswith('.css'): + continue + + basepath = os.path.dirname(target) + filepath = os.path.dirname(file) + basename = os.path.basename(file) + filenames = [ + basename, + '_' + basename, + basename + '.scss', + basename + '.css', + '_' + basename + '.scss', + '_' + basename + '.css' + ] + + for filename in filenames: + path = os.path.join(basepath, filepath, filename) + if os.path.isfile(path): + dependencies += self.find_dependencies(path) + return dependencies + + def compile_file(self, target, output, dependencies): + """ + Compiles the target scss file. + """ + filename = os.path.splitext(os.path.basename(target))[0] + if not filename.endswith(self.name_prefix): + filename += self.name_prefix + filename += '.css' + output_file = os.path.join(output, filename) + + # check if dependency changed and rebuild if it did + rebuild = False + for dependency in dependencies: + if ( not os.path.isfile(output_file) or os.path.getmtime(dependency) > os.path.getmtime(output_file)): + rebuild = True + break + if not rebuild: + return + result = sass.compile( + filename=target, + output_style=self.output_style, + precision=int(self.precision), + source_comments=(self.source_comments.lower()=='true'), + include_paths=self.include_paths + ) + with open(output_file, 'w') as fw: + fw.write(result) + + print(colored('css', 'green'), self.source_dir + os.path.basename(target), '\u27a1', self.output_dir + filename) + + def find_files(self, destination): + """ + Finds all scss files in the given destination. (ignore files starting with _) + """ + for root, dirs, files in os.walk(destination): + for f in files: + if (f.endswith('.scss') or f.endswith('.sass')) and not f.startswith('_'): + yield os.path.join(root, f) + + def thread(self, output, watch_files): + while True: + if not self.run_watcher: + self.watcher = None + break + for filename, dependencies in watch_files: + self.compile_file(filename, output, dependencies) + time.sleep(1) + + def on_server_spawn(self, **extra): + self.run_watcher = True + + def on_server_stop(self, **extra): + if self.watcher is not None: + self.run_watcher = False + print('stopped') + + def make_sure_path_exists(self, path): + try: + os.makedirs(path) + except OSError as exception: + if exception.errno != errno.EEXIST: + raise + + def on_before_build_all(self, builder, **extra): + try: # lektor 3+ + is_enabled = self.is_enabled(builder.extra_flags) + except AttributeError: # lektor 2+ + is_enabled = self.is_enabled(builder.build_flags) + + # only run when server runs + if not is_enabled or self.watcher: + return + + root_scss = os.path.join(self.env.root_path, self.source_dir ) + output = os.path.join(self.env.root_path, self.output_dir ) + config_file = os.path.join(self.env.root_path, 'configs/scss.ini') + + # output path has to exist + #os.makedirs(output, exist_ok=True) when python2 finally runs out + self.make_sure_path_exists(output) + + dependencies = [] + if ( os.path.isfile(config_file)): + dependencies.append(config_file) + + if self.run_watcher: + watch_files = [] + for filename in self.find_files(root_scss): + dependencies += self.find_dependencies(filename) + watch_files.append([filename, dependencies]) + self.watcher = threading.Thread(target=self.thread, args=(output, watch_files)) + self.watcher.start() + else: + for filename in self.find_files(root_scss): + # get dependencies by searching imports in target files + dependencies += self.find_dependencies(filename) + self.compile_file(filename, output, dependencies) diff --git a/packages/lektor-scss/setup.py b/packages/lektor-scss/setup.py new file mode 100644 index 0000000..382f42e --- /dev/null +++ b/packages/lektor-scss/setup.py @@ -0,0 +1,41 @@ +#!/usr/bin/env python3 +# -*- coding: utf-8 -*- +import ast +import io +import re + +from setuptools import setup, find_packages + +with io.open('README.md', 'rt', encoding="utf8") as f: + readme = f.read() + +setup( + author='L3D', + author_email='l3d@c3woc.de', + description='Lektor plugin to compile css out of sass - based on libsass', + keywords='Lektor plugin', + license='MIT', + long_description=readme, + long_description_content_type='text/markdown', + name='lektor-scss', + packages=find_packages(), + py_modules=['lektor_scss'], + url='https://github.com/chaos-bodensee/lektor-scss.git', + version='1.4.1', + install_requires = [ + "libsass==0.21.0", "termcolor", + ], + classifiers=[ + "Development Status :: 5 - Production/Stable", + 'Framework :: Lektor', + "Environment :: Plugins", + "Intended Audience :: Developers", + "License :: OSI Approved :: MIT License", + "Programming Language :: Python :: 3", + ], + entry_points={ + 'lektor.plugins': [ + 'scss = lektor_scss:scssPlugin', + ] + } +)