postcss-dpx
v1.0.0
Published
DEKUVE Dynamic Pixel (DPX) standard compiler for PostCSS
Downloads
11
Readme
postcss-dpx
DEKUVE Dynamic Pixel (DPX) standard compiler for PostCSS.
Move the heavy layout calculations from the browser's runtime to the compile phase. postcss-dpx intercepts custom dpx units and converts them into native, hardware-accelerated CSS calc() operations tied to a single root variable. This delivers a 0% CPU/DOM parsing overhead on the client side.
1. Installation & Setup
Ensure you have Node.js installed on your machine. The setup commands are identical across Linux, Windows, and macOS.
Install the plugin and PostCSS as dev dependencies:
npm install postcss-dpx postcss --save-devAdd to your PostCSS Configuration
Create a postcss.config.js file in the root of your project and register the plugin:
module.exports = {
plugins: [
require('postcss-dpx')
]
}2. Create Project Structure
To maintain a clean production environment, separate your source layouts from the compiled distribution files. Set up your directories exactly like this:
📁 your-project/
📁 src/ <-- Source environment (Work happens here)
📄 style.css (Your raw CSS with dpx units)
📁 dist/ <-- Production build (Generated automatically)
📄 style.css (Valid, cross-browser CSS ready for production)
📄 index.html (Your HTML layout template)
📄 dpx-postcss.js (The lightweight runtime controller)
📄 build.js (The automation process script)3. Writing Code (HTML & CSS)
Step A: Write your Source Styles (src/style.css)
Declare the scale variable under the :root pseudo-class and write your code using standard dpx units:
:root {
/* This variable is strictly managed by dpx-postcss.js */
--dpx-scale: 1;
}
.card {
width: 300dpx;
padding: 20dpx;
border-radius: 15dpx;
}Step B: Prepare your Markup (index.html)
Link the compiled production styles from the dist folder, and link the client controller before the closing </body> tag:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DPX Standard App</title>
<link rel="stylesheet" href="dist/style.css">
</head>
<body>
<div class="card">Content Panel</div>
<script src="dpx-postcss.js"></script>
</body>
</html>4. Building the Plugin (build.js)
Create an automation builder file named build.js in your root folder with the following Node.js script. This file reads your source code, runs it through the compiler, and saves it to the distribution folder:
const fs = require('fs');
const postcss = require('postcss');
const plugin = require('postcss-dpx'); // Imports the compiler
// Ensure the distribution directory exists
if (!fs.existsSync('./dist')) {
fs.mkdirSync('./dist');
}
// Read the raw CSS source
const cssInput = fs.readFileSync('./src/style.css', 'utf8');
// Process and compile
postcss([plugin()])
.process(cssInput, { from: './src/style.css', to: './dist/style.css' })
.then(result => {
fs.writeFileSync('./dist/style.css', result.css);
console.log('✅ SUCCESS! Production CSS has been compiled.');
})
.catch(err => {
console.error('❌ Build Error:', err);
});5. Launch & Golden Rule of DPX
To execute your compilation build step, run the script via Node.js inside your terminal:
node build.js⚡ The Magic of Runtime (Zero Recompilation)
You need to invoke node build.js ONLY when you add new style rules, change dimensions, or create new structural classes inside your source src/style.css file.
If you are just tweaking markup in index.html, injecting data, adding elements, zooming screens inside the browser, or rotating mobile device viewports—no recompilation is required! The client controller dpx-postcss.js acts as an independent "Hardware Pulse". It intercepts physical display events on the fly and updates the root CSS variable instantly with zero lag.
6. Deployment Rules
When publishing your responsive web asset, avoid uploading unnecessary developer configurations. The src/ directory, build.js, and the node_modules/ folder stay safely on your local computer.
Upload only these core elements to your production web server:
- The
index.htmlfile (along with your static assets like assets/images/fonts). - The
dist/directory (which holds your fully valid, post-processedstyle.css). - The standalone
dpx-postcss.jscontroller script.
Your responsive application is now completely independent of physical screen fragmentation and ready for high-performance deployment!
License
Licensed under the Apache License, Version 2.0.