@linaria/atomic 4.5.4 → 5.0.1

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/css.ts"],"sourcesContent":["export { default as css } from './css';\nexport { styled } from '@linaria/react';\nexport { cx } from '@linaria/core';\n\nexport type { CSSProperties } from './CSSProperties';\n","import type { LinariaClassName } from '@linaria/core';\n\nimport type { CSSProperties } from './CSSProperties';\n\ntype CSS = (\n  strings: TemplateStringsArray,\n  ...exprs: Array<string | number | CSSProperties>\n) => LinariaClassName;\n\nlet idx = 0;\n\nexport const css: CSS = () => {\n  if (process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line no-plusplus\n    return `mocked-atomic-css-${idx++}` as LinariaClassName;\n  }\n\n  throw new Error(\n    'Using the \"css\" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.'\n  );\n};\n\nexport default css;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACSA,IAAI,MAAM;AAEH,IAAM,MAAW,MAAM;AAC5B,MAAI,QAAQ,IAAI,aAAa,QAAQ;AAEnC,WAAO,qBAAqB;AAAA,EAC9B;AAEA,QAAM,IAAI;AAAA,IACR;AAAA,EACF;AACF;AAEA,IAAO,cAAQ;;;ADrBf,mBAAuB;AACvB,kBAAmB;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/css.ts"],"sourcesContent":["export { default as css } from './css';\nexport { styled } from '@linaria/react';\nexport { cx } from '@linaria/core';\n\nexport type { CSSProperties } from './CSSProperties';\n","import type { LinariaClassName } from '@linaria/core';\n\nimport type { CSSProperties } from './CSSProperties';\n\ntype CSS = (\n  strings: TemplateStringsArray,\n  ...exprs: Array<string | number | CSSProperties>\n) => LinariaClassName;\n\nlet idx = 0;\n\nexport const css: CSS = () => {\n  if (process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line no-plusplus\n    return `mocked-atomic-css-${idx++}` as LinariaClassName;\n  }\n\n  throw new Error(\n    'Using the \"css\" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.'\n  );\n};\n\nexport default css;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACSA,IAAI,MAAM;AAEH,IAAM,MAAW,MAAM;AAC5B,MAAI,QAAQ,IAAI,aAAa,QAAQ;AAEnC,WAAO,qBAAqB,KAAK;AAAA,EACnC;AAEA,QAAM,IAAI;AAAA,IACR;AAAA,EACF;AACF;AAEA,IAAO,cAAQ;;;ADrBf,mBAAuB;AACvB,kBAAmB;","names":[]}

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/css.ts","../src/index.ts"],"sourcesContent":["import type { LinariaClassName } from '@linaria/core';\n\nimport type { CSSProperties } from './CSSProperties';\n\ntype CSS = (\n  strings: TemplateStringsArray,\n  ...exprs: Array<string | number | CSSProperties>\n) => LinariaClassName;\n\nlet idx = 0;\n\nexport const css: CSS = () => {\n  if (process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line no-plusplus\n    return `mocked-atomic-css-${idx++}` as LinariaClassName;\n  }\n\n  throw new Error(\n    'Using the \"css\" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.'\n  );\n};\n\nexport default css;\n","export { default as css } from './css';\nexport { styled } from '@linaria/react';\nexport { cx } from '@linaria/core';\n\nexport type { CSSProperties } from './CSSProperties';\n"],"mappings":";AASA,IAAI,MAAM;AAEH,IAAM,MAAW,MAAM;AAC5B,MAAI,QAAQ,IAAI,aAAa,QAAQ;AAEnC,WAAO,qBAAqB;AAAA,EAC9B;AAEA,QAAM,IAAI;AAAA,IACR;AAAA,EACF;AACF;AAEA,IAAO,cAAQ;;;ACrBf,SAAS,cAAc;AACvB,SAAS,UAAU;","names":[]}
+{"version":3,"sources":["../src/css.ts","../src/index.ts"],"sourcesContent":["import type { LinariaClassName } from '@linaria/core';\n\nimport type { CSSProperties } from './CSSProperties';\n\ntype CSS = (\n  strings: TemplateStringsArray,\n  ...exprs: Array<string | number | CSSProperties>\n) => LinariaClassName;\n\nlet idx = 0;\n\nexport const css: CSS = () => {\n  if (process.env.NODE_ENV === 'test') {\n    // eslint-disable-next-line no-plusplus\n    return `mocked-atomic-css-${idx++}` as LinariaClassName;\n  }\n\n  throw new Error(\n    'Using the \"css\" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.'\n  );\n};\n\nexport default css;\n","export { default as css } from './css';\nexport { styled } from '@linaria/react';\nexport { cx } from '@linaria/core';\n\nexport type { CSSProperties } from './CSSProperties';\n"],"mappings":";AASA,IAAI,MAAM;AAEH,IAAM,MAAW,MAAM;AAC5B,MAAI,QAAQ,IAAI,aAAa,QAAQ;AAEnC,WAAO,qBAAqB,KAAK;AAAA,EACnC;AAEA,QAAM,IAAI;AAAA,IACR;AAAA,EACF;AACF;AAEA,IAAO,cAAQ;;;ACrBf,SAAS,cAAc;AACvB,SAAS,UAAU;","names":[]}

package/dist/processors/css.js

@@ -18,28 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
-};
 
 // src/processors/css.ts
 var css_exports = {};
