Add :local() pseudo selector

Author: Michael Vurchio

example/webpack/App.svelte

@@ -45,14 +45,14 @@
   -webkit-font-smoothing: antialiased;
 }
 
-section {
+:local(section) {
   flex: 0 1 auto;
   flex-direction: column;
   display: flex;
   height: 100%;
 }
 
-header {
+:local(header) {
   padding: 1rem;
   font-size: 1.2rem;
   font-weight: bold;
@@ -68,7 +68,7 @@ header {
   -webkit-overflow-scrolling: touch;
 }
 
-footer {
+:local(footer) {
   padding: 1rem;
   text-align: right;
   border-top: 1px solid #d9d9d9;

example/webpack/components/Time.svelte

@@ -19,11 +19,11 @@
     font-family: monospace;
   }
 
-  .bolder {
+  :local(.bolder) {
     font-weight: 900;
   }
 
-  .bolder:last-child + p:not(:first-child) {
+  :local(.bolder:last-child) + p:not(:first-child) {
     color: blue;
   }
   @media (min-width: 20rem) {
@@ -46,9 +46,9 @@
     font: 1em sans-serif;
   }
   p + span > strong { font-weight: 600; }
-  :global(div) p > strong { font-weight: 600; }
+  :global(div) :local(p > strong) { font-weight: 600; }
 
-  div *.bold { font-size: 12px;}
+  :local(div) *.bold { font-size: 12px;}
 </style>
 <div
   class=" bolder light { true ? 'lighter red' : ''}"

example/webpack/webpack.config.js

@@ -21,7 +21,7 @@ module.exports = {
             options: {
               preprocess: [
                 cssModules({
-                  mode: 'mixed',
+                  mode: 'native',
                   includePaths: ['./'],
                 }),
               ],

src/processors/mixed.ts

@@ -77,6 +77,8 @@ const parser = (processor: Processor): void => {
             }
           });
         }
+
+        processor.parsePseudoLocalSelectors(node);
       }
       if (node.type === 'ClassSelector') {
         const generatedClassName = processor.createModuleClassname(node.name);

src/processors/native.ts

@@ -54,7 +54,10 @@ const parser = (processor: Processor): void => {
 
         node.children.forEach((item, index) => {
           let hasPushed = false;
-          if (item.name === 'global' && item.type === 'PseudoClassSelector') {
+          if (
+            (item.name === 'global' || item.name === 'local') &&
+            item.type === 'PseudoClassSelector'
+          ) {
             if (start > 0) {
               selectorBoundaries = updateSelectorBoundaries(selectorBoundaries, start, end);
               hasPushed = true;
@@ -72,6 +75,8 @@ const parser = (processor: Processor): void => {
             selectorBoundaries = updateSelectorBoundaries(selectorBoundaries, start, end);
           }
         });
+
+        processor.parsePseudoLocalSelectors(node);
       }
 
       if (node.type === 'ClassSelector') {
@@ -101,6 +106,7 @@ const nativeProcessor = async (
 ): Promise<string> => {
   const processor = new Processor(ast, content, filename, options, parser);
   const processedContent = processor.parse();
+  console.log(processedContent);
   return processedContent;
 };
 

src/processors/processor.ts

@@ -1,5 +1,5 @@
 import MagicString from 'magic-string';
-import type { Ast, Style } from 'svelte/types/compiler/interfaces.d';
+import type { Ast, Style, TemplateNode } from 'svelte/types/compiler/interfaces.d';
 import { CSSModuleList, PluginOptions } from '../types';
 import { camelCase, createClassName, hasModuleAttribute, hasModuleImports } from '../lib';
 import { parseImportDeclaration, parseTemplate } from '../parsers';
@@ -72,6 +72,23 @@ export default class Processor {
     this.cssModuleList[name] = value;
   };
 
+  /**
+   * Parse pseudo selector :local()
+   * @param node The ast "Selector" node to parse
+   */
+  public parsePseudoLocalSelectors = (node: TemplateNode): void => {
+    const pseudoLocalSelectors = node.children.filter(
+      (item) => item.type === 'PseudoClassSelector' && item.name === 'local'
+    );
+
+    if (pseudoLocalSelectors.length > 0) {
+      pseudoLocalSelectors.forEach((item) => {
+        this.magicContent.remove(item.start, item.start + `:local(`.length);
+        this.magicContent.remove(item.end - 1, item.end);
+      });
+    }
+  };
+
   /**
    * Parse component
    * @returns The CssModule updated component