fix: merge globalStyle and globalRule transformers

Author: kaisermann

README.md

@@ -394,14 +394,14 @@ import { mdsvex } from 'mdsvex'
 In case you want to manually configure your preprocessing step, `svelte-preprocess` exports these named processors:
 
 - `pug`
-- `coffeescript` or `coffee`
+- `coffeescript`
 - `typescript`
 - `less`
 - `scss` or `sass`
 - `stylus`
 - `postcss`
 - `babel`
-- `globalStyle` - transform `<style global>` into global styles.
+- `globalStyle` - transform `<style global>` into global styles and supports `:global` nested selectors.
 - `replace` - replace string patterns in your markup.
 
 ```js
@@ -524,14 +524,14 @@ const options = {
   },
 
   /** Use a custom preprocess method by passing a function. */
-  pug({ content, filename }) {
+  pug({ content, filename, attributes }) {
     const code = pug.render(content);
 
     return { code, map: null };
   },
 
   /** Add a custom language preprocessor */
-  customLanguage({ content, filename }) {
+  customLanguage({ content, filename, attributes }) {
     const { code, map } = require('custom-language-compiler')(content);
 
     return { code, map };
@@ -559,13 +559,10 @@ const options = {
     [/@html\s*\((.*?)\)$/gim, '{@html $1}'],
   ],
 
-  /** Configure globalStyle and globalRule source map options */
+  /** Configure globalStyle source map options */
   globalStyle: {
     sourceMap: true,
   },
-  globalRule: {
-    sourceMap: true,
-  },
 };
 
 svelte.preprocess(input, sveltePreprocess(options));
@@ -660,4 +657,4 @@ import preprocess from 'svelte-preprocess'
 ...
 ```
 
-Warning: If you do this, you can't import types or interfaces into your svelte component without using the new TS 3.8 `type` import modifier: `import type { SomeInterface } from './MyModule.ts'` otherwise Rollup (and possibly others) will complain that the name is not exported by `MyModule`)
+Warning: If you do this, you can't import types or interfaces into your svelte component without using the new TS 3.8 `type` import modifier: `import type { SomeInterface } from './MyModule.ts'` otherwise Rollup (and possibly others) will complain that the name is not exported by `MyModule`)

src/autoProcess.ts

@@ -25,7 +25,6 @@ interface Transformers {
   coffeescript?: TransformerOptions<Options.Coffeescript>;
   pug?: TransformerOptions<Options.Pug>;
   globalStyle?: Options.GlobalStyle;
-  globalRule?: Options.GlobalRule;
   replace?: Options.Replace;
   [languageName: string]: TransformerOptions;
 }
