CSS/SASS/LESS sourcemaps (#2489)

parcel-bundler · Mar 5, 2019 · 8deb85d · 8deb85d
1 parent f68f0df
commit 8deb85d
Show file tree

Hide file tree

Showing 41 changed files with 1,198 additions and 209 deletions.
diff --git a/packages/core/integration-tests/test/css.js b/packages/core/integration-tests/test/css.js
@@ -23,7 +23,11 @@ describe('css', function() {
         {
           name: 'index.css',
           assets: ['index.css', 'local.css'],
-          childBundles: []
+          childBundles: [
+            {
+              type: 'map'
+            }
+          ]
         }
       ]
     });
@@ -50,21 +54,30 @@ describe('css', function() {
       ],
       childBundles: [
         {
+          type: 'css',
           name: 'index.css',
           assets: ['index.css'],
-          childBundles: []
+          childBundles: [
+            {
+              type: 'map'
+            }
+          ]
         },
         {
-          type: 'map'
+          name: 'index.js.map'
         },
         {
           type: 'js',
-          assets: ['local.js', 'local.css'],
+          assets: ['local.css', 'local.js'],
           childBundles: [
             {
               type: 'css',
               assets: ['local.css'],
-              childBundles: []
+              childBundles: [
+                {
+                  type: 'map'
+                }
+              ]
             },
             {
               type: 'map'
@@ -91,7 +104,11 @@ describe('css', function() {
         {
           name: 'index.css',
           assets: ['index.css', 'other.css', 'local.css'],
-          childBundles: []
+          childBundles: [
+            {
+              type: 'map'
+            }
+          ]
         },
         {
           name: 'index.js.map',
@@ -124,7 +141,11 @@ describe('css', function() {
         {
           name: 'index.css',
           assets: ['index.css'],
-          childBundles: []
+          childBundles: [
+            {
+              type: 'map'
+            }
+          ]
         },
         {
           type: 'map'
@@ -179,7 +200,11 @@ describe('css', function() {
         {
           name: 'index.css',
           assets: ['index.css'],
-          childBundles: []
+          childBundles: [
+            {
+              type: 'map'
+            }
+          ]
         },
         {
           type: 'map'
@@ -277,7 +302,11 @@ describe('css', function() {
         {
           name: 'index.css',
           assets: ['index.css'],
-          childBundles: []
+          childBundles: [
+            {
+              type: 'map'
+            }
+          ]
         },
         {
           type: 'map'
@@ -325,7 +354,11 @@ describe('css', function() {
         {
           name: 'index.css',
           assets: ['composes-1.css', 'composes-2.css', 'mixins.css'],
-          childBundles: []
+          childBundles: [
+            {
+              type: 'map'
+            }
+          ]
         },
         {
           type: 'map'
@@ -383,7 +416,11 @@ describe('css', function() {
         {
           name: 'index2.css',
           assets: ['composes-3.css', 'mixins.scss'],
-          childBundles: []
+          childBundles: [
+            {
+              type: 'map'
+            }
+          ]
         },
         {
           type: 'map'
@@ -418,7 +455,11 @@ describe('css', function() {
         {
           name: 'index3.css',
           assets: ['composes-4.css', 'mixins.css'],
-          childBundles: []
+          childBundles: [
+            {
+              type: 'map'
+            }
+          ]
         },
         {
           type: 'map'
@@ -458,7 +499,11 @@ describe('css', function() {
         {
           name: 'index4.css',
           assets: ['composes-5.css', 'mixins-intermediate.css', 'mixins.css'],
-          childBundles: []
+          childBundles: [
+            {
+              type: 'map'
+            }
+          ]
         },
         {
           type: 'map'
@@ -496,7 +541,11 @@ describe('css', function() {
         {
           name: 'index5.css',
           assets: ['composes-6.css', 'mixins.css'],
-          childBundles: []
+          childBundles: [
+            {
+              type: 'map'
+            }
+          ]
         },
         {
           type: 'map'
@@ -532,7 +581,7 @@ describe('css', function() {
     );
     assert(css.includes('.local'));
     assert(css.includes('.index'));
-    assert(!css.includes('\n'));
+    assert.equal(css.split('\n').length, 2); // sourceMappingURL
   });
 
   it('should automatically install postcss plugins with npm if needed', async function() {

diff --git a/packages/core/integration-tests/test/glob.js b/packages/core/integration-tests/test/glob.js
@@ -54,7 +54,11 @@ describe('glob', function() {
         {
           name: 'index.css',
           assets: ['index.css', 'other.css', 'local.css'],
-          childBundles: []
+          childBundles: [
+            {
+              type: 'map'
+            }
+          ]
         },
         {
           type: 'map'

diff --git a/packages/core/integration-tests/test/html.js b/packages/core/integration-tests/test/html.js
@@ -24,7 +24,11 @@ describe('html', function() {
         {
           type: 'css',
           assets: ['index.css'],
-          childBundles: []
+          childBundles: [
+            {
+              type: 'map'
+            }
+          ]
         },
         {
           type: 'html',
@@ -151,7 +155,11 @@ describe('html', function() {
             {
               type: 'css',
               assets: ['index.css'],
-              childBundles: []
+              childBundles: [
+                {
+                  type: 'map'
+                }
+              ]
             },
             {
               type: 'map'
@@ -185,7 +193,11 @@ describe('html', function() {
             {
               type: 'css',
               assets: ['index.css'],
-              childBundles: []
+              childBundles: [
+                {
+                  type: 'map'
+                }
+              ]
             },
             {
               type: 'map'
@@ -219,9 +231,6 @@ describe('html', function() {
           type: 'css',
           assets: ['index.css'],
           childBundles: [
-            {
-              type: 'map'
-            },
             {
               type: 'js',
               assets: [
@@ -230,7 +239,14 @@ describe('html', function() {
                 'css-loader.js',
                 'hmr-runtime.js'
               ],
-              childBundles: []
+              childBundles: [
+                {
+                  type: 'map'
+                }
+              ]
+            },
+            {
+              type: 'map'
             }
           ]
         }
@@ -257,7 +273,11 @@ describe('html', function() {
             {
               type: 'css',
               assets: ['index.css'],
-              childBundles: []
+              childBundles: [
+                {
+                  type: 'map'
+                }
+              ]
             },
             {
               type: 'map'

diff --git a/packages/core/integration-tests/test/integration/sourcemap-css-existing/style.css b/packages/core/integration-tests/test/integration/sourcemap-css-existing/style.css
@@ -0,0 +1,5 @@
+@import "./test/library.css";
+
+main {
+	display: none;
+}
diff --git a/packages/core/integration-tests/test/integration/sourcemap-css-existing/test/library.css b/packages/core/integration-tests/test/integration/sourcemap-css-existing/test/library.css
diff --git a/packages/core/integration-tests/test/integration/sourcemap-css-existing/test/library.css.map b/packages/core/integration-tests/test/integration/sourcemap-css-existing/test/library.css.map
diff --git a/...ages/core/integration-tests/test/integration/sourcemap-css-existing/test/library.raw.scss b/...ages/core/integration-tests/test/integration/sourcemap-css-existing/test/library.raw.scss
@@ -0,0 +1,13 @@
+$font-stack:    Helvetica, sans-serif;
+$primary-color: #333;
+
+body {
+  font: 100% $font-stack;
+  color: $primary-color;
+
+  div {
+  	background-color: red;
+  	width: 100px;
+  	height: 100px;
+  }
+}
diff --git a/packages/core/integration-tests/test/integration/sourcemap-css-import/another-style.css b/packages/core/integration-tests/test/integration/sourcemap-css-import/another-style.css
@@ -0,0 +1,3 @@
+main {
+	font-family: monospace;
+}
diff --git a/packages/core/integration-tests/test/integration/sourcemap-css-import/other-style.css b/packages/core/integration-tests/test/integration/sourcemap-css-import/other-style.css
@@ -0,0 +1,5 @@
+
+div {
+	width: 100px;
+	height: 100px;
+}
diff --git a/packages/core/integration-tests/test/integration/sourcemap-css-import/style.css b/packages/core/integration-tests/test/integration/sourcemap-css-import/style.css
@@ -0,0 +1,8 @@
+
+@import "./other-style.css";
+
+body {
+	background-color: red;
+}
+
+@import "./another-style.css";
diff --git a/packages/core/integration-tests/test/integration/sourcemap-css/style.css b/packages/core/integration-tests/test/integration/sourcemap-css/style.css
@@ -0,0 +1,4 @@
+
+body {
+	background-color: red;
+}
diff --git a/packages/core/integration-tests/test/integration/sourcemap-less/style.less b/packages/core/integration-tests/test/integration/sourcemap-less/style.less
@@ -0,0 +1,5 @@
+@value: 100px * 2;
+
+div {
+  width: @value;
+}
diff --git a/packages/core/integration-tests/test/integration/sourcemap-sass-imported/other.scss b/packages/core/integration-tests/test/integration/sourcemap-sass-imported/other.scss
@@ -0,0 +1,5 @@
+$variable: monospace;
+
+div {
+  font-family: $variable;
+}
diff --git a/packages/core/integration-tests/test/integration/sourcemap-sass-imported/style.css b/packages/core/integration-tests/test/integration/sourcemap-sass-imported/style.css
@@ -0,0 +1,5 @@
+@import "./other.scss";
+
+body {
+	color: red;
+}
diff --git a/packages/core/integration-tests/test/integration/sourcemap-sass/style.scss b/packages/core/integration-tests/test/integration/sourcemap-sass/style.scss
@@ -0,0 +1,5 @@
+$variable: #333;
+
+body {
+  color: $variable;
+}