@@ -58,6 +44,9 @@ var import_utils = require("@linaria/utils");
 
 // src/processors/helpers/propertyPriority.ts
 var shorthandProperties = {
+  // The `all` property resets everything, and should effectively have priority zero.
+  // In practice, this can be achieved by using: div { all: ... }  to have even less specificity, but to avoid duplicating all selectors, we just let it be
+  // 'all': []
   animation: [
     "animation-name",
     "animation-duration",
@@ -330,15 +319,11 @@ function atomize(cssText, hasPriority = false) {
 }
 
 // src/processors/css.ts
-var _classes;
 var AtomicCssProcessor = class extends import_css.default {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _classes, void 0);
-  }
+  #classes;
   get classes() {
-    if (typeof __privateGet(this, _classes) !== "undefined") {
-      return __privateGet(this, _classes);
+    if (typeof this.#classes !== "undefined") {
+      return this.#classes;
     }
     throw new Error("Styles are not extracted yet. Please call `build` first.");
   }
@@ -351,7 +336,7 @@ var AtomicCssProcessor = class extends import_css.default {
     atomicRules.forEach((rule) => {
       rules[rule.cssText] = {
         cssText: rule.cssText,
-        start: (loc == null ? void 0 : loc.start) ?? null,
+        start: loc?.start ?? null,
         className: this.className,
         displayName: this.displayName,
         atom: true
@@ -362,11 +347,8 @@ var AtomicCssProcessor = class extends import_css.default {
 ${rule.cssText}`
       );
     });
-    __privateSet(this, _classes, atomicRules.filter((rule) => !!rule.className).map((rule) => rule.className).join(" "));
+    this.#classes = atomicRules.filter((rule) => !!rule.className).map((rule) => rule.className).join(" ");
     return rules;
   }
 };
-_classes = new WeakMap();
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});
 //# sourceMappingURL=css.js.map

package/dist/processors/css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/processors/css.ts","../../src/processors/helpers/atomize.ts","../../src/processors/helpers/propertyPriority.ts"],"sourcesContent":["import type { SourceLocation } from '@babel/types';\n\nimport CssProcessor from '@linaria/core/processors/css';\nimport { debug } from '@linaria/logger';\nimport type { Rules, ValueCache } from '@linaria/tags';\n\nimport atomize from './helpers/atomize';\n\nexport default class AtomicCssProcessor extends CssProcessor {\n  #classes: string | undefined;\n\n  private get classes(): string {\n    if (typeof this.#classes !== 'undefined') {\n      return this.#classes;\n    }\n\n    throw new Error('Styles are not extracted yet. Please call `build` first.');\n  }\n\n  public override doRuntimeReplacement(): void {\n    this.replacer(this.astService.stringLiteral(this.classes), false);\n  }\n\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): Rules {\n    const rules: Rules = {};\n\n    const atomicRules = atomize(cssText, false);\n    atomicRules.forEach((rule) => {\n      // eslint-disable-next-line no-param-reassign\n      rules[rule.cssText] = {\n        cssText: rule.cssText,\n        start: loc?.start ?? null,\n        className: this.className!,\n        displayName: this.displayName!,\n        atom: true,\n      };\n\n      debug(\n        'evaluator:template-processor:extracted-atomic-rule',\n        `\\n${rule.cssText}`\n      );\n    });\n\n    this.#classes = atomicRules\n      // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object\n      .filter((rule) => !!rule.className)\n      .map((rule) => rule.className!)\n      .join(' ');\n\n    return rules;\n  }\n}\n","import { all as knownProperties } from 'known-css-properties';\nimport type { Document, AtRule, Container, Rule } from 'postcss';\nimport postcss from 'postcss';\nimport stylis from 'stylis';\n\nimport { slugify } from '@linaria/utils';\n\nimport { getPropertyPriority } from './propertyPriority';\n\nconst knownPropertiesMap = knownProperties.reduce(\n  (acc: { [property: string]: number }, property, i) => {\n    acc[property] = i;\n    return acc;\n  },\n  {}\n);\n\nfunction hashProperty(property: string) {\n  const index = knownPropertiesMap[property];\n  // If it's a known property, let's use the index to cut down the length of the hash.\n  // otherwise, slugify\n  if (index !== undefined) {\n    return index.toString(36); // base 36 so that we get a-z,0-9\n  }\n  return slugify(property);\n}\n\nconst parseCss = (cssText: string) => {\n  try {\n    return postcss.parse(cssText);\n  } catch (e) {\n    if (e instanceof Error) {\n      throw new Error(`Error parsing CSS: ${e.message}\\nCSS:\\n${cssText}`);\n    }\n\n    throw new Error(`Unknown error parsing CSS.\\nCSS:\\n${cssText}`);\n  }\n};\n\nexport default function atomize(cssText: string, hasPriority = false) {\n  stylis.set({\n    prefix: false,\n    keyframe: false,\n  });\n  const atomicRules: {\n    className?: string;\n    cssText: string;\n    property: string;\n  }[] = [];\n\n  const stylesheet = parseCss(cssText);\n\n  // We want to extract all keyframes and leave them as-is.\n  // This isn't scoped locally yet\n  stylesheet.walkAtRules('keyframes', (atRule) => {\n    atRule.remove();\n    atomicRules.push({\n      property: atRule.name,\n      cssText: atRule.toString(),\n    });\n  });\n\n  stylesheet.walkDecls((decl) => {\n    let thisParent: Document | Container | undefined = decl.parent;\n    const parents: (Document | Container)[] = [];\n    const atomicProperty = [decl.prop];\n    let hasAtRule = false;\n\n    // Traverse the declarations parents, and collect them all.\n    while (thisParent && thisParent !== stylesheet) {\n      parents.unshift(thisParent);\n      if (thisParent.type === 'atrule') {\n        hasAtRule = true;\n        // @media queries, @supports etc.\n        atomicProperty.push(\n          (thisParent as AtRule).name,\n          (thisParent as AtRule).params\n        );\n      } else if (thisParent.type === 'rule') {\n        // pseudo classes etc.\n        atomicProperty.push((thisParent as Rule).selector);\n      }\n\n      thisParent = thisParent.parent;\n    }\n\n    // Create a new stylesheet that contains *just* the extracted atomic rule and wrapping selectors, eg.\n    // `@media (max-width: 400px) { background: red; }`, or\n    // `&:hover { background: red; }`, or\n    // `background: red;`\n    // We do this so we can run it through stylis, to produce a full atom, eg.\n    // `@media (max-width: 400px) { .atm_foo { background: red; } }`\n    const root = postcss.root();\n    let container: Document | Container = root;\n    parents.forEach((parent) => {\n      const newNode = parent.clone();\n      newNode.removeAll();\n      container.append(newNode);\n      container = newNode;\n    });\n    container.append(decl.clone());\n\n    const css = root.toString();\n    const propertySlug = hashProperty([...atomicProperty].join(';'));\n    const valueSlug = slugify(decl.value);\n    const className = `atm_${propertySlug}_${valueSlug}`;\n\n    const propertyPriority =\n      getPropertyPriority(decl.prop) +\n      (hasAtRule ? 1 : 0) +\n      (hasPriority ? 1 : 0);\n    const processedCss = stylis(`.${className}`.repeat(propertyPriority), css);\n\n    atomicRules.push({\n      property: atomicProperty.join(' '),\n      className,\n      cssText: processedCss,\n    });\n  });\n\n  return atomicRules;\n}\n","const shorthandProperties = {\n  // The `all` property resets everything, and should effectively have priority zero.\n  // In practice, this can be achieved by using: div { all: ... }  to have even less specificity, but to avoid duplicating all selectors, we just let it be\n  // 'all': []\n  animation: [\n    'animation-name',\n    'animation-duration',\n    'animation-timing-function',\n    'animation-delay',\n    'animation-iteration-count',\n    'animation-direction',\n    'animation-fill-mode',\n    'animation-play-state',\n  ],\n  background: [\n    'background-attachment',\n    'background-clip',\n    'background-color',\n    'background-image',\n    'background-origin',\n    'background-position',\n    'background-repeat',\n    'background-size',\n  ],\n  border: ['border-color', 'border-style', 'border-width'],\n  'border-block-end': [\n    'border-block-end-color',\n    'border-block-end-style',\n    'border-block-end-width',\n  ],\n  'border-block-start': [\n    'border-block-start-color',\n    'border-block-start-style',\n    'border-block-start-width',\n  ],\n  'border-bottom': [\n    'border-bottom-color',\n    'border-bottom-style',\n    'border-bottom-width',\n  ],\n  'border-color': [\n    'border-bottom-color',\n    'border-left-color',\n    'border-right-color',\n    'border-top-color',\n  ],\n  'border-image': [\n    'border-image-outset',\n    'border-image-repeat',\n    'border-image-slice',\n    'border-image-source',\n    'border-image-width',\n  ],\n  'border-inline-end': [\n    'border-inline-end-color',\n    'border-inline-end-style',\n    'border-inline-end-width',\n  ],\n  'border-inline-start': [\n    'border-inline-start-color',\n    'border-inline-start-style',\n    'border-inline-start-width',\n  ],\n  'border-left': [\n    'border-left-color',\n    'border-left-style',\n    'border-left-width',\n  ],\n  'border-radius': [\n    'border-top-left-radius',\n    'border-top-right-radius',\n    'border-bottom-right-radius',\n    'border-bottom-left-radius',\n  ],\n  'border-right': [\n    'border-right-color',\n    'border-right-style',\n    'border-right-width',\n  ],\n  'border-style': [\n    'border-bottom-style',\n    'border-left-style',\n    'border-right-style',\n    'border-top-style',\n  ],\n  'border-top': ['border-top-color', 'border-top-style', 'border-top-width'],\n  'border-width': [\n    'border-bottom-width',\n    'border-left-width',\n    'border-right-width',\n    'border-top-width',\n  ],\n  'column-rule': [\n    'column-rule-width',\n    'column-rule-style',\n    'column-rule-color',\n  ],\n  columns: ['column-count', 'column-width'],\n  flex: ['flex-grow', 'flex-shrink', 'flex-basis'],\n  'flex-flow': ['flex-direction', 'flex-wrap'],\n  font: [\n    'font-family',\n    'font-size',\n    'font-stretch',\n    'font-style',\n    'font-variant',\n    'font-weight',\n    'line-height',\n  ],\n  gap: ['row-gap', 'column-gap'],\n  grid: [\n    'grid-auto-columns',\n    'grid-auto-flow',\n    'grid-auto-rows',\n    'grid-template-areas',\n    'grid-template-columns',\n    'grid-template-rows',\n  ],\n  'grid-area': [\n    'grid-row-start',\n    'grid-column-start',\n    'grid-row-end',\n    'grid-column-end',\n  ],\n  'grid-column': ['grid-column-end', 'grid-column-start'],\n  'grid-row': ['grid-row-end', 'grid-row-start'],\n  'grid-template': [\n    'grid-template-areas',\n    'grid-template-columns',\n    'grid-template-rows',\n  ],\n  'list-style': ['list-style-image', 'list-style-position', 'list-style-type'],\n  margin: ['margin-bottom', 'margin-left', 'margin-right', 'margin-top'],\n  mask: [\n    'mask-clip',\n    'mask-composite',\n    'mask-image',\n    'mask-mode',\n    'mask-origin',\n    'mask-position',\n    'mask-repeat',\n    'mask-size',\n  ],\n  offset: [\n    'offset-anchor',\n    'offset-distance',\n    'offset-path',\n    'offset-position',\n    'offset-rotate',\n  ],\n  outline: ['outline-color', 'outline-style', 'outline-width'],\n  overflow: ['overflow-x', 'overflow-y'],\n  padding: ['padding-bottom', 'padding-left', 'padding-right', 'padding-top'],\n  'place-content': ['align-content', 'justify-content'],\n  'place-items': ['align-items', 'justify-items'],\n  'place-self': ['align-self', 'justify-self'],\n  'scroll-margin': [\n    'scroll-margin-bottom',\n    'scroll-margin-left',\n    'scroll-margin-right',\n    'scroll-margin-top',\n  ],\n  'scroll-padding': [\n    'scroll-padding-bottom',\n    'scroll-padding-left',\n    'scroll-padding-right',\n    'scroll-padding-top',\n  ],\n  'text-decoration': [\n    'text-decoration-color',\n    'text-decoration-line',\n    'text-decoration-style',\n    'text-decoration-thickness',\n  ],\n  'text-emphasis': ['text-emphasis-color', 'text-emphasis-style'],\n  transition: [\n    'transition-delay',\n    'transition-duration',\n    'transition-property',\n    'transition-timing-function',\n  ],\n};\n\n// Get the property priority: the higher the priority, the higher the resulting\n// specificity of the atom. For example, if we had:\n//\n// import { css } from '@linaria/atomic';\n// css`\n//   background-color: blue;\n//   background: red;\n// `;\n//\n// we would produce:\n//\n// .atm_a.atm_a { background-color: blue }\n// .atm_b { background: red }\n//\n// and so the more specific selector (.atm_a.atm_a) would win\nexport function getPropertyPriority(property: string) {\n  const longhands = Object.values(shorthandProperties).reduce(\n    (a, b) => [...a, ...b],\n    []\n  );\n\n  return longhands.includes(property) ? 2 : 1;\n}\n"],"mappings":"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","names":["knownProperties","postcss","stylis","CssProcessor"]}
+{"version":3,"sources":["../../src/processors/css.ts","../../src/processors/helpers/atomize.ts","../../src/processors/helpers/propertyPriority.ts"],"sourcesContent":["import type { SourceLocation } from '@babel/types';\n\nimport CssProcessor from '@linaria/core/processors/css';\nimport { debug } from '@linaria/logger';\nimport type { Rules, ValueCache } from '@linaria/tags';\n\nimport atomize from './helpers/atomize';\n\nexport default class AtomicCssProcessor extends CssProcessor {\n  #classes: string | undefined;\n\n  private get classes(): string {\n    if (typeof this.#classes !== 'undefined') {\n      return this.#classes;\n    }\n\n    throw new Error('Styles are not extracted yet. Please call `build` first.');\n  }\n\n  public override doRuntimeReplacement(): void {\n    this.replacer(this.astService.stringLiteral(this.classes), false);\n  }\n\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): Rules {\n    const rules: Rules = {};\n\n    const atomicRules = atomize(cssText, false);\n    atomicRules.forEach((rule) => {\n      // eslint-disable-next-line no-param-reassign\n      rules[rule.cssText] = {\n        cssText: rule.cssText,\n        start: loc?.start ?? null,\n        className: this.className!,\n        displayName: this.displayName!,\n        atom: true,\n      };\n\n      debug(\n        'evaluator:template-processor:extracted-atomic-rule',\n        `\\n${rule.cssText}`\n      );\n    });\n\n    this.#classes = atomicRules\n      // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object\n      .filter((rule) => !!rule.className)\n      .map((rule) => rule.className!)\n      .join(' ');\n\n    return rules;\n  }\n}\n","import { all as knownProperties } from 'known-css-properties';\nimport type { Document, AtRule, Container, Rule } from 'postcss';\nimport postcss from 'postcss';\nimport stylis from 'stylis';\n\nimport { slugify } from '@linaria/utils';\n\nimport { getPropertyPriority } from './propertyPriority';\n\nconst knownPropertiesMap = knownProperties.reduce(\n  (acc: { [property: string]: number }, property, i) => {\n    acc[property] = i;\n    return acc;\n  },\n  {}\n);\n\nfunction hashProperty(property: string) {\n  const index = knownPropertiesMap[property];\n  // If it's a known property, let's use the index to cut down the length of the hash.\n  // otherwise, slugify\n  if (index !== undefined) {\n    return index.toString(36); // base 36 so that we get a-z,0-9\n  }\n  return slugify(property);\n}\n\nconst parseCss = (cssText: string) => {\n  try {\n    return postcss.parse(cssText);\n  } catch (e) {\n    if (e instanceof Error) {\n      throw new Error(`Error parsing CSS: ${e.message}\\nCSS:\\n${cssText}`);\n    }\n\n    throw new Error(`Unknown error parsing CSS.\\nCSS:\\n${cssText}`);\n  }\n};\n\nexport default function atomize(cssText: string, hasPriority = false) {\n  stylis.set({\n    prefix: false,\n    keyframe: false,\n  });\n  const atomicRules: {\n    className?: string;\n    cssText: string;\n    property: string;\n  }[] = [];\n\n  const stylesheet = parseCss(cssText);\n\n  // We want to extract all keyframes and leave them as-is.\n  // This isn't scoped locally yet\n  stylesheet.walkAtRules('keyframes', (atRule) => {\n    atRule.remove();\n    atomicRules.push({\n      property: atRule.name,\n      cssText: atRule.toString(),\n    });\n  });\n\n  stylesheet.walkDecls((decl) => {\n    let thisParent: Document | Container | undefined = decl.parent;\n    const parents: (Document | Container)[] = [];\n    const atomicProperty = [decl.prop];\n    let hasAtRule = false;\n\n    // Traverse the declarations parents, and collect them all.\n    while (thisParent && thisParent !== stylesheet) {\n      parents.unshift(thisParent);\n      if (thisParent.type === 'atrule') {\n        hasAtRule = true;\n        // @media queries, @supports etc.\n        atomicProperty.push(\n          (thisParent as AtRule).name,\n          (thisParent as AtRule).params\n        );\n      } else if (thisParent.type === 'rule') {\n        // pseudo classes etc.\n        atomicProperty.push((thisParent as Rule).selector);\n      }\n\n      thisParent = thisParent.parent;\n    }\n\n    // Create a new stylesheet that contains *just* the extracted atomic rule and wrapping selectors, eg.\n    // `@media (max-width: 400px) { background: red; }`, or\n    // `&:hover { background: red; }`, or\n    // `background: red;`\n    // We do this so we can run it through stylis, to produce a full atom, eg.\n    // `@media (max-width: 400px) { .atm_foo { background: red; } }`\n    const root = postcss.root();\n    let container: Document | Container = root;\n    parents.forEach((parent) => {\n      const newNode = parent.clone();\n      newNode.removeAll();\n      container.append(newNode);\n      container = newNode;\n    });\n    container.append(decl.clone());\n\n    const css = root.toString();\n    const propertySlug = hashProperty([...atomicProperty].join(';'));\n    const valueSlug = slugify(decl.value);\n    const className = `atm_${propertySlug}_${valueSlug}`;\n\n    const propertyPriority =\n      getPropertyPriority(decl.prop) +\n      (hasAtRule ? 1 : 0) +\n      (hasPriority ? 1 : 0);\n    const processedCss = stylis(`.${className}`.repeat(propertyPriority), css);\n\n    atomicRules.push({\n      property: atomicProperty.join(' '),\n      className,\n      cssText: processedCss,\n    });\n  });\n\n  return atomicRules;\n}\n","const shorthandProperties = {\n  // The `all` property resets everything, and should effectively have priority zero.\n  // In practice, this can be achieved by using: div { all: ... }  to have even less specificity, but to avoid duplicating all selectors, we just let it be\n  // 'all': []\n  animation: [\n    'animation-name',\n    'animation-duration',\n    'animation-timing-function',\n    'animation-delay',\n    'animation-iteration-count',\n    'animation-direction',\n    'animation-fill-mode',\n    'animation-play-state',\n  ],\n  background: [\n    'background-attachment',\n    'background-clip',\n    'background-color',\n    'background-image',\n    'background-origin',\n    'background-position',\n    'background-repeat',\n    'background-size',\n  ],\n  border: ['border-color', 'border-style', 'border-width'],\n  'border-block-end': [\n    'border-block-end-color',\n    'border-block-end-style',\n    'border-block-end-width',\n  ],\n  'border-block-start': [\n    'border-block-start-color',\n    'border-block-start-style',\n    'border-block-start-width',\n  ],\n  'border-bottom': [\n    'border-bottom-color',\n    'border-bottom-style',\n    'border-bottom-width',\n  ],\n  'border-color': [\n    'border-bottom-color',\n    'border-left-color',\n    'border-right-color',\n    'border-top-color',\n  ],\n  'border-image': [\n    'border-image-outset',\n    'border-image-repeat',\n    'border-image-slice',\n    'border-image-source',\n    'border-image-width',\n  ],\n  'border-inline-end': [\n    'border-inline-end-color',\n    'border-inline-end-style',\n    'border-inline-end-width',\n  ],\n  'border-inline-start': [\n    'border-inline-start-color',\n    'border-inline-start-style',\n    'border-inline-start-width',\n  ],\n  'border-left': [\n    'border-left-color',\n    'border-left-style',\n    'border-left-width',\n  ],\n  'border-radius': [\n    'border-top-left-radius',\n    'border-top-right-radius',\n    'border-bottom-right-radius',\n    'border-bottom-left-radius',\n  ],\n  'border-right': [\n    'border-right-color',\n    'border-right-style',\n    'border-right-width',\n  ],\n  'border-style': [\n    'border-bottom-style',\n    'border-left-style',\n    'border-right-style',\n    'border-top-style',\n  ],\n  'border-top': ['border-top-color', 'border-top-style', 'border-top-width'],\n  'border-width': [\n    'border-bottom-width',\n    'border-left-width',\n    'border-right-width',\n    'border-top-width',\n  ],\n  'column-rule': [\n    'column-rule-width',\n    'column-rule-style',\n    'column-rule-color',\n  ],\n  columns: ['column-count', 'column-width'],\n  flex: ['flex-grow', 'flex-shrink', 'flex-basis'],\n  'flex-flow': ['flex-direction', 'flex-wrap'],\n  font: [\n    'font-family',\n    'font-size',\n    'font-stretch',\n    'font-style',\n    'font-variant',\n    'font-weight',\n    'line-height',\n  ],\n  gap: ['row-gap', 'column-gap'],\n  grid: [\n    'grid-auto-columns',\n    'grid-auto-flow',\n    'grid-auto-rows',\n    'grid-template-areas',\n    'grid-template-columns',\n    'grid-template-rows',\n  ],\n  'grid-area': [\n    'grid-row-start',\n    'grid-column-start',\n    'grid-row-end',\n    'grid-column-end',\n  ],\n  'grid-column': ['grid-column-end', 'grid-column-start'],\n  'grid-row': ['grid-row-end', 'grid-row-start'],\n  'grid-template': [\n    'grid-template-areas',\n    'grid-template-columns',\n    'grid-template-rows',\n  ],\n  'list-style': ['list-style-image', 'list-style-position', 'list-style-type'],\n  margin: ['margin-bottom', 'margin-left', 'margin-right', 'margin-top'],\n  mask: [\n    'mask-clip',\n    'mask-composite',\n    'mask-image',\n    'mask-mode',\n    'mask-origin',\n    'mask-position',\n    'mask-repeat',\n    'mask-size',\n  ],\n  offset: [\n    'offset-anchor',\n    'offset-distance',\n    'offset-path',\n    'offset-position',\n    'offset-rotate',\n  ],\n  outline: ['outline-color', 'outline-style', 'outline-width'],\n  overflow: ['overflow-x', 'overflow-y'],\n  padding: ['padding-bottom', 'padding-left', 'padding-right', 'padding-top'],\n  'place-content': ['align-content', 'justify-content'],\n  'place-items': ['align-items', 'justify-items'],\n  'place-self': ['align-self', 'justify-self'],\n  'scroll-margin': [\n    'scroll-margin-bottom',\n    'scroll-margin-left',\n    'scroll-margin-right',\n    'scroll-margin-top',\n  ],\n  'scroll-padding': [\n    'scroll-padding-bottom',\n    'scroll-padding-left',\n    'scroll-padding-right',\n    'scroll-padding-top',\n  ],\n  'text-decoration': [\n    'text-decoration-color',\n    'text-decoration-line',\n    'text-decoration-style',\n    'text-decoration-thickness',\n  ],\n  'text-emphasis': ['text-emphasis-color', 'text-emphasis-style'],\n  transition: [\n    'transition-delay',\n    'transition-duration',\n    'transition-property',\n    'transition-timing-function',\n  ],\n};\n\n// Get the property priority: the higher the priority, the higher the resulting\n// specificity of the atom. For example, if we had:\n//\n// import { css } from '@linaria/atomic';\n// css`\n//   background-color: blue;\n//   background: red;\n// `;\n//\n// we would produce:\n//\n// .atm_a.atm_a { background-color: blue }\n// .atm_b { background: red }\n//\n// and so the more specific selector (.atm_a.atm_a) would win\nexport function getPropertyPriority(property: string) {\n  const longhands = Object.values(shorthandProperties).reduce(\n    (a, b) => [...a, ...b],\n    []\n  );\n\n  return longhands.includes(property) ? 2 : 1;\n}\n"],"mappings":"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","names":["knownProperties","postcss","stylis","CssProcessor"]}

package/dist/processors/css.mjs

@@ -1,22 +1,3 @@
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
-};
-
 // src/processors/css.ts
 import CssProcessor from "@linaria/core/processors/css";
 import { debug } from "@linaria/logger";
@@ -29,6 +10,9 @@ import { slugify } from "@linaria/utils";
 
 // src/processors/helpers/propertyPriority.ts
 var shorthandProperties = {
+  // The `all` property resets everything, and should effectively have priority zero.
+  // In practice, this can be achieved by using: div { all: ... }  to have even less specificity, but to avoid duplicating all selectors, we just let it be
+  // 'all': []
   animation: [
     "animation-name",
     "animation-duration",
@@ -301,15 +285,11 @@ function atomize(cssText, hasPriority = false) {
 }
 
 // src/processors/css.ts
-var _classes;
 var AtomicCssProcessor = class extends CssProcessor {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _classes, void 0);
-  }
+  #classes;
   get classes() {
-    if (typeof __privateGet(this, _classes) !== "undefined") {
-      return __privateGet(this, _classes);
+    if (typeof this.#classes !== "undefined") {
+      return this.#classes;
     }
     throw new Error("Styles are not extracted yet. Please call `build` first.");
   }
@@ -322,7 +302,7 @@ var AtomicCssProcessor = class extends CssProcessor {
     atomicRules.forEach((rule) => {
       rules[rule.cssText] = {
         cssText: rule.cssText,
-        start: (loc == null ? void 0 : loc.start) ?? null,
+        start: loc?.start ?? null,
         className: this.className,
         displayName: this.displayName,
         atom: true
@@ -333,11 +313,10 @@ var AtomicCssProcessor = class extends CssProcessor {
 ${rule.cssText}`
       );
     });
-    __privateSet(this, _classes, atomicRules.filter((rule) => !!rule.className).map((rule) => rule.className).join(" "));
+    this.#classes = atomicRules.filter((rule) => !!rule.className).map((rule) => rule.className).join(" ");
     return rules;
   }
 };
-_classes = new WeakMap();
 export {
   AtomicCssProcessor as default
 };

package/dist/processors/css.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/processors/css.ts","../../src/processors/helpers/atomize.ts","../../src/processors/helpers/propertyPriority.ts"],"sourcesContent":["import type { SourceLocation } from '@babel/types';\n\nimport CssProcessor from '@linaria/core/processors/css';\nimport { debug } from '@linaria/logger';\nimport type { Rules, ValueCache } from '@linaria/tags';\n\nimport atomize from './helpers/atomize';\n\nexport default class AtomicCssProcessor extends CssProcessor {\n  #classes: string | undefined;\n\n  private get classes(): string {\n    if (typeof this.#classes !== 'undefined') {\n      return this.#classes;\n    }\n\n    throw new Error('Styles are not extracted yet. Please call `build` first.');\n  }\n\n  public override doRuntimeReplacement(): void {\n    this.replacer(this.astService.stringLiteral(this.classes), false);\n  }\n\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): Rules {\n    const rules: Rules = {};\n\n    const atomicRules = atomize(cssText, false);\n    atomicRules.forEach((rule) => {\n      // eslint-disable-next-line no-param-reassign\n      rules[rule.cssText] = {\n        cssText: rule.cssText,\n        start: loc?.start ?? null,\n        className: this.className!,\n        displayName: this.displayName!,\n        atom: true,\n      };\n\n      debug(\n        'evaluator:template-processor:extracted-atomic-rule',\n        `\\n${rule.cssText}`\n      );\n    });\n\n    this.#classes = atomicRules\n      // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object\n      .filter((rule) => !!rule.className)\n      .map((rule) => rule.className!)\n      .join(' ');\n\n    return rules;\n  }\n}\n","import { all as knownProperties } from 'known-css-properties';\nimport type { Document, AtRule, Container, Rule } from 'postcss';\nimport postcss from 'postcss';\nimport stylis from 'stylis';\n\nimport { slugify } from '@linaria/utils';\n\nimport { getPropertyPriority } from './propertyPriority';\n\nconst knownPropertiesMap = knownProperties.reduce(\n  (acc: { [property: string]: number }, property, i) => {\n    acc[property] = i;\n    return acc;\n  },\n  {}\n);\n\nfunction hashProperty(property: string) {\n  const index = knownPropertiesMap[property];\n  // If it's a known property, let's use the index to cut down the length of the hash.\n  // otherwise, slugify\n  if (index !== undefined) {\n    return index.toString(36); // base 36 so that we get a-z,0-9\n  }\n  return slugify(property);\n}\n\nconst parseCss = (cssText: string) => {\n  try {\n    return postcss.parse(cssText);\n  } catch (e) {\n    if (e instanceof Error) {\n      throw new Error(`Error parsing CSS: ${e.message}\\nCSS:\\n${cssText}`);\n    }\n\n    throw new Error(`Unknown error parsing CSS.\\nCSS:\\n${cssText}`);\n  }\n};\n\nexport default function atomize(cssText: string, hasPriority = false) {\n  stylis.set({\n    prefix: false,\n    keyframe: false,\n  });\n  const atomicRules: {\n    className?: string;\n    cssText: string;\n    property: string;\n  }[] = [];\n\n  const stylesheet = parseCss(cssText);\n\n  // We want to extract all keyframes and leave them as-is.\n  // This isn't scoped locally yet\n  stylesheet.walkAtRules('keyframes', (atRule) => {\n    atRule.remove();\n    atomicRules.push({\n      property: atRule.name,\n      cssText: atRule.toString(),\n    });\n  });\n\n  stylesheet.walkDecls((decl) => {\n    let thisParent: Document | Container | undefined = decl.parent;\n    const parents: (Document | Container)[] = [];\n    const atomicProperty = [decl.prop];\n    let hasAtRule = false;\n\n    // Traverse the declarations parents, and collect them all.\n    while (thisParent && thisParent !== stylesheet) {\n      parents.unshift(thisParent);\n      if (thisParent.type === 'atrule') {\n        hasAtRule = true;\n        // @media queries, @supports etc.\n        atomicProperty.push(\n          (thisParent as AtRule).name,\n          (thisParent as AtRule).params\n        );\n      } else if (thisParent.type === 'rule') {\n        // pseudo classes etc.\n        atomicProperty.push((thisParent as Rule).selector);\n      }\n\n      thisParent = thisParent.parent;\n    }\n\n    // Create a new stylesheet that contains *just* the extracted atomic rule and wrapping selectors, eg.\n    // `@media (max-width: 400px) { background: red; }`, or\n    // `&:hover { background: red; }`, or\n    // `background: red;`\n    // We do this so we can run it through stylis, to produce a full atom, eg.\n    // `@media (max-width: 400px) { .atm_foo { background: red; } }`\n    const root = postcss.root();\n    let container: Document | Container = root;\n    parents.forEach((parent) => {\n      const newNode = parent.clone();\n      newNode.removeAll();\n      container.append(newNode);\n      container = newNode;\n    });\n    container.append(decl.clone());\n\n    const css = root.toString();\n    const propertySlug = hashProperty([...atomicProperty].join(';'));\n    const valueSlug = slugify(decl.value);\n    const className = `atm_${propertySlug}_${valueSlug}`;\n\n    const propertyPriority =\n      getPropertyPriority(decl.prop) +\n      (hasAtRule ? 1 : 0) +\n      (hasPriority ? 1 : 0);\n    const processedCss = stylis(`.${className}`.repeat(propertyPriority), css);\n\n    atomicRules.push({\n      property: atomicProperty.join(' '),\n      className,\n      cssText: processedCss,\n    });\n  });\n\n  return atomicRules;\n}\n","const shorthandProperties = {\n  // The `all` property resets everything, and should effectively have priority zero.\n  // In practice, this can be achieved by using: div { all: ... }  to have even less specificity, but to avoid duplicating all selectors, we just let it be\n  // 'all': []\n  animation: [\n    'animation-name',\n    'animation-duration',\n    'animation-timing-function',\n    'animation-delay',\n    'animation-iteration-count',\n    'animation-direction',\n    'animation-fill-mode',\n    'animation-play-state',\n  ],\n  background: [\n    'background-attachment',\n    'background-clip',\n    'background-color',\n    'background-image',\n    'background-origin',\n    'background-position',\n    'background-repeat',\n    'background-size',\n  ],\n  border: ['border-color', 'border-style', 'border-width'],\n  'border-block-end': [\n    'border-block-end-color',\n    'border-block-end-style',\n    'border-block-end-width',\n  ],\n  'border-block-start': [\n    'border-block-start-color',\n    'border-block-start-style',\n    'border-block-start-width',\n  ],\n  'border-bottom': [\n    'border-bottom-color',\n    'border-bottom-style',\n    'border-bottom-width',\n  ],\n  'border-color': [\n    'border-bottom-color',\n    'border-left-color',\n    'border-right-color',\n    'border-top-color',\n  ],\n  'border-image': [\n    'border-image-outset',\n    'border-image-repeat',\n    'border-image-slice',\n    'border-image-source',\n    'border-image-width',\n  ],\n  'border-inline-end': [\n    'border-inline-end-color',\n    'border-inline-end-style',\n    'border-inline-end-width',\n  ],\n  'border-inline-start': [\n    'border-inline-start-color',\n    'border-inline-start-style',\n    'border-inline-start-width',\n  ],\n  'border-left': [\n    'border-left-color',\n    'border-left-style',\n    'border-left-width',\n  ],\n  'border-radius': [\n    'border-top-left-radius',\n    'border-top-right-radius',\n    'border-bottom-right-radius',\n    'border-bottom-left-radius',\n  ],\n  'border-right': [\n    'border-right-color',\n    'border-right-style',\n    'border-right-width',\n  ],\n  'border-style': [\n    'border-bottom-style',\n    'border-left-style',\n    'border-right-style',\n    'border-top-style',\n  ],\n  'border-top': ['border-top-color', 'border-top-style', 'border-top-width'],\n  'border-width': [\n    'border-bottom-width',\n    'border-left-width',\n    'border-right-width',\n    'border-top-width',\n  ],\n  'column-rule': [\n    'column-rule-width',\n    'column-rule-style',\n    'column-rule-color',\n  ],\n  columns: ['column-count', 'column-width'],\n  flex: ['flex-grow', 'flex-shrink', 'flex-basis'],\n  'flex-flow': ['flex-direction', 'flex-wrap'],\n  font: [\n    'font-family',\n    'font-size',\n    'font-stretch',\n    'font-style',\n    'font-variant',\n    'font-weight',\n    'line-height',\n  ],\n  gap: ['row-gap', 'column-gap'],\n  grid: [\n    'grid-auto-columns',\n    'grid-auto-flow',\n    'grid-auto-rows',\n    'grid-template-areas',\n    'grid-template-columns',\n    'grid-template-rows',\n  ],\n  'grid-area': [\n    'grid-row-start',\n    'grid-column-start',\n    'grid-row-end',\n    'grid-column-end',\n  ],\n  'grid-column': ['grid-column-end', 'grid-column-start'],\n  'grid-row': ['grid-row-end', 'grid-row-start'],\n  'grid-template': [\n    'grid-template-areas',\n    'grid-template-columns',\n    'grid-template-rows',\n  ],\n  'list-style': ['list-style-image', 'list-style-position', 'list-style-type'],\n  margin: ['margin-bottom', 'margin-left', 'margin-right', 'margin-top'],\n  mask: [\n    'mask-clip',\n    'mask-composite',\n    'mask-image',\n    'mask-mode',\n    'mask-origin',\n    'mask-position',\n    'mask-repeat',\n    'mask-size',\n  ],\n  offset: [\n    'offset-anchor',\n    'offset-distance',\n    'offset-path',\n    'offset-position',\n    'offset-rotate',\n  ],\n  outline: ['outline-color', 'outline-style', 'outline-width'],\n  overflow: ['overflow-x', 'overflow-y'],\n  padding: ['padding-bottom', 'padding-left', 'padding-right', 'padding-top'],\n  'place-content': ['align-content', 'justify-content'],\n  'place-items': ['align-items', 'justify-items'],\n  'place-self': ['align-self', 'justify-self'],\n  'scroll-margin': [\n    'scroll-margin-bottom',\n    'scroll-margin-left',\n    'scroll-margin-right',\n    'scroll-margin-top',\n  ],\n  'scroll-padding': [\n    'scroll-padding-bottom',\n    'scroll-padding-left',\n    'scroll-padding-right',\n    'scroll-padding-top',\n  ],\n  'text-decoration': [\n    'text-decoration-color',\n    'text-decoration-line',\n    'text-decoration-style',\n    'text-decoration-thickness',\n  ],\n  'text-emphasis': ['text-emphasis-color', 'text-emphasis-style'],\n  transition: [\n    'transition-delay',\n    'transition-duration',\n    'transition-property',\n    'transition-timing-function',\n  ],\n};\n\n// Get the property priority: the higher the priority, the higher the resulting\n// specificity of the atom. For example, if we had:\n//\n// import { css } from '@linaria/atomic';\n// css`\n//   background-color: blue;\n//   background: red;\n// `;\n//\n// we would produce:\n//\n// .atm_a.atm_a { background-color: blue }\n// .atm_b { background: red }\n//\n// and so the more specific selector (.atm_a.atm_a) would win\nexport function getPropertyPriority(property: string) {\n  const longhands = Object.values(shorthandProperties).reduce(\n    (a, b) => [...a, ...b],\n    []\n  );\n\n  return longhands.includes(property) ? 2 : 1;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/processors/css.ts","../../src/processors/helpers/atomize.ts","../../src/processors/helpers/propertyPriority.ts"],"sourcesContent":["import type { SourceLocation } from '@babel/types';\n\nimport CssProcessor from '@linaria/core/processors/css';\nimport { debug } from '@linaria/logger';\nimport type { Rules, ValueCache } from '@linaria/tags';\n\nimport atomize from './helpers/atomize';\n\nexport default class AtomicCssProcessor extends CssProcessor {\n  #classes: string | undefined;\n\n  private get classes(): string {\n    if (typeof this.#classes !== 'undefined') {\n      return this.#classes;\n    }\n\n    throw new Error('Styles are not extracted yet. Please call `build` first.');\n  }\n\n  public override doRuntimeReplacement(): void {\n    this.replacer(this.astService.stringLiteral(this.classes), false);\n  }\n\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): Rules {\n    const rules: Rules = {};\n\n    const atomicRules = atomize(cssText, false);\n    atomicRules.forEach((rule) => {\n      // eslint-disable-next-line no-param-reassign\n      rules[rule.cssText] = {\n        cssText: rule.cssText,\n        start: loc?.start ?? null,\n        className: this.className!,\n        displayName: this.displayName!,\n        atom: true,\n      };\n\n      debug(\n        'evaluator:template-processor:extracted-atomic-rule',\n        `\\n${rule.cssText}`\n      );\n    });\n\n    this.#classes = atomicRules\n      // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object\n      .filter((rule) => !!rule.className)\n      .map((rule) => rule.className!)\n      .join(' ');\n\n    return rules;\n  }\n}\n","import { all as knownProperties } from 'known-css-properties';\nimport type { Document, AtRule, Container, Rule } from 'postcss';\nimport postcss from 'postcss';\nimport stylis from 'stylis';\n\nimport { slugify } from '@linaria/utils';\n\nimport { getPropertyPriority } from './propertyPriority';\n\nconst knownPropertiesMap = knownProperties.reduce(\n  (acc: { [property: string]: number }, property, i) => {\n    acc[property] = i;\n    return acc;\n  },\n  {}\n);\n\nfunction hashProperty(property: string) {\n  const index = knownPropertiesMap[property];\n  // If it's a known property, let's use the index to cut down the length of the hash.\n  // otherwise, slugify\n  if (index !== undefined) {\n    return index.toString(36); // base 36 so that we get a-z,0-9\n  }\n  return slugify(property);\n}\n\nconst parseCss = (cssText: string) => {\n  try {\n    return postcss.parse(cssText);\n  } catch (e) {\n    if (e instanceof Error) {\n      throw new Error(`Error parsing CSS: ${e.message}\\nCSS:\\n${cssText}`);\n    }\n\n    throw new Error(`Unknown error parsing CSS.\\nCSS:\\n${cssText}`);\n  }\n};\n\nexport default function atomize(cssText: string, hasPriority = false) {\n  stylis.set({\n    prefix: false,\n    keyframe: false,\n  });\n  const atomicRules: {\n    className?: string;\n    cssText: string;\n    property: string;\n  }[] = [];\n\n  const stylesheet = parseCss(cssText);\n\n  // We want to extract all keyframes and leave them as-is.\n  // This isn't scoped locally yet\n  stylesheet.walkAtRules('keyframes', (atRule) => {\n    atRule.remove();\n    atomicRules.push({\n      property: atRule.name,\n      cssText: atRule.toString(),\n    });\n  });\n\n  stylesheet.walkDecls((decl) => {\n    let thisParent: Document | Container | undefined = decl.parent;\n    const parents: (Document | Container)[] = [];\n    const atomicProperty = [decl.prop];\n    let hasAtRule = false;\n\n    // Traverse the declarations parents, and collect them all.\n    while (thisParent && thisParent !== stylesheet) {\n      parents.unshift(thisParent);\n      if (thisParent.type === 'atrule') {\n        hasAtRule = true;\n        // @media queries, @supports etc.\n        atomicProperty.push(\n          (thisParent as AtRule).name,\n          (thisParent as AtRule).params\n        );\n      } else if (thisParent.type === 'rule') {\n        // pseudo classes etc.\n        atomicProperty.push((thisParent as Rule).selector);\n      }\n\n      thisParent = thisParent.parent;\n    }\n\n    // Create a new stylesheet that contains *just* the extracted atomic rule and wrapping selectors, eg.\n    // `@media (max-width: 400px) { background: red; }`, or\n    // `&:hover { background: red; }`, or\n    // `background: red;`\n    // We do this so we can run it through stylis, to produce a full atom, eg.\n    // `@media (max-width: 400px) { .atm_foo { background: red; } }`\n    const root = postcss.root();\n    let container: Document | Container = root;\n    parents.forEach((parent) => {\n      const newNode = parent.clone();\n      newNode.removeAll();\n      container.append(newNode);\n      container = newNode;\n    });\n    container.append(decl.clone());\n\n    const css = root.toString();\n    const propertySlug = hashProperty([...atomicProperty].join(';'));\n    const valueSlug = slugify(decl.value);\n    const className = `atm_${propertySlug}_${valueSlug}`;\n\n    const propertyPriority =\n      getPropertyPriority(decl.prop) +\n      (hasAtRule ? 1 : 0) +\n      (hasPriority ? 1 : 0);\n    const processedCss = stylis(`.${className}`.repeat(propertyPriority), css);\n\n    atomicRules.push({\n      property: atomicProperty.join(' '),\n      className,\n      cssText: processedCss,\n    });\n  });\n\n  return atomicRules;\n}\n","const shorthandProperties = {\n  // The `all` property resets everything, and should effectively have priority zero.\n  // In practice, this can be achieved by using: div { all: ... }  to have even less specificity, but to avoid duplicating all selectors, we just let it be\n  // 'all': []\n  animation: [\n    'animation-name',\n    'animation-duration',\n    'animation-timing-function',\n    'animation-delay',\n    'animation-iteration-count',\n    'animation-direction',\n    'animation-fill-mode',\n    'animation-play-state',\n  ],\n  background: [\n    'background-attachment',\n    'background-clip',\n    'background-color',\n    'background-image',\n    'background-origin',\n    'background-position',\n    'background-repeat',\n    'background-size',\n  ],\n  border: ['border-color', 'border-style', 'border-width'],\n  'border-block-end': [\n    'border-block-end-color',\n    'border-block-end-style',\n    'border-block-end-width',\n  ],\n  'border-block-start': [\n    'border-block-start-color',\n    'border-block-start-style',\n    'border-block-start-width',\n  ],\n  'border-bottom': [\n    'border-bottom-color',\n    'border-bottom-style',\n    'border-bottom-width',\n  ],\n  'border-color': [\n    'border-bottom-color',\n    'border-left-color',\n    'border-right-color',\n    'border-top-color',\n  ],\n  'border-image': [\n    'border-image-outset',\n    'border-image-repeat',\n    'border-image-slice',\n    'border-image-source',\n    'border-image-width',\n  ],\n  'border-inline-end': [\n    'border-inline-end-color',\n    'border-inline-end-style',\n    'border-inline-end-width',\n  ],\n  'border-inline-start': [\n    'border-inline-start-color',\n    'border-inline-start-style',\n    'border-inline-start-width',\n  ],\n  'border-left': [\n    'border-left-color',\n    'border-left-style',\n    'border-left-width',\n  ],\n  'border-radius': [\n    'border-top-left-radius',\n    'border-top-right-radius',\n    'border-bottom-right-radius',\n    'border-bottom-left-radius',\n  ],\n  'border-right': [\n    'border-right-color',\n    'border-right-style',\n    'border-right-width',\n  ],\n  'border-style': [\n    'border-bottom-style',\n    'border-left-style',\n    'border-right-style',\n    'border-top-style',\n  ],\n  'border-top': ['border-top-color', 'border-top-style', 'border-top-width'],\n  'border-width': [\n    'border-bottom-width',\n    'border-left-width',\n    'border-right-width',\n    'border-top-width',\n  ],\n  'column-rule': [\n    'column-rule-width',\n    'column-rule-style',\n    'column-rule-color',\n  ],\n  columns: ['column-count', 'column-width'],\n  flex: ['flex-grow', 'flex-shrink', 'flex-basis'],\n  'flex-flow': ['flex-direction', 'flex-wrap'],\n  font: [\n    'font-family',\n    'font-size',\n    'font-stretch',\n    'font-style',\n    'font-variant',\n    'font-weight',\n    'line-height',\n  ],\n  gap: ['row-gap', 'column-gap'],\n  grid: [\n    'grid-auto-columns',\n    'grid-auto-flow',\n    'grid-auto-rows',\n    'grid-template-areas',\n    'grid-template-columns',\n    'grid-template-rows',\n  ],\n  'grid-area': [\n    'grid-row-start',\n    'grid-column-start',\n    'grid-row-end',\n    'grid-column-end',\n  ],\n  'grid-column': ['grid-column-end', 'grid-column-start'],\n  'grid-row': ['grid-row-end', 'grid-row-start'],\n  'grid-template': [\n    'grid-template-areas',\n    'grid-template-columns',\n    'grid-template-rows',\n  ],\n  'list-style': ['list-style-image', 'list-style-position', 'list-style-type'],\n  margin: ['margin-bottom', 'margin-left', 'margin-right', 'margin-top'],\n  mask: [\n    'mask-clip',\n    'mask-composite',\n    'mask-image',\n    'mask-mode',\n    'mask-origin',\n    'mask-position',\n    'mask-repeat',\n    'mask-size',\n  ],\n  offset: [\n    'offset-anchor',\n    'offset-distance',\n    'offset-path',\n    'offset-position',\n    'offset-rotate',\n  ],\n  outline: ['outline-color', 'outline-style', 'outline-width'],\n  overflow: ['overflow-x', 'overflow-y'],\n  padding: ['padding-bottom', 'padding-left', 'padding-right', 'padding-top'],\n  'place-content': ['align-content', 'justify-content'],\n  'place-items': ['align-items', 'justify-items'],\n  'place-self': ['align-self', 'justify-self'],\n  'scroll-margin': [\n    'scroll-margin-bottom',\n    'scroll-margin-left',\n    'scroll-margin-right',\n    'scroll-margin-top',\n  ],\n  'scroll-padding': [\n    'scroll-padding-bottom',\n    'scroll-padding-left',\n    'scroll-padding-right',\n    'scroll-padding-top',\n  ],\n  'text-decoration': [\n    'text-decoration-color',\n    'text-decoration-line',\n    'text-decoration-style',\n    'text-decoration-thickness',\n  ],\n  'text-emphasis': ['text-emphasis-color', 'text-emphasis-style'],\n  transition: [\n    'transition-delay',\n    'transition-duration',\n    'transition-property',\n    'transition-timing-function',\n  ],\n};\n\n// Get the property priority: the higher the priority, the higher the resulting\n// specificity of the atom. For example, if we had:\n//\n// import { css } from '@linaria/atomic';\n// css`\n//   background-color: blue;\n//   background: red;\n// `;\n//\n// we would produce:\n//\n// .atm_a.atm_a { background-color: blue }\n// .atm_b { background: red }\n//\n// and so the more specific selector (.atm_a.atm_a) would win\nexport function getPropertyPriority(property: string) {\n  const longhands = Object.values(shorthandProperties).reduce(\n    (a, b) => [...a, ...b],\n    []\n  );\n\n  return longhands.includes(property) ? 2 : 1;\n}\n"],"mappings":"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","names":[]}

package/dist/processors/styled.js

@@ -18,28 +18,14 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
   isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
-};
 
 // src/processors/styled.ts
 var styled_exports = {};
@@ -59,6 +45,9 @@ var import_utils = require("@linaria/utils");
 
 // src/processors/helpers/propertyPriority.ts
 var shorthandProperties = {
+  // The `all` property resets everything, and should effectively have priority zero.
+  // In practice, this can be achieved by using: div { all: ... }  to have even less specificity, but to avoid duplicating all selectors, we just let it be
+  // 'all': []
   animation: [
     "animation-name",
     "animation-duration",
@@ -331,15 +320,11 @@ function atomize(cssText, hasPriority = false) {
 }
 
 // src/processors/styled.ts
-var _classes;
 var AtomicStyledProcessor = class extends import_styled.default {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _classes, void 0);
-  }
+  #classes;
   get classes() {
-    if (__privateGet(this, _classes)) {
-      return __privateGet(this, _classes);
+    if (this.#classes) {
+      return this.#classes;
     }
     throw new Error(
       "Styles are not extracted yet. Please call `extractRules` first."
@@ -352,7 +337,7 @@ var AtomicStyledProcessor = class extends import_styled.default {
     atomicRules.forEach((rule) => {
       rules[rule.cssText] = {
         cssText: rule.cssText,
-        start: (loc == null ? void 0 : loc.start) ?? null,
+        start: loc?.start ?? null,
         className: this.className,
         displayName: this.displayName,
         atom: true
@@ -363,7 +348,7 @@ var AtomicStyledProcessor = class extends import_styled.default {
 ${rule.cssText}`
       );
     });
-    __privateSet(this, _classes, atomicRules.filter((rule) => !!rule.className).map((rule) => rule.className).join(" "));
+    this.#classes = atomicRules.filter((rule) => !!rule.className).map((rule) => rule.className).join(" ");
     return rules;
   }
   getProps() {
@@ -381,7 +366,4 @@ ${rule.cssText}`
     return context.valueSlug;
   }
 };
-_classes = new WeakMap();
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});
 //# sourceMappingURL=styled.js.map

package/dist/processors/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/processors/styled.ts","../../src/processors/helpers/atomize.ts","../../src/processors/helpers/propertyPriority.ts"],"sourcesContent":["import type { SourceLocation } from '@babel/types';\n\nimport { debug } from '@linaria/logger';\nimport type { IProps } from '@linaria/react/processors/styled';\nimport StyledProcessor from '@linaria/react/processors/styled';\nimport type { Rules, ValueCache } from '@linaria/tags';\nimport { hasMeta } from '@linaria/utils';\n\nimport atomize from './helpers/atomize';\n\nexport default class AtomicStyledProcessor extends StyledProcessor {\n  #classes: string | undefined;\n\n  private get classes(): string {\n    if (this.#classes) {\n      return this.#classes;\n    }\n\n    throw new Error(\n      'Styles are not extracted yet. Please call `extractRules` first.'\n    );\n  }\n\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): Rules {\n    const rules: Rules = {};\n\n    const wrappedValue =\n      typeof this.component === 'string'\n        ? null\n        : valueCache.get(this.component.node.name);\n\n    const atomicRules = atomize(cssText, hasMeta(wrappedValue));\n    atomicRules.forEach((rule) => {\n      // eslint-disable-next-line no-param-reassign\n      rules[rule.cssText] = {\n        cssText: rule.cssText,\n        start: loc?.start ?? null,\n        className: this.className,\n        displayName: this.displayName,\n        atom: true,\n      };\n\n      debug(\n        'evaluator:template-processor:extracted-atomic-rule',\n        `\\n${rule.cssText}`\n      );\n    });\n\n    this.#classes = atomicRules\n      // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object\n      .filter((rule) => !!rule.className)\n      .map((rule) => rule.className!)\n      .join(' ');\n\n    return rules;\n  }\n\n  protected override getProps(): IProps {\n    const props = super.getProps();\n    props.class = [this.classes, this.className].filter(Boolean).join(' ');\n    props.atomic = true;\n    return props;\n  }\n\n  protected override getVariableId(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ): string {\n    const id = this.getCustomVariableId(source, unit, precedingCss);\n    if (id) {\n      return id;\n    }\n\n    const context = this.getVariableContext(source, unit, precedingCss);\n    // id is based on the slugified value\n    return context.valueSlug;\n  }\n}\n","import { all as knownProperties } from 'known-css-properties';\nimport type { Document, AtRule, Container, Rule } from 'postcss';\nimport postcss from 'postcss';\nimport stylis from 'stylis';\n\nimport { slugify } from '@linaria/utils';\n\nimport { getPropertyPriority } from './propertyPriority';\n\nconst knownPropertiesMap = knownProperties.reduce(\n  (acc: { [property: string]: number }, property, i) => {\n    acc[property] = i;\n    return acc;\n  },\n  {}\n);\n\nfunction hashProperty(property: string) {\n  const index = knownPropertiesMap[property];\n  // If it's a known property, let's use the index to cut down the length of the hash.\n  // otherwise, slugify\n  if (index !== undefined) {\n    return index.toString(36); // base 36 so that we get a-z,0-9\n  }\n  return slugify(property);\n}\n\nconst parseCss = (cssText: string) => {\n  try {\n    return postcss.parse(cssText);\n  } catch (e) {\n    if (e instanceof Error) {\n      throw new Error(`Error parsing CSS: ${e.message}\\nCSS:\\n${cssText}`);\n    }\n\n    throw new Error(`Unknown error parsing CSS.\\nCSS:\\n${cssText}`);\n  }\n};\n\nexport default function atomize(cssText: string, hasPriority = false) {\n  stylis.set({\n    prefix: false,\n    keyframe: false,\n  });\n  const atomicRules: {\n    className?: string;\n    cssText: string;\n    property: string;\n  }[] = [];\n\n  const stylesheet = parseCss(cssText);\n\n  // We want to extract all keyframes and leave them as-is.\n  // This isn't scoped locally yet\n  stylesheet.walkAtRules('keyframes', (atRule) => {\n    atRule.remove();\n    atomicRules.push({\n      property: atRule.name,\n      cssText: atRule.toString(),\n    });\n  });\n\n  stylesheet.walkDecls((decl) => {\n    let thisParent: Document | Container | undefined = decl.parent;\n    const parents: (Document | Container)[] = [];\n    const atomicProperty = [decl.prop];\n    let hasAtRule = false;\n\n    // Traverse the declarations parents, and collect them all.\n    while (thisParent && thisParent !== stylesheet) {\n      parents.unshift(thisParent);\n      if (thisParent.type === 'atrule') {\n        hasAtRule = true;\n        // @media queries, @supports etc.\n        atomicProperty.push(\n          (thisParent as AtRule).name,\n          (thisParent as AtRule).params\n        );\n      } else if (thisParent.type === 'rule') {\n        // pseudo classes etc.\n        atomicProperty.push((thisParent as Rule).selector);\n      }\n\n      thisParent = thisParent.parent;\n    }\n\n    // Create a new stylesheet that contains *just* the extracted atomic rule and wrapping selectors, eg.\n    // `@media (max-width: 400px) { background: red; }`, or\n    // `&:hover { background: red; }`, or\n    // `background: red;`\n    // We do this so we can run it through stylis, to produce a full atom, eg.\n    // `@media (max-width: 400px) { .atm_foo { background: red; } }`\n    const root = postcss.root();\n    let container: Document | Container = root;\n    parents.forEach((parent) => {\n      const newNode = parent.clone();\n      newNode.removeAll();\n      container.append(newNode);\n      container = newNode;\n    });\n    container.append(decl.clone());\n\n    const css = root.toString();\n    const propertySlug = hashProperty([...atomicProperty].join(';'));\n    const valueSlug = slugify(decl.value);\n    const className = `atm_${propertySlug}_${valueSlug}`;\n\n    const propertyPriority =\n      getPropertyPriority(decl.prop) +\n      (hasAtRule ? 1 : 0) +\n      (hasPriority ? 1 : 0);\n    const processedCss = stylis(`.${className}`.repeat(propertyPriority), css);\n\n    atomicRules.push({\n      property: atomicProperty.join(' '),\n      className,\n      cssText: processedCss,\n    });\n  });\n\n  return atomicRules;\n}\n","const shorthandProperties = {\n  // The `all` property resets everything, and should effectively have priority zero.\n  // In practice, this can be achieved by using: div { all: ... }  to have even less specificity, but to avoid duplicating all selectors, we just let it be\n  // 'all': []\n  animation: [\n    'animation-name',\n    'animation-duration',\n    'animation-timing-function',\n    'animation-delay',\n    'animation-iteration-count',\n    'animation-direction',\n    'animation-fill-mode',\n    'animation-play-state',\n  ],\n  background: [\n    'background-attachment',\n    'background-clip',\n    'background-color',\n    'background-image',\n    'background-origin',\n    'background-position',\n    'background-repeat',\n    'background-size',\n  ],\n  border: ['border-color', 'border-style', 'border-width'],\n  'border-block-end': [\n    'border-block-end-color',\n    'border-block-end-style',\n    'border-block-end-width',\n  ],\n  'border-block-start': [\n    'border-block-start-color',\n    'border-block-start-style',\n    'border-block-start-width',\n  ],\n  'border-bottom': [\n    'border-bottom-color',\n    'border-bottom-style',\n    'border-bottom-width',\n  ],\n  'border-color': [\n    'border-bottom-color',\n    'border-left-color',\n    'border-right-color',\n    'border-top-color',\n  ],\n  'border-image': [\n    'border-image-outset',\n    'border-image-repeat',\n    'border-image-slice',\n    'border-image-source',\n    'border-image-width',\n  ],\n  'border-inline-end': [\n    'border-inline-end-color',\n    'border-inline-end-style',\n    'border-inline-end-width',\n  ],\n  'border-inline-start': [\n    'border-inline-start-color',\n    'border-inline-start-style',\n    'border-inline-start-width',\n  ],\n  'border-left': [\n    'border-left-color',\n    'border-left-style',\n    'border-left-width',\n  ],\n  'border-radius': [\n    'border-top-left-radius',\n    'border-top-right-radius',\n    'border-bottom-right-radius',\n    'border-bottom-left-radius',\n  ],\n  'border-right': [\n    'border-right-color',\n    'border-right-style',\n    'border-right-width',\n  ],\n  'border-style': [\n    'border-bottom-style',\n    'border-left-style',\n    'border-right-style',\n    'border-top-style',\n  ],\n  'border-top': ['border-top-color', 'border-top-style', 'border-top-width'],\n  'border-width': [\n    'border-bottom-width',\n    'border-left-width',\n    'border-right-width',\n    'border-top-width',\n  ],\n  'column-rule': [\n    'column-rule-width',\n    'column-rule-style',\n    'column-rule-color',\n  ],\n  columns: ['column-count', 'column-width'],\n  flex: ['flex-grow', 'flex-shrink', 'flex-basis'],\n  'flex-flow': ['flex-direction', 'flex-wrap'],\n  font: [\n    'font-family',\n    'font-size',\n    'font-stretch',\n    'font-style',\n    'font-variant',\n    'font-weight',\n    'line-height',\n  ],\n  gap: ['row-gap', 'column-gap'],\n  grid: [\n    'grid-auto-columns',\n    'grid-auto-flow',\n    'grid-auto-rows',\n    'grid-template-areas',\n    'grid-template-columns',\n    'grid-template-rows',\n  ],\n  'grid-area': [\n    'grid-row-start',\n    'grid-column-start',\n    'grid-row-end',\n    'grid-column-end',\n  ],\n  'grid-column': ['grid-column-end', 'grid-column-start'],\n  'grid-row': ['grid-row-end', 'grid-row-start'],\n  'grid-template': [\n    'grid-template-areas',\n    'grid-template-columns',\n    'grid-template-rows',\n  ],\n  'list-style': ['list-style-image', 'list-style-position', 'list-style-type'],\n  margin: ['margin-bottom', 'margin-left', 'margin-right', 'margin-top'],\n  mask: [\n    'mask-clip',\n    'mask-composite',\n    'mask-image',\n    'mask-mode',\n    'mask-origin',\n    'mask-position',\n    'mask-repeat',\n    'mask-size',\n  ],\n  offset: [\n    'offset-anchor',\n    'offset-distance',\n    'offset-path',\n    'offset-position',\n    'offset-rotate',\n  ],\n  outline: ['outline-color', 'outline-style', 'outline-width'],\n  overflow: ['overflow-x', 'overflow-y'],\n  padding: ['padding-bottom', 'padding-left', 'padding-right', 'padding-top'],\n  'place-content': ['align-content', 'justify-content'],\n  'place-items': ['align-items', 'justify-items'],\n  'place-self': ['align-self', 'justify-self'],\n  'scroll-margin': [\n    'scroll-margin-bottom',\n    'scroll-margin-left',\n    'scroll-margin-right',\n    'scroll-margin-top',\n  ],\n  'scroll-padding': [\n    'scroll-padding-bottom',\n    'scroll-padding-left',\n    'scroll-padding-right',\n    'scroll-padding-top',\n  ],\n  'text-decoration': [\n    'text-decoration-color',\n    'text-decoration-line',\n    'text-decoration-style',\n    'text-decoration-thickness',\n  ],\n  'text-emphasis': ['text-emphasis-color', 'text-emphasis-style'],\n  transition: [\n    'transition-delay',\n    'transition-duration',\n    'transition-property',\n    'transition-timing-function',\n  ],\n};\n\n// Get the property priority: the higher the priority, the higher the resulting\n// specificity of the atom. For example, if we had:\n//\n// import { css } from '@linaria/atomic';\n// css`\n//   background-color: blue;\n//   background: red;\n// `;\n//\n// we would produce:\n//\n// .atm_a.atm_a { background-color: blue }\n// .atm_b { background: red }\n//\n// and so the more specific selector (.atm_a.atm_a) would win\nexport function getPropertyPriority(property: string) {\n  const longhands = Object.values(shorthandProperties).reduce(\n    (a, b) => [...a, ...b],\n    []\n  );\n\n  return longhands.includes(property) ? 2 : 1;\n}\n"],"mappings":"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","names":["import_utils","knownProperties","postcss","stylis","StyledProcessor"]}
+{"version":3,"sources":["../../src/processors/styled.ts","../../src/processors/helpers/atomize.ts","../../src/processors/helpers/propertyPriority.ts"],"sourcesContent":["import type { SourceLocation } from '@babel/types';\n\nimport { debug } from '@linaria/logger';\nimport type { IProps } from '@linaria/react/processors/styled';\nimport StyledProcessor from '@linaria/react/processors/styled';\nimport type { Rules, ValueCache } from '@linaria/tags';\nimport { hasMeta } from '@linaria/utils';\n\nimport atomize from './helpers/atomize';\n\nexport default class AtomicStyledProcessor extends StyledProcessor {\n  #classes: string | undefined;\n\n  private get classes(): string {\n    if (this.#classes) {\n      return this.#classes;\n    }\n\n    throw new Error(\n      'Styles are not extracted yet. Please call `extractRules` first.'\n    );\n  }\n\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): Rules {\n    const rules: Rules = {};\n\n    const wrappedValue =\n      typeof this.component === 'string'\n        ? null\n        : valueCache.get(this.component.node.name);\n\n    const atomicRules = atomize(cssText, hasMeta(wrappedValue));\n    atomicRules.forEach((rule) => {\n      // eslint-disable-next-line no-param-reassign\n      rules[rule.cssText] = {\n        cssText: rule.cssText,\n        start: loc?.start ?? null,\n        className: this.className,\n        displayName: this.displayName,\n        atom: true,\n      };\n\n      debug(\n        'evaluator:template-processor:extracted-atomic-rule',\n        `\\n${rule.cssText}`\n      );\n    });\n\n    this.#classes = atomicRules\n      // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object\n      .filter((rule) => !!rule.className)\n      .map((rule) => rule.className!)\n      .join(' ');\n\n    return rules;\n  }\n\n  protected override getProps(): IProps {\n    const props = super.getProps();\n    props.class = [this.classes, this.className].filter(Boolean).join(' ');\n    props.atomic = true;\n    return props;\n  }\n\n  protected override getVariableId(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ): string {\n    const id = this.getCustomVariableId(source, unit, precedingCss);\n    if (id) {\n      return id;\n    }\n\n    const context = this.getVariableContext(source, unit, precedingCss);\n    // id is based on the slugified value\n    return context.valueSlug;\n  }\n}\n","import { all as knownProperties } from 'known-css-properties';\nimport type { Document, AtRule, Container, Rule } from 'postcss';\nimport postcss from 'postcss';\nimport stylis from 'stylis';\n\nimport { slugify } from '@linaria/utils';\n\nimport { getPropertyPriority } from './propertyPriority';\n\nconst knownPropertiesMap = knownProperties.reduce(\n  (acc: { [property: string]: number }, property, i) => {\n    acc[property] = i;\n    return acc;\n  },\n  {}\n);\n\nfunction hashProperty(property: string) {\n  const index = knownPropertiesMap[property];\n  // If it's a known property, let's use the index to cut down the length of the hash.\n  // otherwise, slugify\n  if (index !== undefined) {\n    return index.toString(36); // base 36 so that we get a-z,0-9\n  }\n  return slugify(property);\n}\n\nconst parseCss = (cssText: string) => {\n  try {\n    return postcss.parse(cssText);\n  } catch (e) {\n    if (e instanceof Error) {\n      throw new Error(`Error parsing CSS: ${e.message}\\nCSS:\\n${cssText}`);\n    }\n\n    throw new Error(`Unknown error parsing CSS.\\nCSS:\\n${cssText}`);\n  }\n};\n\nexport default function atomize(cssText: string, hasPriority = false) {\n  stylis.set({\n    prefix: false,\n    keyframe: false,\n  });\n  const atomicRules: {\n    className?: string;\n    cssText: string;\n    property: string;\n  }[] = [];\n\n  const stylesheet = parseCss(cssText);\n\n  // We want to extract all keyframes and leave them as-is.\n  // This isn't scoped locally yet\n  stylesheet.walkAtRules('keyframes', (atRule) => {\n    atRule.remove();\n    atomicRules.push({\n      property: atRule.name,\n      cssText: atRule.toString(),\n    });\n  });\n\n  stylesheet.walkDecls((decl) => {\n    let thisParent: Document | Container | undefined = decl.parent;\n    const parents: (Document | Container)[] = [];\n    const atomicProperty = [decl.prop];\n    let hasAtRule = false;\n\n    // Traverse the declarations parents, and collect them all.\n    while (thisParent && thisParent !== stylesheet) {\n      parents.unshift(thisParent);\n      if (thisParent.type === 'atrule') {\n        hasAtRule = true;\n        // @media queries, @supports etc.\n        atomicProperty.push(\n          (thisParent as AtRule).name,\n          (thisParent as AtRule).params\n        );\n      } else if (thisParent.type === 'rule') {\n        // pseudo classes etc.\n        atomicProperty.push((thisParent as Rule).selector);\n      }\n\n      thisParent = thisParent.parent;\n    }\n\n    // Create a new stylesheet that contains *just* the extracted atomic rule and wrapping selectors, eg.\n    // `@media (max-width: 400px) { background: red; }`, or\n    // `&:hover { background: red; }`, or\n    // `background: red;`\n    // We do this so we can run it through stylis, to produce a full atom, eg.\n    // `@media (max-width: 400px) { .atm_foo { background: red; } }`\n    const root = postcss.root();\n    let container: Document | Container = root;\n    parents.forEach((parent) => {\n      const newNode = parent.clone();\n      newNode.removeAll();\n      container.append(newNode);\n      container = newNode;\n    });\n    container.append(decl.clone());\n\n    const css = root.toString();\n    const propertySlug = hashProperty([...atomicProperty].join(';'));\n    const valueSlug = slugify(decl.value);\n    const className = `atm_${propertySlug}_${valueSlug}`;\n\n    const propertyPriority =\n      getPropertyPriority(decl.prop) +\n      (hasAtRule ? 1 : 0) +\n      (hasPriority ? 1 : 0);\n    const processedCss = stylis(`.${className}`.repeat(propertyPriority), css);\n\n    atomicRules.push({\n      property: atomicProperty.join(' '),\n      className,\n      cssText: processedCss,\n    });\n  });\n\n  return atomicRules;\n}\n","const shorthandProperties = {\n  // The `all` property resets everything, and should effectively have priority zero.\n  // In practice, this can be achieved by using: div { all: ... }  to have even less specificity, but to avoid duplicating all selectors, we just let it be\n  // 'all': []\n  animation: [\n    'animation-name',\n    'animation-duration',\n    'animation-timing-function',\n    'animation-delay',\n    'animation-iteration-count',\n    'animation-direction',\n    'animation-fill-mode',\n    'animation-play-state',\n  ],\n  background: [\n    'background-attachment',\n    'background-clip',\n    'background-color',\n    'background-image',\n    'background-origin',\n    'background-position',\n    'background-repeat',\n    'background-size',\n  ],\n  border: ['border-color', 'border-style', 'border-width'],\n  'border-block-end': [\n    'border-block-end-color',\n    'border-block-end-style',\n    'border-block-end-width',\n  ],\n  'border-block-start': [\n    'border-block-start-color',\n    'border-block-start-style',\n    'border-block-start-width',\n  ],\n  'border-bottom': [\n    'border-bottom-color',\n    'border-bottom-style',\n    'border-bottom-width',\n  ],\n  'border-color': [\n    'border-bottom-color',\n    'border-left-color',\n    'border-right-color',\n    'border-top-color',\n  ],\n  'border-image': [\n    'border-image-outset',\n    'border-image-repeat',\n    'border-image-slice',\n    'border-image-source',\n    'border-image-width',\n  ],\n  'border-inline-end': [\n    'border-inline-end-color',\n    'border-inline-end-style',\n    'border-inline-end-width',\n  ],\n  'border-inline-start': [\n    'border-inline-start-color',\n    'border-inline-start-style',\n    'border-inline-start-width',\n  ],\n  'border-left': [\n    'border-left-color',\n    'border-left-style',\n    'border-left-width',\n  ],\n  'border-radius': [\n    'border-top-left-radius',\n    'border-top-right-radius',\n    'border-bottom-right-radius',\n    'border-bottom-left-radius',\n  ],\n  'border-right': [\n    'border-right-color',\n    'border-right-style',\n    'border-right-width',\n  ],\n  'border-style': [\n    'border-bottom-style',\n    'border-left-style',\n    'border-right-style',\n    'border-top-style',\n  ],\n  'border-top': ['border-top-color', 'border-top-style', 'border-top-width'],\n  'border-width': [\n    'border-bottom-width',\n    'border-left-width',\n    'border-right-width',\n    'border-top-width',\n  ],\n  'column-rule': [\n    'column-rule-width',\n    'column-rule-style',\n    'column-rule-color',\n  ],\n  columns: ['column-count', 'column-width'],\n  flex: ['flex-grow', 'flex-shrink', 'flex-basis'],\n  'flex-flow': ['flex-direction', 'flex-wrap'],\n  font: [\n    'font-family',\n    'font-size',\n    'font-stretch',\n    'font-style',\n    'font-variant',\n    'font-weight',\n    'line-height',\n  ],\n  gap: ['row-gap', 'column-gap'],\n  grid: [\n    'grid-auto-columns',\n    'grid-auto-flow',\n    'grid-auto-rows',\n    'grid-template-areas',\n    'grid-template-columns',\n    'grid-template-rows',\n  ],\n  'grid-area': [\n    'grid-row-start',\n    'grid-column-start',\n    'grid-row-end',\n    'grid-column-end',\n  ],\n  'grid-column': ['grid-column-end', 'grid-column-start'],\n  'grid-row': ['grid-row-end', 'grid-row-start'],\n  'grid-template': [\n    'grid-template-areas',\n    'grid-template-columns',\n    'grid-template-rows',\n  ],\n  'list-style': ['list-style-image', 'list-style-position', 'list-style-type'],\n  margin: ['margin-bottom', 'margin-left', 'margin-right', 'margin-top'],\n  mask: [\n    'mask-clip',\n    'mask-composite',\n    'mask-image',\n    'mask-mode',\n    'mask-origin',\n    'mask-position',\n    'mask-repeat',\n    'mask-size',\n  ],\n  offset: [\n    'offset-anchor',\n    'offset-distance',\n    'offset-path',\n    'offset-position',\n    'offset-rotate',\n  ],\n  outline: ['outline-color', 'outline-style', 'outline-width'],\n  overflow: ['overflow-x', 'overflow-y'],\n  padding: ['padding-bottom', 'padding-left', 'padding-right', 'padding-top'],\n  'place-content': ['align-content', 'justify-content'],\n  'place-items': ['align-items', 'justify-items'],\n  'place-self': ['align-self', 'justify-self'],\n  'scroll-margin': [\n    'scroll-margin-bottom',\n    'scroll-margin-left',\n    'scroll-margin-right',\n    'scroll-margin-top',\n  ],\n  'scroll-padding': [\n    'scroll-padding-bottom',\n    'scroll-padding-left',\n    'scroll-padding-right',\n    'scroll-padding-top',\n  ],\n  'text-decoration': [\n    'text-decoration-color',\n    'text-decoration-line',\n    'text-decoration-style',\n    'text-decoration-thickness',\n  ],\n  'text-emphasis': ['text-emphasis-color', 'text-emphasis-style'],\n  transition: [\n    'transition-delay',\n    'transition-duration',\n    'transition-property',\n    'transition-timing-function',\n  ],\n};\n\n// Get the property priority: the higher the priority, the higher the resulting\n// specificity of the atom. For example, if we had:\n//\n// import { css } from '@linaria/atomic';\n// css`\n//   background-color: blue;\n//   background: red;\n// `;\n//\n// we would produce:\n//\n// .atm_a.atm_a { background-color: blue }\n// .atm_b { background: red }\n//\n// and so the more specific selector (.atm_a.atm_a) would win\nexport function getPropertyPriority(property: string) {\n  const longhands = Object.values(shorthandProperties).reduce(\n    (a, b) => [...a, ...b],\n    []\n  );\n\n  return longhands.includes(property) ? 2 : 1;\n}\n"],"mappings":"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","names":["import_utils","knownProperties","postcss","stylis","StyledProcessor"]}

package/dist/processors/styled.mjs

@@ -1,22 +1,3 @@
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateSet = (obj, member, value, setter) => {
-  __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
-  return value;
-};
-
 // src/processors/styled.ts
 import { debug } from "@linaria/logger";
 import StyledProcessor from "@linaria/react/processors/styled";
@@ -30,6 +11,9 @@ import { slugify } from "@linaria/utils";
 
 // src/processors/helpers/propertyPriority.ts
 var shorthandProperties = {
+  // The `all` property resets everything, and should effectively have priority zero.
+  // In practice, this can be achieved by using: div { all: ... }  to have even less specificity, but to avoid duplicating all selectors, we just let it be
+  // 'all': []
   animation: [
     "animation-name",
     "animation-duration",
@@ -302,15 +286,11 @@ function atomize(cssText, hasPriority = false) {
 }
 
 // src/processors/styled.ts
-var _classes;
 var AtomicStyledProcessor = class extends StyledProcessor {
-  constructor() {
-    super(...arguments);
-    __privateAdd(this, _classes, void 0);
-  }
+  #classes;
   get classes() {
-    if (__privateGet(this, _classes)) {
-      return __privateGet(this, _classes);
+    if (this.#classes) {
+      return this.#classes;
     }
     throw new Error(
       "Styles are not extracted yet. Please call `extractRules` first."
@@ -323,7 +303,7 @@ var AtomicStyledProcessor = class extends StyledProcessor {
     atomicRules.forEach((rule) => {
       rules[rule.cssText] = {
         cssText: rule.cssText,
-        start: (loc == null ? void 0 : loc.start) ?? null,
+        start: loc?.start ?? null,
         className: this.className,
         displayName: this.displayName,
         atom: true
@@ -334,7 +314,7 @@ var AtomicStyledProcessor = class extends StyledProcessor {
 ${rule.cssText}`
       );
     });
-    __privateSet(this, _classes, atomicRules.filter((rule) => !!rule.className).map((rule) => rule.className).join(" "));
+    this.#classes = atomicRules.filter((rule) => !!rule.className).map((rule) => rule.className).join(" ");
     return rules;
   }
   getProps() {
@@ -352,7 +332,6 @@ ${rule.cssText}`
     return context.valueSlug;
   }
 };
-_classes = new WeakMap();
 export {
   AtomicStyledProcessor as default
 };

package/dist/processors/styled.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/processors/styled.ts","../../src/processors/helpers/atomize.ts","../../src/processors/helpers/propertyPriority.ts"],"sourcesContent":["import type { SourceLocation } from '@babel/types';\n\nimport { debug } from '@linaria/logger';\nimport type { IProps } from '@linaria/react/processors/styled';\nimport StyledProcessor from '@linaria/react/processors/styled';\nimport type { Rules, ValueCache } from '@linaria/tags';\nimport { hasMeta } from '@linaria/utils';\n\nimport atomize from './helpers/atomize';\n\nexport default class AtomicStyledProcessor extends StyledProcessor {\n  #classes: string | undefined;\n\n  private get classes(): string {\n    if (this.#classes) {\n      return this.#classes;\n    }\n\n    throw new Error(\n      'Styles are not extracted yet. Please call `extractRules` first.'\n    );\n  }\n\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): Rules {\n    const rules: Rules = {};\n\n    const wrappedValue =\n      typeof this.component === 'string'\n        ? null\n        : valueCache.get(this.component.node.name);\n\n    const atomicRules = atomize(cssText, hasMeta(wrappedValue));\n    atomicRules.forEach((rule) => {\n      // eslint-disable-next-line no-param-reassign\n      rules[rule.cssText] = {\n        cssText: rule.cssText,\n        start: loc?.start ?? null,\n        className: this.className,\n        displayName: this.displayName,\n        atom: true,\n      };\n\n      debug(\n        'evaluator:template-processor:extracted-atomic-rule',\n        `\\n${rule.cssText}`\n      );\n    });\n\n    this.#classes = atomicRules\n      // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object\n      .filter((rule) => !!rule.className)\n      .map((rule) => rule.className!)\n      .join(' ');\n\n    return rules;\n  }\n\n  protected override getProps(): IProps {\n    const props = super.getProps();\n    props.class = [this.classes, this.className].filter(Boolean).join(' ');\n    props.atomic = true;\n    return props;\n  }\n\n  protected override getVariableId(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ): string {\n    const id = this.getCustomVariableId(source, unit, precedingCss);\n    if (id) {\n      return id;\n    }\n\n    const context = this.getVariableContext(source, unit, precedingCss);\n    // id is based on the slugified value\n    return context.valueSlug;\n  }\n}\n","import { all as knownProperties } from 'known-css-properties';\nimport type { Document, AtRule, Container, Rule } from 'postcss';\nimport postcss from 'postcss';\nimport stylis from 'stylis';\n\nimport { slugify } from '@linaria/utils';\n\nimport { getPropertyPriority } from './propertyPriority';\n\nconst knownPropertiesMap = knownProperties.reduce(\n  (acc: { [property: string]: number }, property, i) => {\n    acc[property] = i;\n    return acc;\n  },\n  {}\n);\n\nfunction hashProperty(property: string) {\n  const index = knownPropertiesMap[property];\n  // If it's a known property, let's use the index to cut down the length of the hash.\n  // otherwise, slugify\n  if (index !== undefined) {\n    return index.toString(36); // base 36 so that we get a-z,0-9\n  }\n  return slugify(property);\n}\n\nconst parseCss = (cssText: string) => {\n  try {\n    return postcss.parse(cssText);\n  } catch (e) {\n    if (e instanceof Error) {\n      throw new Error(`Error parsing CSS: ${e.message}\\nCSS:\\n${cssText}`);\n    }\n\n    throw new Error(`Unknown error parsing CSS.\\nCSS:\\n${cssText}`);\n  }\n};\n\nexport default function atomize(cssText: string, hasPriority = false) {\n  stylis.set({\n    prefix: false,\n    keyframe: false,\n  });\n  const atomicRules: {\n    className?: string;\n    cssText: string;\n    property: string;\n  }[] = [];\n\n  const stylesheet = parseCss(cssText);\n\n  // We want to extract all keyframes and leave them as-is.\n  // This isn't scoped locally yet\n  stylesheet.walkAtRules('keyframes', (atRule) => {\n    atRule.remove();\n    atomicRules.push({\n      property: atRule.name,\n      cssText: atRule.toString(),\n    });\n  });\n\n  stylesheet.walkDecls((decl) => {\n    let thisParent: Document | Container | undefined = decl.parent;\n    const parents: (Document | Container)[] = [];\n    const atomicProperty = [decl.prop];\n    let hasAtRule = false;\n\n    // Traverse the declarations parents, and collect them all.\n    while (thisParent && thisParent !== stylesheet) {\n      parents.unshift(thisParent);\n      if (thisParent.type === 'atrule') {\n        hasAtRule = true;\n        // @media queries, @supports etc.\n        atomicProperty.push(\n          (thisParent as AtRule).name,\n          (thisParent as AtRule).params\n        );\n      } else if (thisParent.type === 'rule') {\n        // pseudo classes etc.\n        atomicProperty.push((thisParent as Rule).selector);\n      }\n\n      thisParent = thisParent.parent;\n    }\n\n    // Create a new stylesheet that contains *just* the extracted atomic rule and wrapping selectors, eg.\n    // `@media (max-width: 400px) { background: red; }`, or\n    // `&:hover { background: red; }`, or\n    // `background: red;`\n    // We do this so we can run it through stylis, to produce a full atom, eg.\n    // `@media (max-width: 400px) { .atm_foo { background: red; } }`\n    const root = postcss.root();\n    let container: Document | Container = root;\n    parents.forEach((parent) => {\n      const newNode = parent.clone();\n      newNode.removeAll();\n      container.append(newNode);\n      container = newNode;\n    });\n    container.append(decl.clone());\n\n    const css = root.toString();\n    const propertySlug = hashProperty([...atomicProperty].join(';'));\n    const valueSlug = slugify(decl.value);\n    const className = `atm_${propertySlug}_${valueSlug}`;\n\n    const propertyPriority =\n      getPropertyPriority(decl.prop) +\n      (hasAtRule ? 1 : 0) +\n      (hasPriority ? 1 : 0);\n    const processedCss = stylis(`.${className}`.repeat(propertyPriority), css);\n\n    atomicRules.push({\n      property: atomicProperty.join(' '),\n      className,\n      cssText: processedCss,\n    });\n  });\n\n  return atomicRules;\n}\n","const shorthandProperties = {\n  // The `all` property resets everything, and should effectively have priority zero.\n  // In practice, this can be achieved by using: div { all: ... }  to have even less specificity, but to avoid duplicating all selectors, we just let it be\n  // 'all': []\n  animation: [\n    'animation-name',\n    'animation-duration',\n    'animation-timing-function',\n    'animation-delay',\n    'animation-iteration-count',\n    'animation-direction',\n    'animation-fill-mode',\n    'animation-play-state',\n  ],\n  background: [\n    'background-attachment',\n    'background-clip',\n    'background-color',\n    'background-image',\n    'background-origin',\n    'background-position',\n    'background-repeat',\n    'background-size',\n  ],\n  border: ['border-color', 'border-style', 'border-width'],\n  'border-block-end': [\n    'border-block-end-color',\n    'border-block-end-style',\n    'border-block-end-width',\n  ],\n  'border-block-start': [\n    'border-block-start-color',\n    'border-block-start-style',\n    'border-block-start-width',\n  ],\n  'border-bottom': [\n    'border-bottom-color',\n    'border-bottom-style',\n    'border-bottom-width',\n  ],\n  'border-color': [\n    'border-bottom-color',\n    'border-left-color',\n    'border-right-color',\n    'border-top-color',\n  ],\n  'border-image': [\n    'border-image-outset',\n    'border-image-repeat',\n    'border-image-slice',\n    'border-image-source',\n    'border-image-width',\n  ],\n  'border-inline-end': [\n    'border-inline-end-color',\n    'border-inline-end-style',\n    'border-inline-end-width',\n  ],\n  'border-inline-start': [\n    'border-inline-start-color',\n    'border-inline-start-style',\n    'border-inline-start-width',\n  ],\n  'border-left': [\n    'border-left-color',\n    'border-left-style',\n    'border-left-width',\n  ],\n  'border-radius': [\n    'border-top-left-radius',\n    'border-top-right-radius',\n    'border-bottom-right-radius',\n    'border-bottom-left-radius',\n  ],\n  'border-right': [\n    'border-right-color',\n    'border-right-style',\n    'border-right-width',\n  ],\n  'border-style': [\n    'border-bottom-style',\n    'border-left-style',\n    'border-right-style',\n    'border-top-style',\n  ],\n  'border-top': ['border-top-color', 'border-top-style', 'border-top-width'],\n  'border-width': [\n    'border-bottom-width',\n    'border-left-width',\n    'border-right-width',\n    'border-top-width',\n  ],\n  'column-rule': [\n    'column-rule-width',\n    'column-rule-style',\n    'column-rule-color',\n  ],\n  columns: ['column-count', 'column-width'],\n  flex: ['flex-grow', 'flex-shrink', 'flex-basis'],\n  'flex-flow': ['flex-direction', 'flex-wrap'],\n  font: [\n    'font-family',\n    'font-size',\n    'font-stretch',\n    'font-style',\n    'font-variant',\n    'font-weight',\n    'line-height',\n  ],\n  gap: ['row-gap', 'column-gap'],\n  grid: [\n    'grid-auto-columns',\n    'grid-auto-flow',\n    'grid-auto-rows',\n    'grid-template-areas',\n    'grid-template-columns',\n    'grid-template-rows',\n  ],\n  'grid-area': [\n    'grid-row-start',\n    'grid-column-start',\n    'grid-row-end',\n    'grid-column-end',\n  ],\n  'grid-column': ['grid-column-end', 'grid-column-start'],\n  'grid-row': ['grid-row-end', 'grid-row-start'],\n  'grid-template': [\n    'grid-template-areas',\n    'grid-template-columns',\n    'grid-template-rows',\n  ],\n  'list-style': ['list-style-image', 'list-style-position', 'list-style-type'],\n  margin: ['margin-bottom', 'margin-left', 'margin-right', 'margin-top'],\n  mask: [\n    'mask-clip',\n    'mask-composite',\n    'mask-image',\n    'mask-mode',\n    'mask-origin',\n    'mask-position',\n    'mask-repeat',\n    'mask-size',\n  ],\n  offset: [\n    'offset-anchor',\n    'offset-distance',\n    'offset-path',\n    'offset-position',\n    'offset-rotate',\n  ],\n  outline: ['outline-color', 'outline-style', 'outline-width'],\n  overflow: ['overflow-x', 'overflow-y'],\n  padding: ['padding-bottom', 'padding-left', 'padding-right', 'padding-top'],\n  'place-content': ['align-content', 'justify-content'],\n  'place-items': ['align-items', 'justify-items'],\n  'place-self': ['align-self', 'justify-self'],\n  'scroll-margin': [\n    'scroll-margin-bottom',\n    'scroll-margin-left',\n    'scroll-margin-right',\n    'scroll-margin-top',\n  ],\n  'scroll-padding': [\n    'scroll-padding-bottom',\n    'scroll-padding-left',\n    'scroll-padding-right',\n    'scroll-padding-top',\n  ],\n  'text-decoration': [\n    'text-decoration-color',\n    'text-decoration-line',\n    'text-decoration-style',\n    'text-decoration-thickness',\n  ],\n  'text-emphasis': ['text-emphasis-color', 'text-emphasis-style'],\n  transition: [\n    'transition-delay',\n    'transition-duration',\n    'transition-property',\n    'transition-timing-function',\n  ],\n};\n\n// Get the property priority: the higher the priority, the higher the resulting\n// specificity of the atom. For example, if we had:\n//\n// import { css } from '@linaria/atomic';\n// css`\n//   background-color: blue;\n//   background: red;\n// `;\n//\n// we would produce:\n//\n// .atm_a.atm_a { background-color: blue }\n// .atm_b { background: red }\n//\n// and so the more specific selector (.atm_a.atm_a) would win\nexport function getPropertyPriority(property: string) {\n  const longhands = Object.values(shorthandProperties).reduce(\n    (a, b) => [...a, ...b],\n    []\n  );\n\n  return longhands.includes(property) ? 2 : 1;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/processors/styled.ts","../../src/processors/helpers/atomize.ts","../../src/processors/helpers/propertyPriority.ts"],"sourcesContent":["import type { SourceLocation } from '@babel/types';\n\nimport { debug } from '@linaria/logger';\nimport type { IProps } from '@linaria/react/processors/styled';\nimport StyledProcessor from '@linaria/react/processors/styled';\nimport type { Rules, ValueCache } from '@linaria/tags';\nimport { hasMeta } from '@linaria/utils';\n\nimport atomize from './helpers/atomize';\n\nexport default class AtomicStyledProcessor extends StyledProcessor {\n  #classes: string | undefined;\n\n  private get classes(): string {\n    if (this.#classes) {\n      return this.#classes;\n    }\n\n    throw new Error(\n      'Styles are not extracted yet. Please call `extractRules` first.'\n    );\n  }\n\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): Rules {\n    const rules: Rules = {};\n\n    const wrappedValue =\n      typeof this.component === 'string'\n        ? null\n        : valueCache.get(this.component.node.name);\n\n    const atomicRules = atomize(cssText, hasMeta(wrappedValue));\n    atomicRules.forEach((rule) => {\n      // eslint-disable-next-line no-param-reassign\n      rules[rule.cssText] = {\n        cssText: rule.cssText,\n        start: loc?.start ?? null,\n        className: this.className,\n        displayName: this.displayName,\n        atom: true,\n      };\n\n      debug(\n        'evaluator:template-processor:extracted-atomic-rule',\n        `\\n${rule.cssText}`\n      );\n    });\n\n    this.#classes = atomicRules\n      // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object\n      .filter((rule) => !!rule.className)\n      .map((rule) => rule.className!)\n      .join(' ');\n\n    return rules;\n  }\n\n  protected override getProps(): IProps {\n    const props = super.getProps();\n    props.class = [this.classes, this.className].filter(Boolean).join(' ');\n    props.atomic = true;\n    return props;\n  }\n\n  protected override getVariableId(\n    source: string,\n    unit: string,\n    precedingCss: string\n  ): string {\n    const id = this.getCustomVariableId(source, unit, precedingCss);\n    if (id) {\n      return id;\n    }\n\n    const context = this.getVariableContext(source, unit, precedingCss);\n    // id is based on the slugified value\n    return context.valueSlug;\n  }\n}\n","import { all as knownProperties } from 'known-css-properties';\nimport type { Document, AtRule, Container, Rule } from 'postcss';\nimport postcss from 'postcss';\nimport stylis from 'stylis';\n\nimport { slugify } from '@linaria/utils';\n\nimport { getPropertyPriority } from './propertyPriority';\n\nconst knownPropertiesMap = knownProperties.reduce(\n  (acc: { [property: string]: number }, property, i) => {\n    acc[property] = i;\n    return acc;\n  },\n  {}\n);\n\nfunction hashProperty(property: string) {\n  const index = knownPropertiesMap[property];\n  // If it's a known property, let's use the index to cut down the length of the hash.\n  // otherwise, slugify\n  if (index !== undefined) {\n    return index.toString(36); // base 36 so that we get a-z,0-9\n  }\n  return slugify(property);\n}\n\nconst parseCss = (cssText: string) => {\n  try {\n    return postcss.parse(cssText);\n  } catch (e) {\n    if (e instanceof Error) {\n      throw new Error(`Error parsing CSS: ${e.message}\\nCSS:\\n${cssText}`);\n    }\n\n    throw new Error(`Unknown error parsing CSS.\\nCSS:\\n${cssText}`);\n  }\n};\n\nexport default function atomize(cssText: string, hasPriority = false) {\n  stylis.set({\n    prefix: false,\n    keyframe: false,\n  });\n  const atomicRules: {\n    className?: string;\n    cssText: string;\n    property: string;\n  }[] = [];\n\n  const stylesheet = parseCss(cssText);\n\n  // We want to extract all keyframes and leave them as-is.\n  // This isn't scoped locally yet\n  stylesheet.walkAtRules('keyframes', (atRule) => {\n    atRule.remove();\n    atomicRules.push({\n      property: atRule.name,\n      cssText: atRule.toString(),\n    });\n  });\n\n  stylesheet.walkDecls((decl) => {\n    let thisParent: Document | Container | undefined = decl.parent;\n    const parents: (Document | Container)[] = [];\n    const atomicProperty = [decl.prop];\n    let hasAtRule = false;\n\n    // Traverse the declarations parents, and collect them all.\n    while (thisParent && thisParent !== stylesheet) {\n      parents.unshift(thisParent);\n      if (thisParent.type === 'atrule') {\n        hasAtRule = true;\n        // @media queries, @supports etc.\n        atomicProperty.push(\n          (thisParent as AtRule).name,\n          (thisParent as AtRule).params\n        );\n      } else if (thisParent.type === 'rule') {\n        // pseudo classes etc.\n        atomicProperty.push((thisParent as Rule).selector);\n      }\n\n      thisParent = thisParent.parent;\n    }\n\n    // Create a new stylesheet that contains *just* the extracted atomic rule and wrapping selectors, eg.\n    // `@media (max-width: 400px) { background: red; }`, or\n    // `&:hover { background: red; }`, or\n    // `background: red;`\n    // We do this so we can run it through stylis, to produce a full atom, eg.\n    // `@media (max-width: 400px) { .atm_foo { background: red; } }`\n    const root = postcss.root();\n    let container: Document | Container = root;\n    parents.forEach((parent) => {\n      const newNode = parent.clone();\n      newNode.removeAll();\n      container.append(newNode);\n      container = newNode;\n    });\n    container.append(decl.clone());\n\n    const css = root.toString();\n    const propertySlug = hashProperty([...atomicProperty].join(';'));\n    const valueSlug = slugify(decl.value);\n    const className = `atm_${propertySlug}_${valueSlug}`;\n\n    const propertyPriority =\n      getPropertyPriority(decl.prop) +\n      (hasAtRule ? 1 : 0) +\n      (hasPriority ? 1 : 0);\n    const processedCss = stylis(`.${className}`.repeat(propertyPriority), css);\n\n    atomicRules.push({\n      property: atomicProperty.join(' '),\n      className,\n      cssText: processedCss,\n    });\n  });\n\n  return atomicRules;\n}\n","const shorthandProperties = {\n  // The `all` property resets everything, and should effectively have priority zero.\n  // In practice, this can be achieved by using: div { all: ... }  to have even less specificity, but to avoid duplicating all selectors, we just let it be\n  // 'all': []\n  animation: [\n    'animation-name',\n    'animation-duration',\n    'animation-timing-function',\n    'animation-delay',\n    'animation-iteration-count',\n    'animation-direction',\n    'animation-fill-mode',\n    'animation-play-state',\n  ],\n  background: [\n    'background-attachment',\n    'background-clip',\n    'background-color',\n    'background-image',\n    'background-origin',\n    'background-position',\n    'background-repeat',\n    'background-size',\n  ],\n  border: ['border-color', 'border-style', 'border-width'],\n  'border-block-end': [\n    'border-block-end-color',\n    'border-block-end-style',\n    'border-block-end-width',\n  ],\n  'border-block-start': [\n    'border-block-start-color',\n    'border-block-start-style',\n    'border-block-start-width',\n  ],\n  'border-bottom': [\n    'border-bottom-color',\n    'border-bottom-style',\n    'border-bottom-width',\n  ],\n  'border-color': [\n    'border-bottom-color',\n    'border-left-color',\n    'border-right-color',\n    'border-top-color',\n  ],\n  'border-image': [\n    'border-image-outset',\n    'border-image-repeat',\n    'border-image-slice',\n    'border-image-source',\n    'border-image-width',\n  ],\n  'border-inline-end': [\n    'border-inline-end-color',\n    'border-inline-end-style',\n    'border-inline-end-width',\n  ],\n  'border-inline-start': [\n    'border-inline-start-color',\n    'border-inline-start-style',\n    'border-inline-start-width',\n  ],\n  'border-left': [\n    'border-left-color',\n    'border-left-style',\n    'border-left-width',\n  ],\n  'border-radius': [\n    'border-top-left-radius',\n    'border-top-right-radius',\n    'border-bottom-right-radius',\n    'border-bottom-left-radius',\n  ],\n  'border-right': [\n    'border-right-color',\n    'border-right-style',\n    'border-right-width',\n  ],\n  'border-style': [\n    'border-bottom-style',\n    'border-left-style',\n    'border-right-style',\n    'border-top-style',\n  ],\n  'border-top': ['border-top-color', 'border-top-style', 'border-top-width'],\n  'border-width': [\n    'border-bottom-width',\n    'border-left-width',\n    'border-right-width',\n    'border-top-width',\n  ],\n  'column-rule': [\n    'column-rule-width',\n    'column-rule-style',\n    'column-rule-color',\n  ],\n  columns: ['column-count', 'column-width'],\n  flex: ['flex-grow', 'flex-shrink', 'flex-basis'],\n  'flex-flow': ['flex-direction', 'flex-wrap'],\n  font: [\n    'font-family',\n    'font-size',\n    'font-stretch',\n    'font-style',\n    'font-variant',\n    'font-weight',\n    'line-height',\n  ],\n  gap: ['row-gap', 'column-gap'],\n  grid: [\n    'grid-auto-columns',\n    'grid-auto-flow',\n    'grid-auto-rows',\n    'grid-template-areas',\n    'grid-template-columns',\n    'grid-template-rows',\n  ],\n  'grid-area': [\n    'grid-row-start',\n    'grid-column-start',\n    'grid-row-end',\n    'grid-column-end',\n  ],\n  'grid-column': ['grid-column-end', 'grid-column-start'],\n  'grid-row': ['grid-row-end', 'grid-row-start'],\n  'grid-template': [\n    'grid-template-areas',\n    'grid-template-columns',\n    'grid-template-rows',\n  ],\n  'list-style': ['list-style-image', 'list-style-position', 'list-style-type'],\n  margin: ['margin-bottom', 'margin-left', 'margin-right', 'margin-top'],\n  mask: [\n    'mask-clip',\n    'mask-composite',\n    'mask-image',\n    'mask-mode',\n    'mask-origin',\n    'mask-position',\n    'mask-repeat',\n    'mask-size',\n  ],\n  offset: [\n    'offset-anchor',\n    'offset-distance',\n    'offset-path',\n    'offset-position',\n    'offset-rotate',\n  ],\n  outline: ['outline-color', 'outline-style', 'outline-width'],\n  overflow: ['overflow-x', 'overflow-y'],\n  padding: ['padding-bottom', 'padding-left', 'padding-right', 'padding-top'],\n  'place-content': ['align-content', 'justify-content'],\n  'place-items': ['align-items', 'justify-items'],\n  'place-self': ['align-self', 'justify-self'],\n  'scroll-margin': [\n    'scroll-margin-bottom',\n    'scroll-margin-left',\n    'scroll-margin-right',\n    'scroll-margin-top',\n  ],\n  'scroll-padding': [\n    'scroll-padding-bottom',\n    'scroll-padding-left',\n    'scroll-padding-right',\n    'scroll-padding-top',\n  ],\n  'text-decoration': [\n    'text-decoration-color',\n    'text-decoration-line',\n    'text-decoration-style',\n    'text-decoration-thickness',\n  ],\n  'text-emphasis': ['text-emphasis-color', 'text-emphasis-style'],\n  transition: [\n    'transition-delay',\n    'transition-duration',\n    'transition-property',\n    'transition-timing-function',\n  ],\n};\n\n// Get the property priority: the higher the priority, the higher the resulting\n// specificity of the atom. For example, if we had:\n//\n// import { css } from '@linaria/atomic';\n// css`\n//   background-color: blue;\n//   background: red;\n// `;\n//\n// we would produce:\n//\n// .atm_a.atm_a { background-color: blue }\n// .atm_b { background: red }\n//\n// and so the more specific selector (.atm_a.atm_a) would win\nexport function getPropertyPriority(property: string) {\n  const longhands = Object.values(shorthandProperties).reduce(\n    (a, b) => [...a, ...b],\n    []\n  );\n\n  return longhands.includes(property) ? 2 : 1;\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linaria/atomic",
-  "version": "4.5.4",
+  "version": "5.0.1",
   "description": "Blazing fast zero-runtime CSS in JS library",
   "keywords": [
     "css",
@@ -46,14 +46,14 @@
     "postcss": "^8.3.11",
     "stylis": "^3.5.4",
     "ts-invariant": "^0.10.3",
-    "@linaria/core": "^4.5.4",
-    "@linaria/logger": "^4.5.0",
-    "@linaria/react": "^4.5.4",
-    "@linaria/tags": "^4.5.4",
-    "@linaria/utils": "^4.5.3"
+    "@linaria/core": "^5.0.1",
+    "@linaria/logger": "^5.0.0",
+    "@linaria/react": "^5.0.1",
+    "@linaria/tags": "^5.0.1",
+    "@linaria/utils": "^5.0.1"
   },
   "devDependencies": {
-    "@babel/types": "^7.22.5",
+    "@babel/types": "^7.22.15",
     "@types/node": "^17.0.39"
   },
   "peerDependencies": {
@@ -65,7 +65,7 @@
     }
   },
   "engines": {
-    "node": "^12.16.0 || >=13.7.0"
+    "node": ">=16.0.0"
   },
   "publishConfig": {
     "access": "public"

package/types/CSSProperties.d.ts

@@ -1,3 +1,3 @@
-export declare type CSSProperties = {
+export type CSSProperties = {
     [key: string]: string | number | CSSProperties;
 };

package/types/css.d.ts

@@ -1,5 +1,5 @@
 import type { LinariaClassName } from '@linaria/core';
 import type { CSSProperties } from './CSSProperties';
-declare type CSS = (strings: TemplateStringsArray, ...exprs: Array<string | number | CSSProperties>) => LinariaClassName;
+type CSS = (strings: TemplateStringsArray, ...exprs: Array<string | number | CSSProperties>) => LinariaClassName;
 export declare const css: CSS;
 export default css;