@mattsjones/css-core - npm Package Compare versions

Comparing version 0.0.15 to 0.0.16

CHANGELOG.md

 # @mattsjones/css-core
 
+## 0.0.16
+
+### Patch Changes
+
+- ee57f9a: Support hot module reloading for the browser runtime
+- 9b847d4: Support @media and @support rules in selectors
+
 ## 0.0.15
@@ -4,0 +11,0 @@

dist/declarations/src/types.d.ts

@@ -17,3 +17,3 @@ import type { PropertiesFallback, AtRule } from 'csstype';
 interface SelectorMap {
-    [selector: string]: CSSProperties;
+    [selector: string]: CSSProperties & MediaQueries<CSSProperties & FeatureQueries<CSSProperties>> & FeatureQueries<CSSProperties & MediaQueries<CSSProperties>>;
 }
@@ -38,3 +38,3 @@ export interface MediaQueries<StyleType> {
 export declare type CSSStyleBlock = {
-    type: 'local' | 'global';
+    type: 'local';
     selector: string;
@@ -52,3 +52,8 @@ rule: StyleRule;
 };
-export declare type CSS = CSSStyleBlock | CSSFontFaceBlock | CSSKeyframesBlock;
+export declare type CSSSelectorBlock = {
+    type: 'selector' | 'global';
+    selector: string;
+    rule: GlobalStyleRule;
+};
+export declare type CSS = CSSStyleBlock | CSSFontFaceBlock | CSSKeyframesBlock | CSSSelectorBlock;
 export interface Adapter {
@@ -55,0 +60,0 @@ appendCss: (css: CSS, fileScope: string) => void;

dist/mattsjones-css-core.browser.cjs.js

@@ -150,4 +150,4 @@ 'use strict';
     utils.forEach(rule.selectors, (selectorRule, selector) => {
-      if (root.type === 'global') {
-        throw new Error('Selectors are not allowed within globalStyle');
+      if (root.type !== 'local') {
+        throw new Error(`Selectors are not allowed within ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
       }
@@ -160,4 +160,11 @@
         selector: transformedSelector,
+        rule: utils.omit(selectorRule, specialKeys)
+      });
+      const selectorRoot = {
+        type: 'selector',
+        selector: transformedSelector,
         rule: selectorRule
-      });
+      };
+      this.transformSupports(selectorRoot, selectorRule['@supports'], conditions);
+      this.transformMedia(selectorRoot, selectorRule['@media'], conditions);
     });
@@ -174,4 +181,8 @@ }
       });
-      this.transformSimplePsuedos(root, mediaRule, conditions);
-      this.transformSelectors(root, mediaRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, mediaRule, conditions);
+        this.transformSelectors(root, mediaRule, conditions);
+      }
+
       this.transformSupports(root, mediaRule['@supports'], conditions);
@@ -189,4 +200,8 @@ });
       });
-      this.transformSimplePsuedos(root, supportsRule, conditions);
-      this.transformSelectors(root, supportsRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, supportsRule, conditions);
+        this.transformSelectors(root, supportsRule, conditions);
+      }
+
       this.transformMedia(root, supportsRule['@media'], conditions);
@@ -200,4 +215,4 @@ });
       if (simplePseudoSet.has(key)) {
-        if (root.type === 'global') {
-          throw new Error('Simple pseudos are not valid in globalStyles');
+        if (root.type !== 'local') {
+          throw new Error(`Simple pseudos are not valid in ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
         }
@@ -268,3 +283,3 @@
         } else if (value && typeof value === 'object') {
-          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}\n`);
+          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}`);
         } else {
@@ -296,9 +311,9 @@ rules.push(`${indent}${key.startsWith('--') ? key : dashify(key)}: ${value};`);
 
-let styleSheet;
+const stylesheets = {};
 const localClassNames = new Set();
 let bufferedCSSObjs = [];
 
-function getStylesheet() {
-  if (styleSheet) {
-    return styleSheet;
+function getStylesheet(fileScope) {
+  if (stylesheets[fileScope]) {
+    return stylesheets[fileScope];
   }
@@ -308,9 +323,9 @@
   document.head.appendChild(styleEl);
-  styleSheet = styleEl.sheet;
 
-  if (!styleSheet) {
-    throw new Error('Could create stylesheet');
+  if (!styleEl.sheet) {
+    throw new Error(`Couldn't create stylesheet`);
   }
 
-  return styleSheet;
+  stylesheets[fileScope] = styleEl.sheet;
+  return styleEl.sheet;
 }
@@ -325,3 +340,3 @@
   },
-  onEndFileScope: () => {
+  onEndFileScope: fileScope => {
     const css = transformCss({
@@ -331,10 +346,23 @@ localClassNames: Array.from(localClassNames),
     });
-    const stylesheet = getStylesheet();
+    const stylesheet = getStylesheet(fileScope);
+    const existingRuleCount = stylesheet.cssRules.length;
+    let ruleIndex = 0;
 
     for (const rule of css) {
       try {
-        stylesheet.insertRule(rule, stylesheet.cssRules.length);
+        if (ruleIndex < existingRuleCount) {
+          stylesheet.deleteRule(ruleIndex);
+        }
+
+        stylesheet.insertRule(rule, ruleIndex++);
       } catch (e) {
-        console.warn(e);
+        console.warn(`Failed to insert rule\n${rule}`); // insert placeholder rule to keep index count correct
+
+        stylesheet.insertRule('.--placeholder-rule--{}', ruleIndex - 1);
       }
+    } // Delete remaining rules
+
+
+    while (ruleIndex < existingRuleCount) {
+      stylesheet.deleteRule(ruleIndex++);
     }
@@ -341,0 +369,0 @@

dist/mattsjones-css-core.browser.esm.js

@@ -140,4 +140,4 @@ import cssesc from 'cssesc';
     forEach(rule.selectors, (selectorRule, selector) => {
-      if (root.type === 'global') {
-        throw new Error('Selectors are not allowed within globalStyle');
+      if (root.type !== 'local') {
+        throw new Error(`Selectors are not allowed within ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
       }
@@ -150,4 +150,11 @@
         selector: transformedSelector,
+        rule: omit(selectorRule, specialKeys)
+      });
+      const selectorRoot = {
+        type: 'selector',
+        selector: transformedSelector,
         rule: selectorRule
-      });
+      };
+      this.transformSupports(selectorRoot, selectorRule['@supports'], conditions);
+      this.transformMedia(selectorRoot, selectorRule['@media'], conditions);
     });
@@ -164,4 +171,8 @@ }
       });
-      this.transformSimplePsuedos(root, mediaRule, conditions);
-      this.transformSelectors(root, mediaRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, mediaRule, conditions);
+        this.transformSelectors(root, mediaRule, conditions);
+      }
+
       this.transformSupports(root, mediaRule['@supports'], conditions);
@@ -179,4 +190,8 @@ });
       });
-      this.transformSimplePsuedos(root, supportsRule, conditions);
-      this.transformSelectors(root, supportsRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, supportsRule, conditions);
+        this.transformSelectors(root, supportsRule, conditions);
+      }
+
       this.transformMedia(root, supportsRule['@media'], conditions);
@@ -190,4 +205,4 @@ });
       if (simplePseudoSet.has(key)) {
-        if (root.type === 'global') {
-          throw new Error('Simple pseudos are not valid in globalStyles');
+        if (root.type !== 'local') {
+          throw new Error(`Simple pseudos are not valid in ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
         }
@@ -258,3 +273,3 @@
         } else if (value && typeof value === 'object') {
-          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}\n`);
+          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}`);
         } else {
@@ -286,9 +301,9 @@ rules.push(`${indent}${key.startsWith('--') ? key : dashify(key)}: ${value};`);
 
-let styleSheet;
+const stylesheets = {};
 const localClassNames = new Set();
 let bufferedCSSObjs = [];
 
-function getStylesheet() {
-  if (styleSheet) {
-    return styleSheet;
+function getStylesheet(fileScope) {
+  if (stylesheets[fileScope]) {
+    return stylesheets[fileScope];
   }
@@ -298,9 +313,9 @@
   document.head.appendChild(styleEl);
-  styleSheet = styleEl.sheet;
 
-  if (!styleSheet) {
-    throw new Error('Could create stylesheet');
+  if (!styleEl.sheet) {
+    throw new Error(`Couldn't create stylesheet`);
   }
 
-  return styleSheet;
+  stylesheets[fileScope] = styleEl.sheet;
+  return styleEl.sheet;
 }
@@ -315,3 +330,3 @@
   },
-  onEndFileScope: () => {
+  onEndFileScope: fileScope => {
     const css = transformCss({
@@ -321,10 +336,23 @@ localClassNames: Array.from(localClassNames),
     });
-    const stylesheet = getStylesheet();
+    const stylesheet = getStylesheet(fileScope);
+    const existingRuleCount = stylesheet.cssRules.length;
+    let ruleIndex = 0;
 
     for (const rule of css) {
       try {
-        stylesheet.insertRule(rule, stylesheet.cssRules.length);
+        if (ruleIndex < existingRuleCount) {
+          stylesheet.deleteRule(ruleIndex);
+        }
+
+        stylesheet.insertRule(rule, ruleIndex++);
       } catch (e) {
-        console.warn(e);
+        console.warn(`Failed to insert rule\n${rule}`); // insert placeholder rule to keep index count correct
+
+        stylesheet.insertRule('.--placeholder-rule--{}', ruleIndex - 1);
       }
+    } // Delete remaining rules
+
+
+    while (ruleIndex < existingRuleCount) {
+      stylesheet.deleteRule(ruleIndex++);
     }
@@ -331,0 +359,0 @@

dist/mattsjones-css-core.cjs.dev.js

@@ -150,4 +150,4 @@ 'use strict';
     utils.forEach(rule.selectors, (selectorRule, selector) => {
-      if (root.type === 'global') {
-        throw new Error('Selectors are not allowed within globalStyle');
+      if (root.type !== 'local') {
+        throw new Error(`Selectors are not allowed within ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
       }
@@ -160,4 +160,11 @@
         selector: transformedSelector,
+        rule: utils.omit(selectorRule, specialKeys)
+      });
+      const selectorRoot = {
+        type: 'selector',
+        selector: transformedSelector,
         rule: selectorRule
-      });
+      };
+      this.transformSupports(selectorRoot, selectorRule['@supports'], conditions);
+      this.transformMedia(selectorRoot, selectorRule['@media'], conditions);
     });
@@ -174,4 +181,8 @@ }
       });
-      this.transformSimplePsuedos(root, mediaRule, conditions);
-      this.transformSelectors(root, mediaRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, mediaRule, conditions);
+        this.transformSelectors(root, mediaRule, conditions);
+      }
+
       this.transformSupports(root, mediaRule['@supports'], conditions);
@@ -189,4 +200,8 @@ });
       });
-      this.transformSimplePsuedos(root, supportsRule, conditions);
-      this.transformSelectors(root, supportsRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, supportsRule, conditions);
+        this.transformSelectors(root, supportsRule, conditions);
+      }
+
       this.transformMedia(root, supportsRule['@media'], conditions);
@@ -200,4 +215,4 @@ });
       if (simplePseudoSet.has(key)) {
-        if (root.type === 'global') {
-          throw new Error('Simple pseudos are not valid in globalStyles');
+        if (root.type !== 'local') {
+          throw new Error(`Simple pseudos are not valid in ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
         }
@@ -268,3 +283,3 @@
         } else if (value && typeof value === 'object') {
-          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}\n`);
+          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}`);
         } else {
@@ -296,9 +311,9 @@ rules.push(`${indent}${key.startsWith('--') ? key : dashify(key)}: ${value};`);
 
-let styleSheet;
+const stylesheets = {};
 const localClassNames = new Set();
 let bufferedCSSObjs = [];
 
-function getStylesheet() {
-  if (styleSheet) {
-    return styleSheet;
+function getStylesheet(fileScope) {
+  if (stylesheets[fileScope]) {
+    return stylesheets[fileScope];
   }
@@ -308,9 +323,9 @@
   document.head.appendChild(styleEl);
-  styleSheet = styleEl.sheet;
 
-  if (!styleSheet) {
-    throw new Error('Could create stylesheet');
+  if (!styleEl.sheet) {
+    throw new Error(`Couldn't create stylesheet`);
   }
 
-  return styleSheet;
+  stylesheets[fileScope] = styleEl.sheet;
+  return styleEl.sheet;
 }
@@ -325,3 +340,3 @@
   },
-  onEndFileScope: () => {
+  onEndFileScope: fileScope => {
     const css = transformCss({
@@ -331,10 +346,23 @@ localClassNames: Array.from(localClassNames),
     });
-    const stylesheet = getStylesheet();
+    const stylesheet = getStylesheet(fileScope);
+    const existingRuleCount = stylesheet.cssRules.length;
+    let ruleIndex = 0;
 
     for (const rule of css) {
       try {
-        stylesheet.insertRule(rule, stylesheet.cssRules.length);
+        if (ruleIndex < existingRuleCount) {
+          stylesheet.deleteRule(ruleIndex);
+        }
+
+        stylesheet.insertRule(rule, ruleIndex++);
       } catch (e) {
-        console.warn(e);
+        console.warn(`Failed to insert rule\n${rule}`); // insert placeholder rule to keep index count correct
+
+        stylesheet.insertRule('.--placeholder-rule--{}', ruleIndex - 1);
       }
+    } // Delete remaining rules
+
+
+    while (ruleIndex < existingRuleCount) {
+      stylesheet.deleteRule(ruleIndex++);
     }
@@ -341,0 +369,0 @@

dist/mattsjones-css-core.cjs.prod.js

@@ -150,4 +150,4 @@ 'use strict';
     utils.forEach(rule.selectors, (selectorRule, selector) => {
-      if (root.type === 'global') {
-        throw new Error('Selectors are not allowed within globalStyle');
+      if (root.type !== 'local') {
+        throw new Error(`Selectors are not allowed within ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
       }
@@ -160,4 +160,11 @@
         selector: transformedSelector,
+        rule: utils.omit(selectorRule, specialKeys)
+      });
+      const selectorRoot = {
+        type: 'selector',
+        selector: transformedSelector,
         rule: selectorRule
-      });
+      };
+      this.transformSupports(selectorRoot, selectorRule['@supports'], conditions);
+      this.transformMedia(selectorRoot, selectorRule['@media'], conditions);
     });
@@ -174,4 +181,8 @@ }
       });
-      this.transformSimplePsuedos(root, mediaRule, conditions);
-      this.transformSelectors(root, mediaRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, mediaRule, conditions);
+        this.transformSelectors(root, mediaRule, conditions);
+      }
+
       this.transformSupports(root, mediaRule['@supports'], conditions);
@@ -189,4 +200,8 @@ });
       });
-      this.transformSimplePsuedos(root, supportsRule, conditions);
-      this.transformSelectors(root, supportsRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, supportsRule, conditions);
+        this.transformSelectors(root, supportsRule, conditions);
+      }
+
       this.transformMedia(root, supportsRule['@media'], conditions);
@@ -200,4 +215,4 @@ });
       if (simplePseudoSet.has(key)) {
-        if (root.type === 'global') {
-          throw new Error('Simple pseudos are not valid in globalStyles');
+        if (root.type !== 'local') {
+          throw new Error(`Simple pseudos are not valid in ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
         }
@@ -268,3 +283,3 @@
         } else if (value && typeof value === 'object') {
-          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}\n`);
+          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}`);
         } else {
@@ -296,9 +311,9 @@ rules.push(`${indent}${key.startsWith('--') ? key : dashify(key)}: ${value};`);
 
-let styleSheet;
+const stylesheets = {};
 const localClassNames = new Set();
 let bufferedCSSObjs = [];
 
-function getStylesheet() {
-  if (styleSheet) {
-    return styleSheet;
+function getStylesheet(fileScope) {
+  if (stylesheets[fileScope]) {
+    return stylesheets[fileScope];
   }
@@ -308,9 +323,9 @@
   document.head.appendChild(styleEl);
-  styleSheet = styleEl.sheet;
 
-  if (!styleSheet) {
-    throw new Error('Could create stylesheet');
+  if (!styleEl.sheet) {
+    throw new Error(`Couldn't create stylesheet`);
   }
 
-  return styleSheet;
+  stylesheets[fileScope] = styleEl.sheet;
+  return styleEl.sheet;
 }
@@ -325,3 +340,3 @@
   },
-  onEndFileScope: () => {
+  onEndFileScope: fileScope => {
     const css = transformCss({
@@ -331,10 +346,23 @@ localClassNames: Array.from(localClassNames),
     });
-    const stylesheet = getStylesheet();
+    const stylesheet = getStylesheet(fileScope);
+    const existingRuleCount = stylesheet.cssRules.length;
+    let ruleIndex = 0;
 
     for (const rule of css) {
       try {
-        stylesheet.insertRule(rule, stylesheet.cssRules.length);
+        if (ruleIndex < existingRuleCount) {
+          stylesheet.deleteRule(ruleIndex);
+        }
+
+        stylesheet.insertRule(rule, ruleIndex++);
       } catch (e) {
-        console.warn(e);
+        console.warn(`Failed to insert rule\n${rule}`); // insert placeholder rule to keep index count correct
+
+        stylesheet.insertRule('.--placeholder-rule--{}', ruleIndex - 1);
       }
+    } // Delete remaining rules
+
+
+    while (ruleIndex < existingRuleCount) {
+      stylesheet.deleteRule(ruleIndex++);
     }
@@ -341,0 +369,0 @@

dist/mattsjones-css-core.esm.js

@@ -140,4 +140,4 @@ import cssesc from 'cssesc';
     forEach(rule.selectors, (selectorRule, selector) => {
-      if (root.type === 'global') {
-        throw new Error('Selectors are not allowed within globalStyle');
+      if (root.type !== 'local') {
+        throw new Error(`Selectors are not allowed within ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
       }
@@ -150,4 +150,11 @@
         selector: transformedSelector,
+        rule: omit(selectorRule, specialKeys)
+      });
+      const selectorRoot = {
+        type: 'selector',
+        selector: transformedSelector,
         rule: selectorRule
-      });
+      };
+      this.transformSupports(selectorRoot, selectorRule['@supports'], conditions);
+      this.transformMedia(selectorRoot, selectorRule['@media'], conditions);
     });
@@ -164,4 +171,8 @@ }
       });
-      this.transformSimplePsuedos(root, mediaRule, conditions);
-      this.transformSelectors(root, mediaRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, mediaRule, conditions);
+        this.transformSelectors(root, mediaRule, conditions);
+      }
+
       this.transformSupports(root, mediaRule['@supports'], conditions);
@@ -179,4 +190,8 @@ });
       });
-      this.transformSimplePsuedos(root, supportsRule, conditions);
-      this.transformSelectors(root, supportsRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, supportsRule, conditions);
+        this.transformSelectors(root, supportsRule, conditions);
+      }
+
       this.transformMedia(root, supportsRule['@media'], conditions);
@@ -190,4 +205,4 @@ });
       if (simplePseudoSet.has(key)) {
-        if (root.type === 'global') {
-          throw new Error('Simple pseudos are not valid in globalStyles');
+        if (root.type !== 'local') {
+          throw new Error(`Simple pseudos are not valid in ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
         }
@@ -258,3 +273,3 @@
         } else if (value && typeof value === 'object') {
-          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}\n`);
+          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}`);
         } else {
@@ -286,9 +301,9 @@ rules.push(`${indent}${key.startsWith('--') ? key : dashify(key)}: ${value};`);
 
-let styleSheet;
+const stylesheets = {};
 const localClassNames = new Set();
 let bufferedCSSObjs = [];
 
-function getStylesheet() {
-  if (styleSheet) {
-    return styleSheet;
+function getStylesheet(fileScope) {
+  if (stylesheets[fileScope]) {
+    return stylesheets[fileScope];
   }
@@ -298,9 +313,9 @@
   document.head.appendChild(styleEl);
-  styleSheet = styleEl.sheet;
 
-  if (!styleSheet) {
-    throw new Error('Could create stylesheet');
+  if (!styleEl.sheet) {
+    throw new Error(`Couldn't create stylesheet`);
   }
 
-  return styleSheet;
+  stylesheets[fileScope] = styleEl.sheet;
+  return styleEl.sheet;
 }
@@ -315,3 +330,3 @@
   },
-  onEndFileScope: () => {
+  onEndFileScope: fileScope => {
     const css = transformCss({
@@ -321,10 +336,23 @@ localClassNames: Array.from(localClassNames),
     });
-    const stylesheet = getStylesheet();
+    const stylesheet = getStylesheet(fileScope);
+    const existingRuleCount = stylesheet.cssRules.length;
+    let ruleIndex = 0;
 
     for (const rule of css) {
       try {
-        stylesheet.insertRule(rule, stylesheet.cssRules.length);
+        if (ruleIndex < existingRuleCount) {
+          stylesheet.deleteRule(ruleIndex);
+        }
+
+        stylesheet.insertRule(rule, ruleIndex++);
       } catch (e) {
-        console.warn(e);
+        console.warn(`Failed to insert rule\n${rule}`); // insert placeholder rule to keep index count correct
+
+        stylesheet.insertRule('.--placeholder-rule--{}', ruleIndex - 1);
       }
+    } // Delete remaining rules
+
+
+    while (ruleIndex < existingRuleCount) {
+      stylesheet.deleteRule(ruleIndex++);
     }
@@ -331,0 +359,0 @@

package.json

 {
   "name": "@mattsjones/css-core",
-  "version": "0.0.15",
+  "version": "0.0.16",
   "sideEffects": true,
@@ -5,0 +5,0 @@ "main": "dist/mattsjones-css-core.cjs.js",

transformCss/dist/mattsjones-css-core-transformCss.browser.cjs.js

@@ -145,4 +145,4 @@ 'use strict';
     utils.forEach(rule.selectors, (selectorRule, selector) => {
-      if (root.type === 'global') {
-        throw new Error('Selectors are not allowed within globalStyle');
+      if (root.type !== 'local') {
+        throw new Error(`Selectors are not allowed within ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
       }
@@ -155,4 +155,11 @@
         selector: transformedSelector,
+        rule: utils.omit(selectorRule, specialKeys)
+      });
+      const selectorRoot = {
+        type: 'selector',
+        selector: transformedSelector,
         rule: selectorRule
-      });
+      };
+      this.transformSupports(selectorRoot, selectorRule['@supports'], conditions);
+      this.transformMedia(selectorRoot, selectorRule['@media'], conditions);
     });
@@ -169,4 +176,8 @@ }
       });
-      this.transformSimplePsuedos(root, mediaRule, conditions);
-      this.transformSelectors(root, mediaRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, mediaRule, conditions);
+        this.transformSelectors(root, mediaRule, conditions);
+      }
+
       this.transformSupports(root, mediaRule['@supports'], conditions);
@@ -184,4 +195,8 @@ });
       });
-      this.transformSimplePsuedos(root, supportsRule, conditions);
-      this.transformSelectors(root, supportsRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, supportsRule, conditions);
+        this.transformSelectors(root, supportsRule, conditions);
+      }
+
       this.transformMedia(root, supportsRule['@media'], conditions);
@@ -195,4 +210,4 @@ });
       if (simplePseudoSet.has(key)) {
-        if (root.type === 'global') {
-          throw new Error('Simple pseudos are not valid in globalStyles');
+        if (root.type !== 'local') {
+          throw new Error(`Simple pseudos are not valid in ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
         }
@@ -263,3 +278,3 @@
         } else if (value && typeof value === 'object') {
-          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}\n`);
+          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}`);
         } else {
@@ -266,0 +281,0 @@ rules.push(`${indent}${key.startsWith('--') ? key : dashify(key)}: ${value};`);

transformCss/dist/mattsjones-css-core-transformCss.browser.esm.js

@@ -137,4 +137,4 @@ import cssesc from 'cssesc';
     forEach(rule.selectors, (selectorRule, selector) => {
-      if (root.type === 'global') {
-        throw new Error('Selectors are not allowed within globalStyle');
+      if (root.type !== 'local') {
+        throw new Error(`Selectors are not allowed within ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
       }
@@ -147,4 +147,11 @@
         selector: transformedSelector,
+        rule: omit(selectorRule, specialKeys)
+      });
+      const selectorRoot = {
+        type: 'selector',
+        selector: transformedSelector,
         rule: selectorRule
-      });
+      };
+      this.transformSupports(selectorRoot, selectorRule['@supports'], conditions);
+      this.transformMedia(selectorRoot, selectorRule['@media'], conditions);
     });
@@ -161,4 +168,8 @@ }
       });
-      this.transformSimplePsuedos(root, mediaRule, conditions);
-      this.transformSelectors(root, mediaRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, mediaRule, conditions);
+        this.transformSelectors(root, mediaRule, conditions);
+      }
+
       this.transformSupports(root, mediaRule['@supports'], conditions);
@@ -176,4 +187,8 @@ });
       });
-      this.transformSimplePsuedos(root, supportsRule, conditions);
-      this.transformSelectors(root, supportsRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, supportsRule, conditions);
+        this.transformSelectors(root, supportsRule, conditions);
+      }
+
       this.transformMedia(root, supportsRule['@media'], conditions);
@@ -187,4 +202,4 @@ });
       if (simplePseudoSet.has(key)) {
-        if (root.type === 'global') {
-          throw new Error('Simple pseudos are not valid in globalStyles');
+        if (root.type !== 'local') {
+          throw new Error(`Simple pseudos are not valid in ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
         }
@@ -255,3 +270,3 @@
         } else if (value && typeof value === 'object') {
-          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}\n`);
+          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}`);
         } else {
@@ -258,0 +273,0 @@ rules.push(`${indent}${key.startsWith('--') ? key : dashify(key)}: ${value};`);

transformCss/dist/mattsjones-css-core-transformCss.cjs.dev.js

@@ -145,4 +145,4 @@ 'use strict';
     utils.forEach(rule.selectors, (selectorRule, selector) => {
-      if (root.type === 'global') {
-        throw new Error('Selectors are not allowed within globalStyle');
+      if (root.type !== 'local') {
+        throw new Error(`Selectors are not allowed within ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
       }
@@ -155,4 +155,11 @@
         selector: transformedSelector,
+        rule: utils.omit(selectorRule, specialKeys)
+      });
+      const selectorRoot = {
+        type: 'selector',
+        selector: transformedSelector,
         rule: selectorRule
-      });
+      };
+      this.transformSupports(selectorRoot, selectorRule['@supports'], conditions);
+      this.transformMedia(selectorRoot, selectorRule['@media'], conditions);
     });
@@ -169,4 +176,8 @@ }
       });
-      this.transformSimplePsuedos(root, mediaRule, conditions);
-      this.transformSelectors(root, mediaRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, mediaRule, conditions);
+        this.transformSelectors(root, mediaRule, conditions);
+      }
+
       this.transformSupports(root, mediaRule['@supports'], conditions);
@@ -184,4 +195,8 @@ });
       });
-      this.transformSimplePsuedos(root, supportsRule, conditions);
-      this.transformSelectors(root, supportsRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, supportsRule, conditions);
+        this.transformSelectors(root, supportsRule, conditions);
+      }
+
       this.transformMedia(root, supportsRule['@media'], conditions);
@@ -195,4 +210,4 @@ });
       if (simplePseudoSet.has(key)) {
-        if (root.type === 'global') {
-          throw new Error('Simple pseudos are not valid in globalStyles');
+        if (root.type !== 'local') {
+          throw new Error(`Simple pseudos are not valid in ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
         }
@@ -263,3 +278,3 @@
         } else if (value && typeof value === 'object') {
-          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}\n`);
+          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}`);
         } else {
@@ -266,0 +281,0 @@ rules.push(`${indent}${key.startsWith('--') ? key : dashify(key)}: ${value};`);

transformCss/dist/mattsjones-css-core-transformCss.cjs.prod.js

@@ -145,4 +145,4 @@ 'use strict';
     utils.forEach(rule.selectors, (selectorRule, selector) => {
-      if (root.type === 'global') {
-        throw new Error('Selectors are not allowed within globalStyle');
+      if (root.type !== 'local') {
+        throw new Error(`Selectors are not allowed within ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
       }
@@ -155,4 +155,11 @@
         selector: transformedSelector,
+        rule: utils.omit(selectorRule, specialKeys)
+      });
+      const selectorRoot = {
+        type: 'selector',
+        selector: transformedSelector,
         rule: selectorRule
-      });
+      };
+      this.transformSupports(selectorRoot, selectorRule['@supports'], conditions);
+      this.transformMedia(selectorRoot, selectorRule['@media'], conditions);
     });
@@ -169,4 +176,8 @@ }
       });
-      this.transformSimplePsuedos(root, mediaRule, conditions);
-      this.transformSelectors(root, mediaRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, mediaRule, conditions);
+        this.transformSelectors(root, mediaRule, conditions);
+      }
+
       this.transformSupports(root, mediaRule['@supports'], conditions);
@@ -184,4 +195,8 @@ });
       });
-      this.transformSimplePsuedos(root, supportsRule, conditions);
-      this.transformSelectors(root, supportsRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, supportsRule, conditions);
+        this.transformSelectors(root, supportsRule, conditions);
+      }
+
       this.transformMedia(root, supportsRule['@media'], conditions);
@@ -195,4 +210,4 @@ });
       if (simplePseudoSet.has(key)) {
-        if (root.type === 'global') {
-          throw new Error('Simple pseudos are not valid in globalStyles');
+        if (root.type !== 'local') {
+          throw new Error(`Simple pseudos are not valid in ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
         }
@@ -263,3 +278,3 @@
         } else if (value && typeof value === 'object') {
-          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}\n`);
+          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}`);
         } else {
@@ -266,0 +281,0 @@ rules.push(`${indent}${key.startsWith('--') ? key : dashify(key)}: ${value};`);

transformCss/dist/mattsjones-css-core-transformCss.esm.js

@@ -137,4 +137,4 @@ import cssesc from 'cssesc';
     forEach(rule.selectors, (selectorRule, selector) => {
-      if (root.type === 'global') {
-        throw new Error('Selectors are not allowed within globalStyle');
+      if (root.type !== 'local') {
+        throw new Error(`Selectors are not allowed within ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
       }
@@ -147,4 +147,11 @@
         selector: transformedSelector,
+        rule: omit(selectorRule, specialKeys)
+      });
+      const selectorRoot = {
+        type: 'selector',
+        selector: transformedSelector,
         rule: selectorRule
-      });
+      };
+      this.transformSupports(selectorRoot, selectorRule['@supports'], conditions);
+      this.transformMedia(selectorRoot, selectorRule['@media'], conditions);
     });
@@ -161,4 +168,8 @@ }
       });
-      this.transformSimplePsuedos(root, mediaRule, conditions);
-      this.transformSelectors(root, mediaRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, mediaRule, conditions);
+        this.transformSelectors(root, mediaRule, conditions);
+      }
+
       this.transformSupports(root, mediaRule['@supports'], conditions);
@@ -176,4 +187,8 @@ });
       });
-      this.transformSimplePsuedos(root, supportsRule, conditions);
-      this.transformSelectors(root, supportsRule, conditions);
+
+      if (root.type === 'local') {
+        this.transformSimplePsuedos(root, supportsRule, conditions);
+        this.transformSelectors(root, supportsRule, conditions);
+      }
+
       this.transformMedia(root, supportsRule['@media'], conditions);
@@ -187,4 +202,4 @@ });
       if (simplePseudoSet.has(key)) {
-        if (root.type === 'global') {
-          throw new Error('Simple pseudos are not valid in globalStyles');
+        if (root.type !== 'local') {
+          throw new Error(`Simple pseudos are not valid in ${root.type === 'global' ? '"globalStyle"' : '"selectors"'}`);
         }
@@ -255,3 +270,3 @@
         } else if (value && typeof value === 'object') {
-          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}\n`);
+          rules.push(`${indent}${key} {\n${walkCss(value, indent + DOUBLE_SPACE).join('\n')}\n${indent}}`);
         } else {
@@ -258,0 +273,0 @@ rules.push(`${indent}${key.startsWith('--') ? key : dashify(key)}: ${value};`);

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

176470

increased by4.78%

Lines of code

4713

increased by3.51%

No dependency changes