Initial Commit

Author: Zhicheng Wang

.gitignore

@@ -0,0 +1,93 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules
+jspm_packages
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+### JetBrains template
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio and Webstorm
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff:
+.idea/workspace.xml
+.idea/tasks.xml
+
+# Sensitive or high-churn files:
+.idea/dataSources/
+.idea/dataSources.ids
+.idea/dataSources.xml
+.idea/dataSources.local.xml
+.idea/sqlDataSources.xml
+.idea/dynamic.xml
+.idea/uiDesigner.xml
+
+# Gradle:
+.idea/gradle.xml
+.idea/libraries
+
+# Mongo Explorer plugin:
+.idea/mongoSettings.xml
+
+## File-based project format:
+*.iws
+
+## Plugin-specific files:
+
+# IntelliJ
+/out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties

README.md

@@ -0,0 +1,26 @@
+# css-with-mapping loader for webpack
+
+## Usage
+
+```js
+var result = require('css-with-mapping!css!sass!./test.scss');
+// => returns sass rendered to CSS with /*# sourceURL=... */ and /*# sourceMappingURL=... */.
+```
+
+## Use Case
+
+In some cases (e.g. Angular2 [Component Styles](https://angular.io/docs/ts/latest/guide/component-styles.html)) you need to have style as a string.
+
+You can cast the require output to a string, e.g.
+
+```typescript
+@Component({
+    selector: 'my-css-test',
+    template: '<div>some content</div>',
+    styles: [
+        require('css-with-mapping!css!sass!./test.scss') // Of course, you will certainly configure the loader in the webpack configuration
+    ]
+})
+```
+
+** Note that the current version of Angular (2.4.5) will lose the sourceURL and sourceMappingURL comment, so unless you patch the code for Angular, otherwise the loader will not work properly. Follow Pull Request https://github.com/angular/angular/pull/14175 for more information **

package.json

@@ -0,0 +1,25 @@
+{
+  "name": "css-with-mapping-loader",
+  "description": "css to string with source mapping loader for webpack",
+  "version": "0.0.1",
+  "main": "./src/css-with-mapping.js",
+  "author": {
+    "name": "Zhicheng Wang",
+    "email": "asnowwolf@gmail.com",
+    "url": "https://github.com/asnowwolf/css-with-mapping-loader"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@github.com:asnowwolf/css-with-mapping-loader.git"
+  },
+  "keywords": [
+    "webpack",
+    "css-with-mapping",
+    "css-to-string",
+    "to-string"
+  ],
+  "license": "MIT",
+  "dependencies": {
+    "convert-source-map": "^1.3.0"
+  }
+}

src/css-with-mapping.js

@@ -0,0 +1,20 @@
+/**
+ * @see https://webpack.github.io/docs/loaders.html
+ */
+module.exports = function (content) {
+    if (!content || content.length !== 1) {
+        throw new Error('The css-with-mapping-loader must be chained after the css-loader');
+    }
+    var cssObject = content[0];
+    var cssContent = cssObject[1] || '';
+    var cssMapping = cssObject[3];
+    if (!cssMapping) {
+        return cssContent;
+    }
+    var convertSourceMap = require('convert-source-map');
+    var sourceMapping = convertSourceMap.fromObject(cssMapping).toComment({multiline: true});
+    var sourceURLs = cssMapping.sources.map(function (source) {
+        return '/*# sourceURL=' + cssMapping.sourceRoot + source + ' */'
+    });
+    return [cssContent].concat(sourceURLs).concat([sourceMapping]).join('\n');
+};