new name for example of recolour

Author: morulus

examples/recolor/build/postcss-logo.css

@@ -0,0 +1,3 @@
+.postCssLogo path {
+  fill: purple;
+}

examples/recolor/package.json

@@ -0,0 +1,23 @@
+{
+  "description": "Switch color themes via postcss-import-sub",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node start.js"
+  },
+  "keywords": [
+    "postcss",
+    "postcss-import-sub"
+  ],
+  "author": "Vladimir Kalmykov <[email protected]>",
+  "license": "MIT",
+  "devDependencies": {
+    "chalk": "^1.1.3",
+    "express": "^4.14.0",
+    "gulp": "^3.9.1",
+    "gulp-postcss": "^6.2.0",
+    "opn": "^4.0.2",
+    "postcss-import-sub": "^1.1.0",
+    "postcss-simple-vars": "^3.0.0"
+  }
+}

examples/recolor/postcss.config.js

@@ -0,0 +1,15 @@
+"use strict";
+const themeName = process.env.COLOR || 'default';
+
+module.exports = {
+  plugins: [
+    require('../../index.js')([
+      {
+        base: /src/,
+        id: /color\.css/,
+        path: "<root>/themes/"+themeName+"/"
+      }
+    ]),
+    require('postcss-simple-vars')
+  ]
+}

examples/recolor/public/index.html

@@ -0,0 +1,17 @@
+Color theme
+--
+
+postcss-import-sub example
+==
+
+# Usage
+
+Run with normal theme:
+```shell
+npm start
+```
+
+Run with purple theme:
+```shell
+COLOR=purple npm start
+```

examples/recolor/readme.md

@@ -0,0 +1 @@
+$logoColor: red;

examples/recolor/src/color.css

@@ -0,0 +1,5 @@
+@import "color.css";
+
+.postCssLogo path {
+  fill: $logoColor;
+}

examples/recolor/src/postcss-logo.css

@@ -0,0 +1,45 @@
+"use strict";
+const gulp = require('gulp');
+const express = require('express');
+const themeName = process.env.COLOR || 'default';
+const chalk = require('chalk');
+const launch = require('opn');
+const path = require('path');
+const subImport = require('postcss-import-sub');
+
+console.log(chalk.magenta('Build...'));
+
+if (themeName !== 'default') {
+  console.log(chalk.magenta('Using '+themeName+' theme'));
+}
+
+var postcss    = require('gulp-postcss');
+
+gulp.src('src/postcss-logo.css')
+.pipe( postcss([
+  subImport([
+    {
+      base: /src/,
+      id: /color\.css/,
+      path: "<root>/themes/"+themeName+"/"
+    }
+  ]),
+  require('postcss-simple-vars')
+]) )
+.pipe( gulp.dest('./build/') )
+.on('end', function() {
+  console.log(chalk.magenta('Completed'));
+
+  const app = express();
+
+  app.use(express.static('public'));
+
+  app.get('/style.css', function (req, res) {
+    res.sendFile(path.resolve(__dirname, './build/postcss-logo.css'));
+  })
+
+  app.listen(3000);
+
+  console.log(chalk.magenta('Open http://localhost:3000/ to see result.'));
+  launch('http://localhost:3000');
+});

examples/recolor/start.js

@@ -0,0 +1 @@
+$logoColor: purple;