fix: parse <style> tags

Author: steveblue

README.md

@@ -23,13 +23,18 @@ export default {
 
 ## Options
 
-| Property   | Description                                                              |
-| ---------- | ------------------------------------------------------------------------ |
-| include    | Files to include                                                         |
-| exclude    | Files to exclude                                                         |
-| env        | Environment variable, defaults to `process.env.NODE_ENV` where available |
-| styleRegex | Custom regex for selecting CSS in file                                   |
-| configPath | Path to directory that contains postcss.config.js                        |
+| Property        | Description                                                              |
+| --------------- | ------------------------------------------------------------------------ |
+| configPath      | Path to directory that contains postcss.config.js                        |
+| env             | Environment variable, defaults to `process.env.NODE_ENV` where available |
+| exclude         | Files to exclude                                                         |
+| failOnError     | Allows errors to propagate when `true`, otherwise warnings are thrown    |
+| from            | Input file name (usually set by rollup)                                  |
+| include         | Files to include                                                         |
+| plugins         | Array of PostCSS plugins, defaults to `postcss.config.js`                |
+| styleDelineator | Custom delineator for parsing styles in a file, default is /`/           |
+| styleRegex      | Custom regex for selecting CSS in file                                   |
+| to              | Output file name (usually set by rollup)                                 |
 
 ## Template Literals in JavaScript
 
@@ -55,7 +60,20 @@ The default regex for selecting template literals in a file is:
 /(?:css`)((.|\n)+?)(?=(`(\n|;|,)))/gi;
 ```
 
-## Config
+The lookahead in the above RegExp statement allows for multiple matches of styles in the same file.
+
+Customize the regex that is used to parse inline CSS with the `styleRegex` and `styleDelineator` options.
+
+For example, to parse inline `<style>` tags:
+
+```js
+inlinePostCSS({
+  styleRegex: /(?:<style>)((.|\n)+?)(?=(<\/style>))/gi,
+  styleDelineator: /<\/?style>/g,
+});
+```
+
+## postcss.config.js
 
 This plugin honors `postcss.config.js` in the root directory and will look for environment variables based on the current `NODE_ENV`. The example postcss.config.js below demonstrates minifying CSS with the `postcss-csso` plugin only when the NODE_ENV is set to `prod`.
 

src/index.ts

@@ -5,18 +5,32 @@ import { createFilter } from 'rollup-pluginutils';
 
 const postcss = require('postcss');
 
-export default function inlinePostCSS(options: any = {}) {
+declare interface InlinePostCSSOptions {
+  configPath?: string;
+  include?: string[];
+  exclude?: string[];
+  env?: string;
+  failOnError?: boolean;
+  from?: string;
+  plugins?: any[];
+  styleDelineator?: string;
+  styleRegex?: RegExp;
+  to?: string;
+}
+
+export default function inlinePostCSS(options: InlinePostCSSOptions = {}) {
   const filter = createFilter(options.include, options.exclude);
   const styleRegex = options.styleRegex
     ? options.styleRegex
     : /(?:css`)((.|\n)+?)(?=(`(\n|;|,)))/gi;
-  const hasCustomRegex = options.styleRegex ? true : false;
+
   return {
     name: 'inline-postcss',
     transform(code, id) {
       if (!filter(id)) {
         return;
       }
+
       if (!code.match(styleRegex)) {
         return;
       }
@@ -63,16 +77,27 @@ export default function inlinePostCSS(options: any = {}) {
               .filter((key) => config.plugins[key])
               .map((key) => require(key));
 
-        const matches = code.match(styleRegex);
+        const styleDelineator = options.styleDelineator
+          ? options.styleDelineator
+          : /`/;
+
+        let matches = code.match(styleRegex);
 
         return Promise.all(
-          matches.map((css) =>
-            postcss(outputConfig).process(css.split('`')[1], postcssOptions)
+          matches.map((css: string) =>
+            postcss(outputConfig).process(
+              styleDelineator ? css.split(styleDelineator)[1] : css,
+              postcssOptions
+            )
           )
-        ).then((transforms: any) => {
-          let mappings = '';
+        ).then((transforms: any[]) => {
           transforms.forEach((transform, index) => {
-            code = code.replace(matches[index].split('`')[1], transform.css);
+            code = code.replace(
+              styleDelineator
+                ? matches[index].split(styleDelineator)[1]
+                : matches[index],
+              transform.css
+            );
           });
           return {
             code,

test/fixtures/custom-template.js

@@ -0,0 +1,19 @@
+export const styleTemplate = `<style>
+  :host {
+    background: #abcefe;
+    cursor: pointer;
+    color: white;
+    font-weight: 400;
+  }
+</style>
+`;
+
+export const anotherStyle = `<style>
+  :host {
+    background: #abcefe;
+    cursor: pointer;
+    color: white;
+    font-weight: 400;
+  }
+</style>
+`;

test/index.test.js

@@ -76,6 +76,35 @@ test('should process file with custom regex', async () => {
   expect(await res.isMinified('custom.js')).toBe(true);
 });
 
+test('should process file with legacy custom regex', async () => {
+  const res = await write({
+    input: 'component.js',
+    output: 'custom-legacy.js',
+    outDir: 'test/extract',
+    plugin: inlinePostCSS({
+      styleRegex: /css\`((?:\\.|[^"\\])*)\`/gi,
+    }),
+    options: {},
+  });
+  expect(await res.hasRGBColorValues('custom-legacy.js')).toBe(true);
+  expect(await res.isMinified('custom-legacy.js')).toBe(true);
+});
+
+test('should process file with style template', async () => {
+  const res = await write({
+    input: 'custom-template.js',
+    output: 'custom-template.js',
+    outDir: 'test/extract',
+    plugin: inlinePostCSS({
+      styleRegex: /(?:<style>)((.|\n)+?)(?=(<\/style>))/gi,
+      styleDelineator: /<\/?style>/g,
+      configPath: path.join(__dirname, 'config'),
+    }),
+    options: {},
+  });
+  expect(await res.hasRGBColorValues('custom-template.js')).toBe(true);
+});
+
 test('should reference postcss.config.js', async () => {
   const res = await write({
     input: 'component.js',