Add exercises

Author: keik

index.js

@@ -5,12 +5,18 @@ if (!global.Promise) { global.Promise = require('promise-polyfill'); }
 var fs = require('fs');
 var path = require('path');
 var Cmify = require('./cmify');
-var Core = require('css-modules-loader-core');
 var FileSystemLoader = require('./file-system-loader');
 var assign = require('object-assign');
 var stringHash = require('string-hash');
 var ReadableStream = require('stream').Readable;
 var through = require('through2');
+var postcss = require('postcss')
+var scope = require('postcss-modules-scope')
+var localByDefault = require('postcss-modules-local-by-default')
+var extractImports = require('postcss-modules-extract-imports')
+var values = require('postcss-modules-values')
+var parser = require('postcss-modules-parser')
+var identity = require('lodash').identity
 
 /*
   Custom `generateScopedName` function for `postcss-modules-scope`.
@@ -42,7 +48,6 @@ function generateLongName (name, filename) {
   Get the default plugins and apply options.
 */
 function getDefaultPlugins (options) {
-  var scope = Core.scope;
   var customNameFunc = options.generateScopedName;
   var defaultNameFunc = process.env.NODE_ENV === 'production' ?
       generateShortName :
@@ -51,10 +56,11 @@ function getDefaultPlugins (options) {
   scope.generateScopedName = customNameFunc || defaultNameFunc;
 
   return [
-    Core.values
-    , Core.localByDefault
-    , Core.extractImports
+    values
+    , localByDefault
+    , extractImports
     , scope
+    , parser
   ];
 }
 

package.json

@@ -8,6 +8,12 @@
     "debug": "^2.2.0",
     "dependency-graph": "^0.4.1",
     "object-assign": "^3.0.0",
+    "postcss": "^5.2.4",
+    "postcss-modules-extract-imports": "^1.0.1",
+    "postcss-modules-local-by-default": "^1.1.1",
+    "postcss-modules-parser": "^1.1.0",
+    "postcss-modules-scope": "^1.0.2",
+    "postcss-modules-values": "^1.2.2",
     "promise-polyfill": "^2.1.0",
     "resolve": "^1.1.7",
     "string-hash": "^1.1.0",

playground/cm1.css

@@ -0,0 +1,3 @@
+.cm1_a {
+  background: blue;
+}

playground/postcss.js

@@ -0,0 +1,22 @@
+var postcss = require('postcss')
+var scope = require('postcss-modules-scope')
+var localByDefault = require('postcss-modules-local-by-default')
+var extractImports = require('postcss-modules-extract-imports')
+var values = require('postcss-modules-values')
+var parser = require('postcss-modules-parser')
+var identity = require('lodash').identity
+
+var runner = postcss([scope])
+
+function fetch(to, from) {
+  console.log(to, from);
+}
+var results = runner.process(`:local(.continueButton) {
+  color: green;
+}`, {from: 'aaa.css'}).then((res) => {
+  console.log(res)
+  console.log('============');
+  console.log(res.css);
+}).catch((err) => {
+  console.error(err);
+})

playground/postcss2.js

@@ -0,0 +1,62 @@
+var postcss = require('postcss')
+var myp = postcss.plugin('myp', (opts) => {
+  return (css) => {
+    css.walkRules(function (rule) {
+      console.log('@@@@@@@@@', rule);
+      rule.walkDecls(function (decl, i) {
+        console.log('##########', decl, i);
+      })
+    })
+  }
+})
+
+var psScope = require( 'postcss-modules-scope')
+var psLocal = require( 'postcss-modules-local-by-default')
+var psImports = require( 'postcss-modules-extract-imports')
+var psParser = require( 'postcss-modules-parser')
+
+var runner = postcss()
+function fetch(to, from,a,b,c) {
+  console.log('||||||||||||||||||||||||||||||||', to, from,a,b,c);
+  return this.process(require('fs').readFileSync(to), to).root.tokens
+}
+runner
+  .use(myp)
+  .use(psLocal)
+  .use(psImports)
+  .use(psScope)
+  .use(new psParser({fetch: fetch.bind(runner)}))
+
+// var runner = postcss([
+//   myp,
+//   psLocal,
+//   psImports,
+//   psScope,
+//   psParser({fetch: function(to, from,a,b,c) {
+//     console.log('||||||||||||||||||||||||||||||||', to, from,a,b,c);
+//     console.log(this);
+//     return runner.process(require('fs').readFileSync(to), to).root.tokens
+//   }.bind(runner)})
+// ])
+
+var results = runner
+      .process(`
+.className {
+  color: green;
+  background: red;
+}
+
+.otherClassName {
+  composes: className;
+  color: yellow;
+}
+
+.otherClassName2 {
+  composes: cm1_a from './cm1.css';
+  color: yellow;
+}`, {from: 'aaa.css'})
+      .then(res => {
+        console.log('=====================result==================');
+        console.log(res.root.tokens);
+        console.log(res.css);
+      })