PostCSS is a tool to transform styles with JS plugins. By @sitnikcode and @evilmartians.
- Tweets 4,830
- Following 67
- Followers 9,151
- Likes 468
ALT .foo { color: var(--brand-1); padding: var(--size-1) var(--size-2); margin-block-start: var(--size-2); animation: var(--fade-in); } @media (--dark) { .foo { color: white; } }
ALT @custom-media --dark (prefers-color-scheme: dark); :root { --brand-1: #81A1C1; --size-1: 1rem; --size-2: 2rem; --fade-in: fade-in .5s ease; } .foo { color: var(--brand-1); padding: var(--size-1) var(--size-2); margin-block-start: var(--size-2); animation: var(--fade-in); } @media (--dark) { .foo { color: white; } } @keyframes fade-in { to { opacity: 1; } }
![const postcssjitprops = require('postcss-jit-props');
const MyProps = {
'--brand-font': 'system-ui, sans-serif',
'--size-1': '1ch',
'--size-2': '2ch',
'--size-3': '3ch',
'--size-4': '4ch',
'--size-5': '5ch',
'--size-viewport-1': '1vmin',
'--size-viewport-2': '5vmin',
'--size-viewport-3': '10vmin',
'--brand-0': '#f8f9fa',
'--brand-1': '#f1f3f5',
'--brand-2': '#e9ecef',
'--brand-3': '#dee2e6',
'--brand-4': '#ced4da',
'--brand-5': '#adb5bd',
'--fade-in': 'fade-in .5s ease',
'--fade-in-@': '@keyframes fade-in {to { opacity: 1 }}',
'--dark': '@custom-media --dark (prefers-color-scheme: dark);',
};
module.exports = {
plugins: [postcssjitprops(MyProps)],
};](/pic/orig/media%2FFBcKH17UcAAY7nU.jpg)
ALT const postcssjitprops = require('postcss-jit-props'); const MyProps = { '--brand-font': 'system-ui, sans-serif', '--size-1': '1ch', '--size-2': '2ch', '--size-3': '3ch', '--size-4': '4ch', '--size-5': '5ch', '--size-viewport-1': '1vmin', '--size-viewport-2': '5vmin', '--size-viewport-3': '10vmin', '--brand-0': '#f8f9fa', '--brand-1': '#f1f3f5', '--brand-2': '#e9ecef', '--brand-3': '#dee2e6', '--brand-4': '#ced4da', '--brand-5': '#adb5bd', '--fade-in': 'fade-in .5s ease', '--fade-in-@': '@keyframes fade-in {to { opacity: 1 }}', '--dark': '@custom-media --dark (prefers-color-scheme: dark);', }; module.exports = { plugins: [postcssjitprops(MyProps)], };
ALT van parked at the street using the same alchemy-related logo postcss uses
