fix: 🐛 postcss sourcemap

✅ Closes: #251

Author: kaisermann

src/transformers/postcss.ts

@@ -15,7 +15,7 @@ async function process({
 }) {
   const { css, map, messages } = await postcss(plugins).process(content, {
     from: filename,
-    map: { prev: sourceMap },
+    map: { prev: sourceMap, inline: false },
     parser,
     syntax,
   });

test/transformers/postcss.test.ts

@@ -5,132 +5,147 @@ import { resolve } from 'path';
 
 import sveltePreprocess from '../../src';
 import { preprocess, spyConsole } from '../utils';
+import { transformer } from '../../src/transformers/postcss';
 
 spyConsole({ silent: true });
 
-describe('transformer - postcss', () => {
-  it('should not transform plain css with postcss if { postcss: falsy }', async () => {
-    const template = `<div></div><style>div{appearance:none;}</style>`;
-    const preprocessed = await preprocess(template, sveltePreprocess());
+test('transformer returns source map', async () => {
+  const content = 'div{color:red}';
+  const filename = '/file';
+  const options = {
+    plugins: [
+      require('autoprefixer')({
+        overrideBrowserslist: 'Safari >= 5.1',
+      }),
+    ],
+  };
 
-    expect(preprocessed.toString()).not.toMatch(/-webkit-/);
-  });
+  const { map } = await transformer({ content, filename, options });
 
-  it('should not transform plain css with postcss if { postcss: true } and no configuration file at cwd', async () => {
-    const template = `<div></div><style>div{appearance:none;}</style>`;
-    const preprocessed = await preprocess(
-      template,
-      sveltePreprocess({
-        postcss: true,
-      }),
-    );
+  expect(map).toBeTruthy();
+});
 
-    expect(preprocessed.toString()).not.toMatch(/-webkit-/);
-  });
+test('should not transform plain css with postcss if { postcss: falsy }', async () => {
+  const template = `<div></div><style>div{appearance:none;}</style>`;
+  const preprocessed = await preprocess(template, sveltePreprocess());
 
-  it('should transform plain css with postcss if { postcss: { plugins... } }', async () => {
-    const template = `<div></div><style>div{appearance:none;}</style>`;
-    const optsWithoutConfigFile = sveltePreprocess({
-      postcss: {
-        plugins: [
-          require('autoprefixer')({
-            overrideBrowserslist: 'Safari >= 5.1',
-          }),
-        ],
-      },
-    });
+  expect(preprocessed.toString()).not.toMatch(/-webkit-/);
+});
 
-    const preprocessed = await preprocess(template, optsWithoutConfigFile);
+test('should not transform plain css with postcss if { postcss: true } and no configuration file at cwd', async () => {
+  const template = `<div></div><style>div{appearance:none;}</style>`;
+  const preprocessed = await preprocess(
+    template,
+    sveltePreprocess({
+      postcss: true,
+    }),
+  );
+
+  expect(preprocessed.toString()).not.toMatch(/-webkit-/);
+});
 
-    expect(preprocessed.toString()).toMatch(/-webkit-/);
+test('should transform plain css with postcss if { postcss: { plugins... } }', async () => {
+  const template = `<div></div><style>div{appearance:none;}</style>`;
+  const optsWithoutConfigFile = sveltePreprocess({
+    postcss: {
+      plugins: [
+        require('autoprefixer')({
+          overrideBrowserslist: 'Safari >= 5.1',
+        }),
+      ],
+    },
   });
 
-  it('should transform async preprocessed css with postcss if { postcss: { plugins... } }', async () => {
-    const templateSass = `<div></div><style lang="scss">div{appearance:none;}</style>`;
-    const optsWithoutConfigFile = sveltePreprocess({
-      postcss: {
-        plugins: [
-          require('autoprefixer')({
-            overrideBrowserslist: 'Safari >= 5.1',
-          }),
-        ],
-      },
-    });
+  const preprocessed = await preprocess(template, optsWithoutConfigFile);
 
-    const preprocessed = await preprocess(templateSass, optsWithoutConfigFile);
+  expect(preprocessed.toString()).toMatch(/-webkit-/);
+});
 
-    expect(preprocessed.toString()).toMatch(/-webkit-/);
+test('should transform async preprocessed css with postcss if { postcss: { plugins... } }', async () => {
+  const templateSass = `<div></div><style lang="scss">div{appearance:none;}</style>`;
+  const optsWithoutConfigFile = sveltePreprocess({
+    postcss: {
+      plugins: [
+        require('autoprefixer')({
+          overrideBrowserslist: 'Safari >= 5.1',
+        }),
+      ],
+    },
   });
 
-  it('should transform plain css with postcss if { postcss: { configFilePath: ... } }', async () => {
-    const template = `<div></div><style>div{appearance:none;}</style>`;
-    const preprocessed = await preprocess(
-      template,
-      sveltePreprocess({
-        postcss: {
-          configFilePath: './test/fixtures/',
-        },
-      }),
-    );
+  const preprocessed = await preprocess(templateSass, optsWithoutConfigFile);
 
-    expect(preprocessed.toString()).toMatch(/-webkit-/);
-  });
+  expect(preprocessed.toString()).toMatch(/-webkit-/);
+});
 
-  it('should return @imported files as dependencies', async () => {
-    const template = `<style>@import './fixtures/style.css';</style>`;
-    const opts = sveltePreprocess({
+test('should transform plain css with postcss if { postcss: { configFilePath: ... } }', async () => {
+  const template = `<div></div><style>div{appearance:none;}</style>`;
+  const preprocessed = await preprocess(
+    template,
+    sveltePreprocess({
       postcss: {
-        plugins: [require('postcss-easy-import')],
+        configFilePath: './test/fixtures/',
       },
-    });
+    }),
+  );
 
-    const preprocessed = await preprocess(template, opts);
+  expect(preprocessed.toString()).toMatch(/-webkit-/);
+});
 
-    expect(preprocessed.dependencies).toContain(
-      resolve(__dirname, '..', 'fixtures', 'style.css'),
-    );
+test('should return @imported files as dependencies', async () => {
+  const template = `<style>@import './fixtures/style.css';</style>`;
+  const opts = sveltePreprocess({
+    postcss: {
+      plugins: [require('postcss-easy-import')],
+    },
   });
 
-  it('should allow custom postcss parsers', async () => {
-    const template = `<style>
+  const preprocessed = await preprocess(template, opts);
+
+  expect(preprocessed.dependencies).toContain(
+    resolve(__dirname, '..', 'fixtures', 'style.css'),
+  );
+});
+
+test('should allow custom postcss parsers', async () => {
+  const template = `<style>
 div
   color: red
 </style>`;
 
-    const opts = sveltePreprocess({
-      postcss: {
-        parser: require('sugarss'),
-        plugins: [require('postcss-easy-import')],
-      },
-    });
+  const opts = sveltePreprocess({
+    postcss: {
+      parser: require('sugarss'),
+      plugins: [require('postcss-easy-import')],
+    },
+  });
 
-    const preprocessed = await preprocess(template, opts);
+  const preprocessed = await preprocess(template, opts);
 
-    expect(preprocessed.toString()).toMatchInlineSnapshot(`
+  expect(preprocessed.toString()).toMatchInlineSnapshot(`
       "<style>
       div {
         color: red
       }</style>"
     `);
-  });
+});
 
-  it('automatically removes indentation for lang=sugarss ', async () => {
-    const template = `<style lang="sugarss">
+test('automatically removes indentation for lang=sugarss ', async () => {
+  const template = `<style lang="sugarss">
       div
         color: red
     </style>`;
 
-    const opts = sveltePreprocess({
-      postcss: true,
-    });
+  const opts = sveltePreprocess({
+    postcss: true,
+  });
 
-    const preprocessed = await preprocess(template, opts);
+  const preprocessed = await preprocess(template, opts);
 
-    expect(preprocessed.toString()).toMatchInlineSnapshot(`
+  expect(preprocessed.toString()).toMatchInlineSnapshot(`
       "<style lang=\\"sugarss\\">
       div {
         color: red
       }</style>"
     `);
-  });
 });