Do not process external stylesheets automatically

Author: micantoine

package.json

@@ -19,7 +19,7 @@
     "build": "npm run build:cjs && npm run build:esm",
     "build:cjs": "tsc --module commonjs --target es6 --outDir dist --declaration true",
     "build:esm": "tsc --module esnext --target esnext --outDir dist/esm && node tasks/parser.mjs && rm -rf dist/esm/",
-    "dev": "npm run build -- -w",
+    "dev": "npm run build:cjs -- -w",
     "lint": "eslint --ext .ts --fix ./src",
     "format": "prettier --write --loglevel warn ./{src,test}",
     "test": "jest",

src/index.ts

@@ -19,7 +19,7 @@ let pluginOptions: PluginOptions = {
 const markup = async ({ content, filename }: PreprocessorOptions): Promise<PreprocessorResult> => {
   const isIncluded = await isFileIncluded(pluginOptions.includePaths, filename);
 
-  if (!isIncluded) {
+  if (!isIncluded || (!pluginOptions.parseStyleTag && !pluginOptions.parseExternalStylesheet)) {
     return { code: content };
   }
 
@@ -32,7 +32,7 @@ const markup = async ({ content, filename }: PreprocessorOptions): Promise<Prepr
   // eslint-disable-next-line prefer-const
   let { mode, hashSeeder } = pluginOptions;
 
-  if (hasModuleAttribute(ast)) {
+  if (pluginOptions.parseStyleTag && hasModuleAttribute(ast)) {
     const moduleAttribute = ast.css.attributes.find((item) => item.name === 'module');
     mode = moduleAttribute.value !== true ? moduleAttribute.value[0].data : mode;
   }
@@ -77,7 +77,6 @@ export default module.exports = (options: Partial<PluginOptions>) => {
     ...pluginOptions,
     ...options,
   };
-
   return {
     markup,
   };

src/processors/processor.ts

@@ -96,12 +96,12 @@ export default class Processor {
    * @returns The CssModule updated component
    */
   public parse = (): string => {
-    if (hasModuleAttribute(this.ast)) {
+    if (this.options.parseStyleTag && hasModuleAttribute(this.ast)) {
       this.isParsingImports = false;
       this.styleParser(this);
     }
 
-    if (hasModuleImports(this.rawContent)) {
+    if (this.options.parseExternalStylesheet && hasModuleImports(this.rawContent)) {
       this.isParsingImports = true;
       parseImportDeclaration(this);
     }

test/nativeFixtures/stylesImports.test.js

@@ -29,6 +29,7 @@ describe('Native Mode Imports', () => {
     },{
       mode: 'native',
       localIdentName: '[local]-123',
+      parseExternalStylesheet: true,
     });
 
     expect(output).toBe(expectedOutput);

test/scopedFixtures/stylesAttribute.test.js

@@ -58,7 +58,7 @@ describe('Scoped Mode', () => {
     expect(output).toBe('<script>const red = true;</script><style module="scoped">.red-123 { color: red; } .blue-123 { color: blue; }</style><span class:red-123={red} class:blue-123={red}>Red</span>');
   });
 
-  test('Replace Multiple Clasnames on attribute', async () => {
+  test('Replace multiple classnames on attribute', async () => {
     const output = await compiler({
       source: '<style module="scoped">.red { color: red; } .bold { font-weight: bold }</style><span class="red bold">Red</span>'
     }, {
@@ -67,7 +67,7 @@ describe('Scoped Mode', () => {
     expect(output).toBe('<style module="scoped">.red-123 { color: red; } .bold-123 { font-weight: bold }</style><span class="red-123 bold-123">Red</span>');
   });
 
-  test('Replace Clasnames on conditional expression', async () => {
+  test('Replace classnames on conditional expression', async () => {
     const output = await compiler({
       source: `<style module="scoped">.red { color: red; } .bold { font-weight: bold }</style><span class="red {true ? 'bold' : 'red'} bold">Red</span>`
     }, {
@@ -76,7 +76,7 @@ describe('Scoped Mode', () => {
     expect(output).toBe(`<style module="scoped">.red-123 { color: red; } .bold-123 { font-weight: bold }</style><span class="red-123 {true ? 'bold-123' : 'red-123'} bold-123">Red</span>`);
   });
 
-  test('Replace Clasnames on component', async () => {
+  test('Replace classname on component', async () => {
     const output = await compiler({
       source: `<script>import Button from './Button.svelte';</script><style module="scoped">.red { color: red; }</style><Button class="red" />`
     }, {
@@ -113,4 +113,23 @@ describe('Scoped Mode', () => {
     expect(output).toBe(`<style module="scoped">.red-123 { color: red; }</style><span class="red-123" data-color="red-123">Red</span>`);
   });
 
+  test('Do not replace the classname', async () => {
+    const output = await compiler({
+      source: `<style>.red { color: red; }</style><span class="red">Red</span>`
+    }, {
+      localIdentName: '[local]-123',
+    });
+    expect(output).toBe(`<style>.red { color: red; }</style><span class="red">Red</span>`);
+  });
+
+  test('Do not replace the classname when `parseStyleTag` is off', async () => {
+    const output = await compiler({
+      source: `<style module="scoped">.red { color: red; }</style><span class="red">Red</span>`
+    }, {
+      localIdentName: '[local]-123',
+      parseStyleTag: false,
+    });
+    expect(output).toBe(`<style module="scoped">.red { color: red; }</style><span class="red">Red</span>`);
+  });
+
 });

test/scopedFixtures/stylesImports.test.js

@@ -1,6 +1,31 @@
 const compiler = require('../compiler.js');
 
 describe('Scoped Mode Imports', () => {
+  test('do no apply styling', async () => {
+    const source =
+    `<script>
+      import style from './assets/class.module.css';
+    </script>
+    <div class:style.error={true}>Error</div>
+    <div class:style.success={true}>Success</div>`;
+
+    const expectedOutput =
+    `<script>
+      import style from './assets/class.module.css';
+    </script>
+    <div class:style.error={true}>Error</div>
+    <div class:style.success={true}>Success</div>`;
+
+    const output = await compiler({
+      source,
+    },{
+      mode: 'scoped',
+      localIdentName: '[local]-123',
+    });
+
+    expect(output).toBe(expectedOutput);
+  });
+
   test('Import all classes from stylesheet', async () => {
     const source =
     `<script>
@@ -24,6 +49,7 @@ describe('Scoped Mode Imports', () => {
     },{
       mode: 'scoped',
       localIdentName: '[local]-123',
+      parseExternalStylesheet: true,
     });
 
     expect(output).toBe(expectedOutput);
@@ -52,6 +78,7 @@ describe('Scoped Mode Imports', () => {
     },{
       mode: 'scoped',
       localIdentName: '[local]-123',
+      parseExternalStylesheet: true,
     });
 
     expect(output).toBe(expectedOutput);
@@ -80,7 +107,8 @@ describe('Scoped Mode Imports', () => {
       source
     },{
       mode: 'scoped',
-      localIdentName: '[local]-123'
+      localIdentName: '[local]-123',
+      parseExternalStylesheet: true,
     });
   });
 
@@ -107,6 +135,7 @@ describe('Scoped Mode Imports', () => {
     },{
       mode: 'scoped',
       localIdentName: '[local]-123',
+      parseExternalStylesheet: true,
     });
 
     expect(output).toBe(expectedOutput);
@@ -140,9 +169,9 @@ describe('Scoped Mode Imports', () => {
     },{
       mode: 'scoped',
       localIdentName: '[local]-123',
+      parseExternalStylesheet: true,
     });
 
     expect(output).toBe(expectedOutput);
   });
-
 });