@@ -54,7 +53,6 @@ type AutoPreprocessOptions = {
   coffeescript?: TransformerOptions<Options.Coffeescript>;
   pug?: TransformerOptions<Options.Pug>;
   globalStyle?: Options.GlobalStyle;
-  globalRule?: Options.GlobalRule;
   // workaround while we don't have this
   // https://github.com/microsoft/TypeScript/issues/17867
   [languageName: string]:
@@ -121,10 +119,14 @@ export function autoPreprocess(
   const getTransformerTo = (targetLanguage: string): Preprocessor => async (
     svelteFile,
   ) => {
-    const { content, filename, lang, alias, dependencies } = await parseFile(
-      svelteFile,
-      targetLanguage,
-    );
+    const {
+      content,
+      filename,
+      lang,
+      alias,
+      dependencies,
+      attributes,
+    } = await parseFile(svelteFile, targetLanguage);
 
     if (preserve.includes(lang) || preserve.includes(alias)) {
       return;
@@ -141,7 +143,7 @@ export function autoPreprocess(
     const transformed = await runTransformer(
       lang,
       getTransformerOptions(lang, alias),
-      { content: stripIndent(content), filename },
+      { content: stripIndent(content), filename, attributes },
     );
 
     return {
@@ -228,6 +230,7 @@ export function autoPreprocess(
           content: code,
           map,
           filename,
+          attributes,
         });
 
         code = transformed.code;
@@ -253,7 +256,7 @@ export function autoPreprocess(
         const transformed = await runTransformer(
           'postcss',
           transformers.postcss,
-          { content: code, map, filename },
+          { content: code, map, filename, attributes },
         );
 
         code = transformed.code;
@@ -262,28 +265,14 @@ export function autoPreprocess(
       }
 
       if (await hasPostCssInstalled()) {
-        if (attributes.global) {
-          const transformed = await runTransformer(
-            'globalStyle',
-            transformers?.globalStyle,
-            {
-              content: code,
-              map,
-              filename,
-            },
-          );
-
-          code = transformed.code;
-          map = transformed.map;
-        }
-
         const transformed = await runTransformer(
-          'globalRule',
-          transformers?.globalRule,
+          'globalStyle',
+          transformers?.globalStyle,
           {
             content: code,
             map,
             filename,
+            attributes,
           },
         );
 

src/modules/transformers.ts

@@ -10,13 +10,13 @@ const TRANSFORMERS = {} as {
 export const runTransformer = async (
   name: string,
   options: TransformerOptions,
-  { content, map, filename }: TransformerArgs<any>,
+  { content, map, filename, attributes }: TransformerArgs<any>,
 ): Promise<ReturnType<Transformer<unknown>>> => {
   // remove any unnecessary indentation (useful for coffee, pug and sugarss)
   content = stripIndent(content);
 
   if (typeof options === 'function') {
-    return options({ content, map, filename });
+    return options({ content, map, filename, attributes });
   }
 
   try {
@@ -31,6 +31,7 @@ export const runTransformer = async (
       content,
       filename,
       map,
+      attributes,
       options: typeof options === 'boolean' ? null : options,
     });
   } catch (e) {

src/processors/globalRule.ts

@@ -3,7 +3,38 @@ import postcss, { AtRule } from 'postcss';
 import { Transformer, Options } from '../types';
 import { globalifySelector } from '../modules/globalifySelector';
 
-const globalifyPlugin = (root: postcss.Root) => {
+const selectorPattern = /:global(?!\()/;
+
+const globalifyRulePlugin: postcss.Transformer = (root) => {
+  root.walkRules(selectorPattern, (rule) => {
+    const modifiedSelectors = rule.selectors
+      .filter((selector) => selector !== ':global')
+      .map((selector) => {
+        const [beginning, ...rest] = selector.split(selectorPattern);
+
+        if (rest.length === 0) return beginning;
+
+        return [beginning, ...rest.map(globalifySelector)]
+          .map((str) => str.trim())
+          .join(' ')
+          .trim();
+      });
+
+    if (modifiedSelectors.length === 0) {
+      rule.remove();
+
+      return;
+    }
+
+    rule.replaceWith(
+      rule.clone({
+        selectors: modifiedSelectors,
+      }),
+    );
+  });
+};
+
+const globalAttrPlugin = (root: postcss.Root) => {
   root.walkAtRules(/keyframes$/, (atrule) => {
     if (!atrule.params.startsWith('-global-')) {
       atrule.replaceWith(
@@ -31,13 +62,18 @@ const transformer: Transformer<Options.GlobalStyle> = async ({
   content,
   filename,
   options,
+  map,
+  attributes,
 }) => {
-  const { css, map: newMap } = await postcss()
-    .use(globalifyPlugin)
-    .process(content, {
-      from: filename,
-      map: options?.sourceMap ?? false,
-    });
+  const plugins = [
+    globalifyRulePlugin,
+    attributes?.global && globalAttrPlugin,
+  ].filter(Boolean);
+
+  const { css, map: newMap } = await postcss(plugins).process(content, {
+    from: filename,
+    map: options?.sourceMap ? { prev: map } : false,
+  });
 
   return { code: css, map: newMap };
 };

src/transformers/globalRule.ts

@@ -20,6 +20,7 @@ export type PreprocessorArgs = Preprocessor extends (options: infer T) => any
 export interface TransformerArgs<T> {
   content: string;
   filename: string;
+  attributes?: Record<string, any>;
   map?: string | object;
   dianostics?: unknown[];
   options?: T;

src/transformers/globalStyle.ts

@@ -68,10 +68,6 @@ export interface Typescript {
   reportDiagnostics?: boolean;
 }
 
-export interface GlobalRule {
-  sourceMap: boolean;
-}
-
 export interface GlobalStyle {
   sourceMap: boolean;
 }