Skip to content

Commit

Permalink
Add lektor-scss plugin
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
opsyne committed May 26, 2022
1 parent baa04f5 commit 4071e37
Show file tree
Hide file tree
Showing 5 changed files with 316 additions and 0 deletions.
22 changes: 22 additions & 0 deletions packages/lektor-scss/LICENSE
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
MIT License

Copyright (c) 2019 L3D <[email protected]>
Copyright (c) 2019 maxbachmann <[email protected]>

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.
73 changes: 73 additions & 0 deletions packages/lektor-scss/README.md
Original file line number Diff line number Diff line change
@@ -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/)

<!-- How to add to pypi: https://packaging.python.org/tutorials/packaging-projects/ -->
<!-- Python RELEASEING moved to github action -->
<!-- You have to edit the version number in README and setup.py manually -->
7 changes: 7 additions & 0 deletions packages/lektor-scss/configs/scss.ini
Original file line number Diff line number Diff line change
@@ -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/
173 changes: 173 additions & 0 deletions packages/lektor-scss/lektor_scss.py
Original file line number Diff line number Diff line change
@@ -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)
41 changes: 41 additions & 0 deletions packages/lektor-scss/setup.py
Original file line number Diff line number Diff line change
@@ -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='[email protected]',
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',
]
}
)

0 comments on commit 4071e37

Please sign in to comment.