Bring `postcss-modules` to your django project, transpiling static .cssm files on the fly, without NodeJS require!
Project description
django-postcss-modules
Bring postcss-modules
to your django project, transpiling static .cssm files on the fly, without NodeJS require!
Install
pip install django-postcss-modules
Static files transpiling config
- Add
postcss_modules
to your djangoINSTALLED_APPS
- Add
postcss_modules.middlewares.PostCSSModulesMiddleware
to your djangoMIDDLEWARE
note the order
[ ... 'postcss_modules.middlewares.PostCSSModulesMiddleware', 'whitenoise.middleware.WhiteNoiseMiddleware', ... ]
- Config django
STATICFILES_STORAGE = 'postcss_modules.storage.PostCSSModulesStorage'
Global Options
Default options is:
{
'polyfill': 'postcss-modules-v8-polyfill.js',
'transpiler': 'npm/postcss-modules-standalone@1.0.1/index.bundle.min.js',
'setup': 'postcss-modules-setup.js',
'extensions': ['.cssm'],
'mimetypes': {
'.cssm': 'text/css'
},
'max_time': 3 # transpiling max wait time, in second
}
You can customize by provide POSTCSS_MODULES
in your django settings, for example, custom max time:
POSTCSS_MODULES = {
'max_time': 30
}
Template Support
Sometimes transpiling in your template file is more make sense than static file,
you can use postcssmodules
tag to do that.
{% load static postcss_modules %}
...
<style id="indexStyles">
{% postcssmodules %}
:global .page {
padding: 20px;
}
@value hi from '{% static "myapp/css/consts.cssm" %}';
.title {
composes: title from "{% static "myapp/css/mixins.cssm" %}";
color: green;
}
.article {
font-size: 16px;
color: hi;
}
{% endpostcssmodules %}
</style>
...
<script>
const _styles = document.querySelector('#indexStyles').sheet
const styles = JSON.parse(_styles.cssRules[_styles.cssRules.length - 1].style.getPropertyValue('--json'));
element.innerHTML = '<div class="' + styles.title + '">';
</script>
...
Template tag also support use custom transpiling option, for example:
{% postcssmodules max_time=30 %}
.title {
composes: title from "{% static "myapp/css/mixins.cssm" %}";
color: green;
}
{% endpostcssmodules %}
FAQ
-
Static file not get transpiled
if you use django
runserver
command to run server and the settingDEBUG=True
, please add--nostatic
option to command -
I want use other storage
you should write your own storage to inherit
PostCSSModulesStorage
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for django-postcss-modules-0.1.0.tar.gz
Algorithm | Hash digest | |
---|---|---|
SHA256 | d756a8489b8ff6b8be0c888706c985bbcf4e9d6e2a1fdcd48a21614f110d2ac3 |
|
MD5 | 1afb5e52d660736e5e3057909eef1200 |
|
BLAKE2b-256 | ff30ce7266edad3b6599738f2144c66a0eaaa805dc19ca0d9bfec6af965daf45 |
Hashes for django_postcss_modules-0.1.0-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 5d938e98033836ff3b4e73befe79af559226d04d180f483266a140cce2b0a03f |
|
MD5 | 6e58e378656e62a3e4e1fa4770eb6ef1 |
|
BLAKE2b-256 | 25e0c35cee9bc32089930c59a1203fd9b2e241b4bf3d26734c1bd45095e7ee10 |