@linaria/atomic 3.0.0-beta.18 → 3.0.0-beta.19

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.19](https://github.com/callstack/linaria/compare/v3.0.0-beta.18...v3.0.0-beta.19) (2022-06-03)
+
+
+### Features
+
+* **atomic:** add support for atomic using styled API ([#966](https://github.com/callstack/linaria/issues/966)) ([f59860b](https://github.com/callstack/linaria/commit/f59860b09c5f91b0423dbf188e5f8aaaef38a6b5))
+* **babel:** api for custom tags ([#976](https://github.com/callstack/linaria/issues/976)) ([3285ccc](https://github.com/callstack/linaria/commit/3285ccc1d00449b78b3fc74087528cd38cbdd116))
+* **babel:** new way for detecting tag imports ([#974](https://github.com/callstack/linaria/issues/974)) ([3305cfb](https://github.com/callstack/linaria/commit/3305cfb0c0f65abdacceeb7e6bad118c59f7d551))
+
+
+
+
+
 # [3.0.0-beta.18](https://github.com/callstack/linaria/compare/v3.0.0-beta.17...v3.0.0-beta.18) (2022-04-01)
 
 

package/esm/CSSProperties.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"CSSProperties.js"}
+{"version":3,"file":"CSSProperties.js","names":[],"sources":["../src/CSSProperties.ts"],"sourcesContent":["export type CSSProperties = {\n  [key: string]: string | number | CSSProperties;\n};\n"],"mappings":""}

package/esm/css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/css.ts"],"names":["css","Error"],"mappings":"AAQA,OAAO,MAAMA,GAAQ,GAAG,MAAM;AAC5B,QAAM,IAAIC,KAAJ,CACJ,wGADI,CAAN;AAGD,CAJM;AAMP,eAAeD,GAAf","sourcesContent":["import type { LinariaClassName } from '@linaria/utils';\nimport type { CSSProperties } from './CSSProperties';\n\ntype CSS = (\n  strings: TemplateStringsArray,\n  ...exprs: Array<string | number | CSSProperties>\n) => LinariaClassName;\n\nexport const css: CSS = () => {\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"],"file":"css.js"}
+{"version":3,"file":"css.js","names":["css","Error"],"sources":["../src/css.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\nexport const css: CSS = () => {\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":"AASA,OAAO,MAAMA,GAAQ,GAAG,MAAM;EAC5B,MAAM,IAAIC,KAAJ,CACJ,wGADI,CAAN;AAGD,CAJM;AAMP,eAAeD,GAAf"}

package/esm/index.js

@@ -1,4 +1,4 @@
 export { default as css } from './css';
-export { default as atomize } from './atomize';
-export { cx } from '@linaria/utils';
+export { styled } from '@linaria/react';
+export { cx } from '@linaria/core';
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":["default","css","atomize","cx"],"mappings":"AAAA,SAASA,OAAO,IAAIC,GAApB,QAA+B,OAA/B;AACA,SAASD,OAAO,IAAIE,OAApB,QAAmC,WAAnC;AACA,SAASC,EAAT,QAAmB,gBAAnB","sourcesContent":["export { default as css } from './css';\nexport { default as atomize } from './atomize';\nexport { cx } from '@linaria/utils';\n\nexport type { CSSProperties } from './CSSProperties';\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["default","css","styled","cx"],"sources":["../src/index.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"],"mappings":"AAAA,SAASA,OAAO,IAAIC,GAApB,QAA+B,OAA/B;AACA,SAASC,MAAT,QAAuB,gBAAvB;AACA,SAASC,EAAT,QAAmB,eAAnB"}

package/esm/processors/css.js

@@ -0,0 +1,25 @@
+import CssProcessor from '@linaria/core/processors/css';
+import { debug } from '@linaria/logger';
+import atomize from './helpers/atomize';
+export default class AtomicCssProcessor extends CssProcessor {
+  extractRules(valueCache, cssText, loc) {
+    const rules = {};
+    const atomicRules = atomize(cssText, false);
+    atomicRules.forEach(rule => {
+      // eslint-disable-next-line no-param-reassign
+      rules[rule.cssText] = {
+        cssText: rule.cssText,
+        start: loc?.start ?? null,
+        className: this.className,
+        displayName: this.displayName,
+        atom: true
+      };
+      debug('evaluator:template-processor:extracted-atomic-rule', `\n${rule.cssText}`);
+    });
+    const classes = atomicRules // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object
+    .filter(rule => !!rule.className).map(rule => rule.className).join(' ');
+    return [rules, classes];
+  }
+
+}
+//# sourceMappingURL=css.js.map

package/esm/processors/css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","names":["CssProcessor","debug","atomize","AtomicCssProcessor","extractRules","valueCache","cssText","loc","rules","atomicRules","forEach","rule","start","className","displayName","atom","classes","filter","map","join"],"sources":["../../src/processors/css.ts"],"sourcesContent":["import type { SourceLocation } from '@babel/types';\n\nimport CssProcessor from '@linaria/core/processors/css';\nimport type { Rules, ValueCache } from '@linaria/core/processors/types';\nimport { debug } from '@linaria/logger';\n\nimport atomize from './helpers/atomize';\n\nexport default class AtomicCssProcessor extends CssProcessor {\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): [Rules, string] {\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    const 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, classes];\n  }\n}\n"],"mappings":"AAEA,OAAOA,YAAP,MAAyB,8BAAzB;AAEA,SAASC,KAAT,QAAsB,iBAAtB;AAEA,OAAOC,OAAP,MAAoB,mBAApB;AAEA,eAAe,MAAMC,kBAAN,SAAiCH,YAAjC,CAA8C;EAC3CI,YAAY,CAC1BC,UAD0B,EAE1BC,OAF0B,EAG1BC,GAH0B,EAIT;IACjB,MAAMC,KAAY,GAAG,EAArB;IAEA,MAAMC,WAAW,GAAGP,OAAO,CAACI,OAAD,EAAU,KAAV,CAA3B;IACAG,WAAW,CAACC,OAAZ,CAAqBC,IAAD,IAAU;MAC5B;MACAH,KAAK,CAACG,IAAI,CAACL,OAAN,CAAL,GAAsB;QACpBA,OAAO,EAAEK,IAAI,CAACL,OADM;QAEpBM,KAAK,EAAEL,GAAG,EAAEK,KAAL,IAAc,IAFD;QAGpBC,SAAS,EAAE,KAAKA,SAHI;QAIpBC,WAAW,EAAE,KAAKA,WAJE;QAKpBC,IAAI,EAAE;MALc,CAAtB;MAQAd,KAAK,CACH,oDADG,EAEF,KAAIU,IAAI,CAACL,OAAQ,EAFf,CAAL;IAID,CAdD;IAgBA,MAAMU,OAAO,GAAGP,WAAW,CACzB;IADyB,CAExBQ,MAFa,CAELN,IAAD,IAAU,CAAC,CAACA,IAAI,CAACE,SAFX,EAGbK,GAHa,CAGRP,IAAD,IAAUA,IAAI,CAACE,SAHN,EAIbM,IAJa,CAIR,GAJQ,CAAhB;IAMA,OAAO,CAACX,KAAD,EAAQQ,OAAR,CAAP;EACD;;AAhC0D"}

package/esm/{atomize.js → processors/helpers/atomize.js}

@@ -1,7 +1,7 @@
+import { all as knownProperties } from 'known-css-properties';
 import postcss from 'postcss';
-import { slugify } from '@linaria/utils';
 import stylis from 'stylis';
-import { all as knownProperties } from 'known-css-properties';
+import { slugify } from '@linaria/utils';
 import { getPropertyPriority } from './propertyPriority';
 const knownPropertiesMap = knownProperties.reduce((acc, property, i) => {
   acc[property] = i;
@@ -19,13 +19,25 @@ function hashProperty(property) {
   return slugify(property);
 }
 
-export default function atomize(cssText) {
+const parseCss = cssText => {
+  try {
+    return postcss.parse(cssText);
+  } catch (e) {
+    if (e instanceof Error) {
+      throw new Error(`Error parsing CSS: ${e.message}\nCSS:\n${cssText}`);
+    }
+
+    throw new Error(`Unknown error parsing CSS.\nCSS:\n${cssText}`);
+  }
+};
+
+export default function atomize(cssText, hasPriority = false) {
   stylis.set({
     prefix: false,
     keyframe: false
   });
   const atomicRules = [];
-  const stylesheet = postcss.parse(cssText); // We want to extract all keyframes and leave them as-is.
+  const stylesheet = parseCss(cssText); // We want to extract all keyframes and leave them as-is.
   // This isn't scoped locally yet
 
   stylesheet.walkAtRules('keyframes', atRule => {
@@ -75,7 +87,7 @@ export default function atomize(cssText) {
     const propertySlug = hashProperty([...atomicProperty].join(';'));
     const valueSlug = slugify(decl.value);
     const className = `atm_${propertySlug}_${valueSlug}`;
-    const propertyPriority = getPropertyPriority(decl.prop) + (hasAtRule ? 1 : 0);
+    const propertyPriority = getPropertyPriority(decl.prop) + (hasAtRule ? 1 : 0) + (hasPriority ? 1 : 0);
     const processedCss = stylis(`.${className}`.repeat(propertyPriority), css);
     atomicRules.push({
       property: atomicProperty.join(' '),

package/esm/processors/helpers/atomize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"atomize.js","names":["all","knownProperties","postcss","stylis","slugify","getPropertyPriority","knownPropertiesMap","reduce","acc","property","i","hashProperty","index","undefined","toString","parseCss","cssText","parse","e","Error","message","atomize","hasPriority","set","prefix","keyframe","atomicRules","stylesheet","walkAtRules","atRule","remove","push","name","walkDecls","decl","thisParent","parent","parents","atomicProperty","prop","hasAtRule","unshift","type","params","selector","root","container","forEach","newNode","clone","removeAll","append","css","propertySlug","join","valueSlug","value","className","propertyPriority","processedCss","repeat"],"sources":["../../../src/processors/helpers/atomize.ts"],"sourcesContent":["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"],"mappings":"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"}

package/esm/{propertyPriority.js → processors/helpers/propertyPriority.js}

@@ -62,11 +62,6 @@ const shorthandProperties = {
 
 export function getPropertyPriority(property) {
   const longhands = Object.values(shorthandProperties).reduce((a, b) => [...a, ...b], []);
-
-  if (longhands.includes(property)) {
-    return 2;
-  } else {
-    return 1;
-  }
+  return longhands.includes(property) ? 2 : 1;
 }
 //# sourceMappingURL=propertyPriority.js.map

package/esm/processors/helpers/propertyPriority.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"propertyPriority.js","names":["shorthandProperties","animation","background","border","columns","flex","font","gap","grid","margin","mask","offset","outline","overflow","padding","transition","getPropertyPriority","property","longhands","Object","values","reduce","a","b","includes"],"sources":["../../../src/processors/helpers/propertyPriority.ts"],"sourcesContent":["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":"AAAA,MAAMA,mBAAmB,GAAG;EAC1B;EACA;EACA;EACAC,SAAS,EAAE,CACT,gBADS,EAET,oBAFS,EAGT,2BAHS,EAIT,iBAJS,EAKT,2BALS,EAMT,qBANS,EAOT,qBAPS,EAQT,sBARS,CAJe;EAc1BC,UAAU,EAAE,CACV,uBADU,EAEV,iBAFU,EAGV,kBAHU,EAIV,kBAJU,EAKV,mBALU,EAMV,qBANU,EAOV,mBAPU,EAQV,iBARU,CAdc;EAwB1BC,MAAM,EAAE,CAAC,cAAD,EAAiB,cAAjB,EAAiC,cAAjC,CAxBkB;EAyB1B,oBAAoB,CAClB,wBADkB,EAElB,wBAFkB,EAGlB,wBAHkB,CAzBM;EA8B1B,sBAAsB,CACpB,0BADoB,EAEpB,0BAFoB,EAGpB,0BAHoB,CA9BI;EAmC1B,iBAAiB,CACf,qBADe,EAEf,qBAFe,EAGf,qBAHe,CAnCS;EAwC1B,gBAAgB,CACd,qBADc,EAEd,mBAFc,EAGd,oBAHc,EAId,kBAJc,CAxCU;EA8C1B,gBAAgB,CACd,qBADc,EAEd,qBAFc,EAGd,oBAHc,EAId,qBAJc,EAKd,oBALc,CA9CU;EAqD1B,qBAAqB,CACnB,yBADmB,EAEnB,yBAFmB,EAGnB,yBAHmB,CArDK;EA0D1B,uBAAuB,CACrB,2BADqB,EAErB,2BAFqB,EAGrB,2BAHqB,CA1DG;EA+D1B,eAAe,CACb,mBADa,EAEb,mBAFa,EAGb,mBAHa,CA/DW;EAoE1B,iBAAiB,CACf,wBADe,EAEf,yBAFe,EAGf,4BAHe,EAIf,2BAJe,CApES;EA0E1B,gBAAgB,CACd,oBADc,EAEd,oBAFc,EAGd,oBAHc,CA1EU;EA+E1B,gBAAgB,CACd,qBADc,EAEd,mBAFc,EAGd,oBAHc,EAId,kBAJc,CA/EU;EAqF1B,cAAc,CAAC,kBAAD,EAAqB,kBAArB,EAAyC,kBAAzC,CArFY;EAsF1B,gBAAgB,CACd,qBADc,EAEd,mBAFc,EAGd,oBAHc,EAId,kBAJc,CAtFU;EA4F1B,eAAe,CACb,mBADa,EAEb,mBAFa,EAGb,mBAHa,CA5FW;EAiG1BC,OAAO,EAAE,CAAC,cAAD,EAAiB,cAAjB,CAjGiB;EAkG1BC,IAAI,EAAE,CAAC,WAAD,EAAc,aAAd,EAA6B,YAA7B,CAlGoB;EAmG1B,aAAa,CAAC,gBAAD,EAAmB,WAAnB,CAnGa;EAoG1BC,IAAI,EAAE,CACJ,aADI,EAEJ,WAFI,EAGJ,cAHI,EAIJ,YAJI,EAKJ,cALI,EAMJ,aANI,EAOJ,aAPI,CApGoB;EA6G1BC,GAAG,EAAE,CAAC,SAAD,EAAY,YAAZ,CA7GqB;EA8G1BC,IAAI,EAAE,CACJ,mBADI,EAEJ,gBAFI,EAGJ,gBAHI,EAIJ,qBAJI,EAKJ,uBALI,EAMJ,oBANI,CA9GoB;EAsH1B,aAAa,CACX,gBADW,EAEX,mBAFW,EAGX,cAHW,EAIX,iBAJW,CAtHa;EA4H1B,eAAe,CAAC,iBAAD,EAAoB,mBAApB,CA5HW;EA6H1B,YAAY,CAAC,cAAD,EAAiB,gBAAjB,CA7Hc;EA8H1B,iBAAiB,CACf,qBADe,EAEf,uBAFe,EAGf,oBAHe,CA9HS;EAmI1B,cAAc,CAAC,kBAAD,EAAqB,qBAArB,EAA4C,iBAA5C,CAnIY;EAoI1BC,MAAM,EAAE,CAAC,eAAD,EAAkB,aAAlB,EAAiC,cAAjC,EAAiD,YAAjD,CApIkB;EAqI1BC,IAAI,EAAE,CACJ,WADI,EAEJ,gBAFI,EAGJ,YAHI,EAIJ,WAJI,EAKJ,aALI,EAMJ,eANI,EAOJ,aAPI,EAQJ,WARI,CArIoB;EA+I1BC,MAAM,EAAE,CACN,eADM,EAEN,iBAFM,EAGN,aAHM,EAIN,iBAJM,EAKN,eALM,CA/IkB;EAsJ1BC,OAAO,EAAE,CAAC,eAAD,EAAkB,eAAlB,EAAmC,eAAnC,CAtJiB;EAuJ1BC,QAAQ,EAAE,CAAC,YAAD,EAAe,YAAf,CAvJgB;EAwJ1BC,OAAO,EAAE,CAAC,gBAAD,EAAmB,cAAnB,EAAmC,eAAnC,EAAoD,aAApD,CAxJiB;EAyJ1B,iBAAiB,CAAC,eAAD,EAAkB,iBAAlB,CAzJS;EA0J1B,eAAe,CAAC,aAAD,EAAgB,eAAhB,CA1JW;EA2J1B,cAAc,CAAC,YAAD,EAAe,cAAf,CA3JY;EA4J1B,iBAAiB,CACf,sBADe,EAEf,oBAFe,EAGf,qBAHe,EAIf,mBAJe,CA5JS;EAkK1B,kBAAkB,CAChB,uBADgB,EAEhB,qBAFgB,EAGhB,sBAHgB,EAIhB,oBAJgB,CAlKQ;EAwK1B,mBAAmB,CACjB,uBADiB,EAEjB,sBAFiB,EAGjB,uBAHiB,EAIjB,2BAJiB,CAxKO;EA8K1B,iBAAiB,CAAC,qBAAD,EAAwB,qBAAxB,CA9KS;EA+K1BC,UAAU,EAAE,CACV,kBADU,EAEV,qBAFU,EAGV,qBAHU,EAIV,4BAJU;AA/Kc,CAA5B,C,CAuLA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,OAAO,SAASC,mBAAT,CAA6BC,QAA7B,EAA+C;EACpD,MAAMC,SAAS,GAAGC,MAAM,CAACC,MAAP,CAAcpB,mBAAd,EAAmCqB,MAAnC,CAChB,CAACC,CAAD,EAAIC,CAAJ,KAAU,CAAC,GAAGD,CAAJ,EAAO,GAAGC,CAAV,CADM,EAEhB,EAFgB,CAAlB;EAKA,OAAOL,SAAS,CAACM,QAAV,CAAmBP,QAAnB,IAA+B,CAA/B,GAAmC,CAA1C;AACD"}

package/esm/processors/styled.js

@@ -0,0 +1,40 @@
+import { debug } from '@linaria/logger';
+import StyledProcessor, { hasMeta } from '@linaria/react/processors/styled';
+import { slugify } from '@linaria/utils';
+import atomize from './helpers/atomize';
+export default class AtomicStyledProcessor extends StyledProcessor {
+  extractRules(valueCache, cssText, loc) {
+    const rules = {};
+    const wrappedValue = typeof this.component === 'string' ? null : valueCache.get(this.component.node);
+    const atomicRules = atomize(cssText, hasMeta(wrappedValue));
+    atomicRules.forEach(rule => {
+      // eslint-disable-next-line no-param-reassign
+      rules[rule.cssText] = {
+        cssText: rule.cssText,
+        start: loc?.start ?? null,
+        className: this.className,
+        displayName: this.displayName,
+        atom: true
+      };
+      debug('evaluator:template-processor:extracted-atomic-rule', `\n${rule.cssText}`);
+    });
+    const classes = atomicRules // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object
+    .filter(rule => !!rule.className).map(rule => rule.className).join(' ');
+    return [rules, classes];
+  }
+
+  getProps(classes, uniqInterpolations) {
+    const props = super.getProps(classes, uniqInterpolations);
+    props.class = [classes, this.className].filter(Boolean).join(' ');
+    props.atomic = true;
+    return props;
+  } // eslint-disable-next-line class-methods-use-this
+
+
+  getVariableId(value) {
+    // id is based on the slugified value
+    return slugify(value);
+  }
+
+}
+//# sourceMappingURL=styled.js.map

package/esm/processors/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","names":["debug","StyledProcessor","hasMeta","slugify","atomize","AtomicStyledProcessor","extractRules","valueCache","cssText","loc","rules","wrappedValue","component","get","node","atomicRules","forEach","rule","start","className","displayName","atom","classes","filter","map","join","getProps","uniqInterpolations","props","class","Boolean","atomic","getVariableId","value"],"sources":["../../src/processors/styled.ts"],"sourcesContent":["import type { SourceLocation } from '@babel/types';\n\nimport type {\n  IInterpolation,\n  Rules,\n  ValueCache,\n} from '@linaria/core/processors/types';\nimport { debug } from '@linaria/logger';\nimport type { IProps } from '@linaria/react/processors/styled';\nimport StyledProcessor, { hasMeta } from '@linaria/react/processors/styled';\nimport { slugify } from '@linaria/utils';\n\nimport atomize from './helpers/atomize';\n\nexport default class AtomicStyledProcessor extends StyledProcessor {\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): [Rules, string] {\n    const rules: Rules = {};\n\n    const wrappedValue =\n      typeof this.component === 'string'\n        ? null\n        : valueCache.get(this.component.node);\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    const 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, classes];\n  }\n\n  protected override getProps(\n    classes: string,\n    uniqInterpolations: IInterpolation[]\n  ): IProps {\n    const props = super.getProps(classes, uniqInterpolations);\n    props.class = [classes, this.className].filter(Boolean).join(' ');\n    props.atomic = true;\n    return props;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  protected override getVariableId(value: string): string {\n    // id is based on the slugified value\n    return slugify(value);\n  }\n}\n"],"mappings":"AAOA,SAASA,KAAT,QAAsB,iBAAtB;AAEA,OAAOC,eAAP,IAA0BC,OAA1B,QAAyC,kCAAzC;AACA,SAASC,OAAT,QAAwB,gBAAxB;AAEA,OAAOC,OAAP,MAAoB,mBAApB;AAEA,eAAe,MAAMC,qBAAN,SAAoCJ,eAApC,CAAoD;EACjDK,YAAY,CAC1BC,UAD0B,EAE1BC,OAF0B,EAG1BC,GAH0B,EAIT;IACjB,MAAMC,KAAY,GAAG,EAArB;IAEA,MAAMC,YAAY,GAChB,OAAO,KAAKC,SAAZ,KAA0B,QAA1B,GACI,IADJ,GAEIL,UAAU,CAACM,GAAX,CAAe,KAAKD,SAAL,CAAeE,IAA9B,CAHN;IAKA,MAAMC,WAAW,GAAGX,OAAO,CAACI,OAAD,EAAUN,OAAO,CAACS,YAAD,CAAjB,CAA3B;IACAI,WAAW,CAACC,OAAZ,CAAqBC,IAAD,IAAU;MAC5B;MACAP,KAAK,CAACO,IAAI,CAACT,OAAN,CAAL,GAAsB;QACpBA,OAAO,EAAES,IAAI,CAACT,OADM;QAEpBU,KAAK,EAAET,GAAG,EAAES,KAAL,IAAc,IAFD;QAGpBC,SAAS,EAAE,KAAKA,SAHI;QAIpBC,WAAW,EAAE,KAAKA,WAJE;QAKpBC,IAAI,EAAE;MALc,CAAtB;MAQArB,KAAK,CACH,oDADG,EAEF,KAAIiB,IAAI,CAACT,OAAQ,EAFf,CAAL;IAID,CAdD;IAgBA,MAAMc,OAAO,GAAGP,WAAW,CACzB;IADyB,CAExBQ,MAFa,CAELN,IAAD,IAAU,CAAC,CAACA,IAAI,CAACE,SAFX,EAGbK,GAHa,CAGRP,IAAD,IAAUA,IAAI,CAACE,SAHN,EAIbM,IAJa,CAIR,GAJQ,CAAhB;IAMA,OAAO,CAACf,KAAD,EAAQY,OAAR,CAAP;EACD;;EAEkBI,QAAQ,CACzBJ,OADyB,EAEzBK,kBAFyB,EAGjB;IACR,MAAMC,KAAK,GAAG,MAAMF,QAAN,CAAeJ,OAAf,EAAwBK,kBAAxB,CAAd;IACAC,KAAK,CAACC,KAAN,GAAc,CAACP,OAAD,EAAU,KAAKH,SAAf,EAA0BI,MAA1B,CAAiCO,OAAjC,EAA0CL,IAA1C,CAA+C,GAA/C,CAAd;IACAG,KAAK,CAACG,MAAN,GAAe,IAAf;IACA,OAAOH,KAAP;EACD,CA/CgE,CAiDjE;;;EACmBI,aAAa,CAACC,KAAD,EAAwB;IACtD;IACA,OAAO9B,OAAO,CAAC8B,KAAD,CAAd;EACD;;AArDgE"}

package/lib/CSSProperties.js.map

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"CSSProperties.js"}
+{"version":3,"file":"CSSProperties.js","names":[],"sources":["../src/CSSProperties.ts"],"sourcesContent":["export type CSSProperties = {\n  [key: string]: string | number | CSSProperties;\n};\n"],"mappings":""}

package/lib/css.js

@@ -1,8 +1,6 @@
 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
+exports.__esModule = true;
 exports.default = exports.css = void 0;
 
 const css = () => {

package/lib/css.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/css.ts"],"names":["css","Error"],"mappings":";;;;;;;AAQO,MAAMA,GAAQ,GAAG,MAAM;AAC5B,QAAM,IAAIC,KAAJ,CACJ,wGADI,CAAN;AAGD,CAJM;;;eAMQD,G","sourcesContent":["import type { LinariaClassName } from '@linaria/utils';\nimport type { CSSProperties } from './CSSProperties';\n\ntype CSS = (\n  strings: TemplateStringsArray,\n  ...exprs: Array<string | number | CSSProperties>\n) => LinariaClassName;\n\nexport const css: CSS = () => {\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"],"file":"css.js"}
+{"version":3,"file":"css.js","names":["css","Error"],"sources":["../src/css.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\nexport const css: CSS = () => {\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":";;;;;AASO,MAAMA,GAAQ,GAAG,MAAM;EAC5B,MAAM,IAAIC,KAAJ,CACJ,wGADI,CAAN;AAGD,CAJM;;;eAMQD,G"}

package/lib/index.js

@@ -1,32 +1,19 @@
 "use strict";
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "css", {
-  enumerable: true,
-  get: function () {
-    return _css.default;
-  }
-});
-Object.defineProperty(exports, "atomize", {
-  enumerable: true,
-  get: function () {
-    return _atomize.default;
-  }
-});
-Object.defineProperty(exports, "cx", {
-  enumerable: true,
-  get: function () {
-    return _utils.cx;
-  }
-});
+exports.__esModule = true;
+exports.styled = exports.cx = exports.css = void 0;
 
 var _css = _interopRequireDefault(require("./css"));
 
-var _atomize = _interopRequireDefault(require("./atomize"));
+exports.css = _css.default;
 
-var _utils = require("@linaria/utils");
+var _react = require("@linaria/react");
+
+exports.styled = _react.styled;
+
+var _core = require("@linaria/core");
+
+exports.cx = _core.cx;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA","sourcesContent":["export { default as css } from './css';\nexport { default as atomize } from './atomize';\nexport { cx } from '@linaria/utils';\n\nexport type { CSSProperties } from './CSSProperties';\n"],"file":"index.js"}
+{"version":3,"file":"index.js","names":[],"sources":["../src/index.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"],"mappings":";;;;;AAAA;;;;AACA;;;;AACA"}

package/lib/processors/css.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _css = _interopRequireDefault(require("@linaria/core/processors/css"));
+
+var _logger = require("@linaria/logger");
+
+var _atomize = _interopRequireDefault(require("./helpers/atomize"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class AtomicCssProcessor extends _css.default {
+  extractRules(valueCache, cssText, loc) {
+    const rules = {};
+    const atomicRules = (0, _atomize.default)(cssText, false);
+    atomicRules.forEach(rule => {
+      var _loc$start;
+
+      // eslint-disable-next-line no-param-reassign
+      rules[rule.cssText] = {
+        cssText: rule.cssText,
+        start: (_loc$start = loc === null || loc === void 0 ? void 0 : loc.start) !== null && _loc$start !== void 0 ? _loc$start : null,
+        className: this.className,
+        displayName: this.displayName,
+        atom: true
+      };
+      (0, _logger.debug)('evaluator:template-processor:extracted-atomic-rule', `\n${rule.cssText}`);
+    });
+    const classes = atomicRules // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object
+    .filter(rule => !!rule.className).map(rule => rule.className).join(' ');
+    return [rules, classes];
+  }
+
+}
+
+exports.default = AtomicCssProcessor;
+//# sourceMappingURL=css.js.map

package/lib/processors/css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"css.js","names":["AtomicCssProcessor","CssProcessor","extractRules","valueCache","cssText","loc","rules","atomicRules","atomize","forEach","rule","start","className","displayName","atom","debug","classes","filter","map","join"],"sources":["../../src/processors/css.ts"],"sourcesContent":["import type { SourceLocation } from '@babel/types';\n\nimport CssProcessor from '@linaria/core/processors/css';\nimport type { Rules, ValueCache } from '@linaria/core/processors/types';\nimport { debug } from '@linaria/logger';\n\nimport atomize from './helpers/atomize';\n\nexport default class AtomicCssProcessor extends CssProcessor {\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): [Rules, string] {\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    const 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, classes];\n  }\n}\n"],"mappings":";;;;;;;AAEA;;AAEA;;AAEA;;;;AAEe,MAAMA,kBAAN,SAAiCC,YAAjC,CAA8C;EAC3CC,YAAY,CAC1BC,UAD0B,EAE1BC,OAF0B,EAG1BC,GAH0B,EAIT;IACjB,MAAMC,KAAY,GAAG,EAArB;IAEA,MAAMC,WAAW,GAAG,IAAAC,gBAAA,EAAQJ,OAAR,EAAiB,KAAjB,CAApB;IACAG,WAAW,CAACE,OAAZ,CAAqBC,IAAD,IAAU;MAAA;;MAC5B;MACAJ,KAAK,CAACI,IAAI,CAACN,OAAN,CAAL,GAAsB;QACpBA,OAAO,EAAEM,IAAI,CAACN,OADM;QAEpBO,KAAK,gBAAEN,GAAF,aAAEA,GAAF,uBAAEA,GAAG,CAAEM,KAAP,mDAAgB,IAFD;QAGpBC,SAAS,EAAE,KAAKA,SAHI;QAIpBC,WAAW,EAAE,KAAKA,WAJE;QAKpBC,IAAI,EAAE;MALc,CAAtB;MAQA,IAAAC,aAAA,EACE,oDADF,EAEG,KAAIL,IAAI,CAACN,OAAQ,EAFpB;IAID,CAdD;IAgBA,MAAMY,OAAO,GAAGT,WAAW,CACzB;IADyB,CAExBU,MAFa,CAELP,IAAD,IAAU,CAAC,CAACA,IAAI,CAACE,SAFX,EAGbM,GAHa,CAGRR,IAAD,IAAUA,IAAI,CAACE,SAHN,EAIbO,IAJa,CAIR,GAJQ,CAAhB;IAMA,OAAO,CAACb,KAAD,EAAQU,OAAR,CAAP;EACD;;AAhC0D"}

package/lib/{atomize.js → processors/helpers/atomize.js}

@@ -5,13 +5,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = atomize;
 
-var _postcss = _interopRequireDefault(require("postcss"));
+var _knownCssProperties = require("known-css-properties");
 
-var _utils = require("@linaria/utils");
+var _postcss = _interopRequireDefault(require("postcss"));
 
 var _stylis = _interopRequireDefault(require("stylis"));
 
-var _knownCssProperties = require("known-css-properties");
+var _utils = require("@linaria/utils");
 
 var _propertyPriority = require("./propertyPriority");
 
@@ -33,18 +33,28 @@ function hashProperty(property) {
   return (0, _utils.slugify)(property);
 }
 
-function atomize(cssText) {
+const parseCss = cssText => {
+  try {
+    return _postcss.default.parse(cssText);
+  } catch (e) {
+    if (e instanceof Error) {
+      throw new Error(`Error parsing CSS: ${e.message}\nCSS:\n${cssText}`);
+    }
+
+    throw new Error(`Unknown error parsing CSS.\nCSS:\n${cssText}`);
+  }
+};
+
+function atomize(cssText, hasPriority = false) {
   _stylis.default.set({
     prefix: false,
     keyframe: false
   });
 
   const atomicRules = [];
-
-  const stylesheet = _postcss.default.parse(cssText); // We want to extract all keyframes and leave them as-is.
+  const stylesheet = parseCss(cssText); // We want to extract all keyframes and leave them as-is.
   // This isn't scoped locally yet
 
-
   stylesheet.walkAtRules('keyframes', atRule => {
     atRule.remove();
     atomicRules.push({
@@ -93,7 +103,7 @@ function atomize(cssText) {
     const propertySlug = hashProperty([...atomicProperty].join(';'));
     const valueSlug = (0, _utils.slugify)(decl.value);
     const className = `atm_${propertySlug}_${valueSlug}`;
-    const propertyPriority = (0, _propertyPriority.getPropertyPriority)(decl.prop) + (hasAtRule ? 1 : 0);
+    const propertyPriority = (0, _propertyPriority.getPropertyPriority)(decl.prop) + (hasAtRule ? 1 : 0) + (hasPriority ? 1 : 0);
     const processedCss = (0, _stylis.default)(`.${className}`.repeat(propertyPriority), css);
     atomicRules.push({
       property: atomicProperty.join(' '),

package/lib/processors/helpers/atomize.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"atomize.js","names":["knownPropertiesMap","knownProperties","reduce","acc","property","i","hashProperty","index","undefined","toString","slugify","parseCss","cssText","postcss","parse","e","Error","message","atomize","hasPriority","stylis","set","prefix","keyframe","atomicRules","stylesheet","walkAtRules","atRule","remove","push","name","walkDecls","decl","thisParent","parent","parents","atomicProperty","prop","hasAtRule","unshift","type","params","selector","root","container","forEach","newNode","clone","removeAll","append","css","propertySlug","join","valueSlug","value","className","propertyPriority","getPropertyPriority","processedCss","repeat"],"sources":["../../../src/processors/helpers/atomize.ts"],"sourcesContent":["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"],"mappings":"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"}

package/lib/{propertyPriority.js → processors/helpers/propertyPriority.js}

@@ -68,11 +68,6 @@ const shorthandProperties = {
 
 function getPropertyPriority(property) {
   const longhands = Object.values(shorthandProperties).reduce((a, b) => [...a, ...b], []);
-
-  if (longhands.includes(property)) {
-    return 2;
-  } else {
-    return 1;
-  }
+  return longhands.includes(property) ? 2 : 1;
 }
 //# sourceMappingURL=propertyPriority.js.map

package/lib/processors/helpers/propertyPriority.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"propertyPriority.js","names":["shorthandProperties","animation","background","border","columns","flex","font","gap","grid","margin","mask","offset","outline","overflow","padding","transition","getPropertyPriority","property","longhands","Object","values","reduce","a","b","includes"],"sources":["../../../src/processors/helpers/propertyPriority.ts"],"sourcesContent":["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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"}

package/lib/processors/styled.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _logger = require("@linaria/logger");
+
+var _styled = _interopRequireWildcard(require("@linaria/react/processors/styled"));
+
+var _utils = require("@linaria/utils");
+
+var _atomize = _interopRequireDefault(require("./helpers/atomize"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+class AtomicStyledProcessor extends _styled.default {
+  extractRules(valueCache, cssText, loc) {
+    const rules = {};
+    const wrappedValue = typeof this.component === 'string' ? null : valueCache.get(this.component.node);
+    const atomicRules = (0, _atomize.default)(cssText, (0, _styled.hasMeta)(wrappedValue));
+    atomicRules.forEach(rule => {
+      var _loc$start;
+
+      // eslint-disable-next-line no-param-reassign
+      rules[rule.cssText] = {
+        cssText: rule.cssText,
+        start: (_loc$start = loc === null || loc === void 0 ? void 0 : loc.start) !== null && _loc$start !== void 0 ? _loc$start : null,
+        className: this.className,
+        displayName: this.displayName,
+        atom: true
+      };
+      (0, _logger.debug)('evaluator:template-processor:extracted-atomic-rule', `\n${rule.cssText}`);
+    });
+    const classes = atomicRules // Some atomic rules produced (eg. keyframes) don't have class names, and they also don't need to appear in the object
+    .filter(rule => !!rule.className).map(rule => rule.className).join(' ');
+    return [rules, classes];
+  }
+
+  getProps(classes, uniqInterpolations) {
+    const props = super.getProps(classes, uniqInterpolations);
+    props.class = [classes, this.className].filter(Boolean).join(' ');
+    props.atomic = true;
+    return props;
+  } // eslint-disable-next-line class-methods-use-this
+
+
+  getVariableId(value) {
+    // id is based on the slugified value
+    return (0, _utils.slugify)(value);
+  }
+
+}
+
+exports.default = AtomicStyledProcessor;
+//# sourceMappingURL=styled.js.map

package/lib/processors/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styled.js","names":["AtomicStyledProcessor","StyledProcessor","extractRules","valueCache","cssText","loc","rules","wrappedValue","component","get","node","atomicRules","atomize","hasMeta","forEach","rule","start","className","displayName","atom","debug","classes","filter","map","join","getProps","uniqInterpolations","props","class","Boolean","atomic","getVariableId","value","slugify"],"sources":["../../src/processors/styled.ts"],"sourcesContent":["import type { SourceLocation } from '@babel/types';\n\nimport type {\n  IInterpolation,\n  Rules,\n  ValueCache,\n} from '@linaria/core/processors/types';\nimport { debug } from '@linaria/logger';\nimport type { IProps } from '@linaria/react/processors/styled';\nimport StyledProcessor, { hasMeta } from '@linaria/react/processors/styled';\nimport { slugify } from '@linaria/utils';\n\nimport atomize from './helpers/atomize';\n\nexport default class AtomicStyledProcessor extends StyledProcessor {\n  public override extractRules(\n    valueCache: ValueCache,\n    cssText: string,\n    loc?: SourceLocation | null\n  ): [Rules, string] {\n    const rules: Rules = {};\n\n    const wrappedValue =\n      typeof this.component === 'string'\n        ? null\n        : valueCache.get(this.component.node);\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    const 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, classes];\n  }\n\n  protected override getProps(\n    classes: string,\n    uniqInterpolations: IInterpolation[]\n  ): IProps {\n    const props = super.getProps(classes, uniqInterpolations);\n    props.class = [classes, this.className].filter(Boolean).join(' ');\n    props.atomic = true;\n    return props;\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  protected override getVariableId(value: string): string {\n    // id is based on the slugified value\n    return slugify(value);\n  }\n}\n"],"mappings":";;;;;;;AAOA;;AAEA;;AACA;;AAEA;;;;;;;;AAEe,MAAMA,qBAAN,SAAoCC,eAApC,CAAoD;EACjDC,YAAY,CAC1BC,UAD0B,EAE1BC,OAF0B,EAG1BC,GAH0B,EAIT;IACjB,MAAMC,KAAY,GAAG,EAArB;IAEA,MAAMC,YAAY,GAChB,OAAO,KAAKC,SAAZ,KAA0B,QAA1B,GACI,IADJ,GAEIL,UAAU,CAACM,GAAX,CAAe,KAAKD,SAAL,CAAeE,IAA9B,CAHN;IAKA,MAAMC,WAAW,GAAG,IAAAC,gBAAA,EAAQR,OAAR,EAAiB,IAAAS,eAAA,EAAQN,YAAR,CAAjB,CAApB;IACAI,WAAW,CAACG,OAAZ,CAAqBC,IAAD,IAAU;MAAA;;MAC5B;MACAT,KAAK,CAACS,IAAI,CAACX,OAAN,CAAL,GAAsB;QACpBA,OAAO,EAAEW,IAAI,CAACX,OADM;QAEpBY,KAAK,gBAAEX,GAAF,aAAEA,GAAF,uBAAEA,GAAG,CAAEW,KAAP,mDAAgB,IAFD;QAGpBC,SAAS,EAAE,KAAKA,SAHI;QAIpBC,WAAW,EAAE,KAAKA,WAJE;QAKpBC,IAAI,EAAE;MALc,CAAtB;MAQA,IAAAC,aAAA,EACE,oDADF,EAEG,KAAIL,IAAI,CAACX,OAAQ,EAFpB;IAID,CAdD;IAgBA,MAAMiB,OAAO,GAAGV,WAAW,CACzB;IADyB,CAExBW,MAFa,CAELP,IAAD,IAAU,CAAC,CAACA,IAAI,CAACE,SAFX,EAGbM,GAHa,CAGRR,IAAD,IAAUA,IAAI,CAACE,SAHN,EAIbO,IAJa,CAIR,GAJQ,CAAhB;IAMA,OAAO,CAAClB,KAAD,EAAQe,OAAR,CAAP;EACD;;EAEkBI,QAAQ,CACzBJ,OADyB,EAEzBK,kBAFyB,EAGjB;IACR,MAAMC,KAAK,GAAG,MAAMF,QAAN,CAAeJ,OAAf,EAAwBK,kBAAxB,CAAd;IACAC,KAAK,CAACC,KAAN,GAAc,CAACP,OAAD,EAAU,KAAKJ,SAAf,EAA0BK,MAA1B,CAAiCO,OAAjC,EAA0CL,IAA1C,CAA+C,GAA/C,CAAd;IACAG,KAAK,CAACG,MAAN,GAAe,IAAf;IACA,OAAOH,KAAP;EACD,CA/CgE,CAiDjE;;;EACmBI,aAAa,CAACC,KAAD,EAAwB;IACtD;IACA,OAAO,IAAAC,cAAA,EAAQD,KAAR,CAAP;EACD;;AArDgE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@linaria/atomic",
-  "version": "3.0.0-beta.18",
+  "version": "3.0.0-beta.19",
   "publishConfig": {
     "access": "public"
   },
@@ -14,8 +14,17 @@
     "lib/",
     "esm/"
   ],
+  "linaria": {
+    "tags": {
+      "css": "./lib/processors/css.js",
+      "styled": "./lib/processors/styled.js"
+    }
+  },
   "license": "MIT",
   "repository": "git@github.com:callstack/linaria.git",
+  "engines": {
+    "node": "^12.16.0 || >=13.7.0"
+  },
   "bugs": {
     "url": "https://github.com/callstack/linaria/issues"
   },
@@ -37,10 +46,14 @@
     "watch": "yarn build --watch"
   },
   "dependencies": {
-    "@linaria/utils": "^3.0.0-beta.18",
+    "@linaria/core": "^3.0.0-beta.19",
+    "@linaria/logger": "^3.0.0-beta.19",
+    "@linaria/react": "^3.0.0-beta.19",
+    "@linaria/utils": "^3.0.0-beta.19",
     "known-css-properties": "^0.24.0",
     "postcss": "^8.3.11",
-    "stylis": "^3.5.4"
+    "stylis": "^3.5.4",
+    "ts-invariant": "^0.10.3"
   },
-  "gitHead": "c3f093a3a7fb4e7c82d23e44adb19a94438da68c"
+  "gitHead": "73aab0a3908325333e452b9cbd5e438a0f1de463"
 }

package/types/css.d.ts

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

package/types/index.d.ts

@@ -1,4 +1,4 @@
 export { default as css } from './css';
-export { default as atomize } from './atomize';
-export { cx } from '@linaria/utils';
+export { styled } from '@linaria/react';
+export { cx } from '@linaria/core';
 export type { CSSProperties } from './CSSProperties';

package/types/processors/css.d.ts

@@ -0,0 +1,6 @@
+import type { SourceLocation } from '@babel/types';
+import CssProcessor from '@linaria/core/processors/css';
+import type { Rules, ValueCache } from '@linaria/core/processors/types';
+export default class AtomicCssProcessor extends CssProcessor {
+    extractRules(valueCache: ValueCache, cssText: string, loc?: SourceLocation | null): [Rules, string];
+}

package/types/{atomize.d.ts → processors/helpers/atomize.d.ts}

@@ -1,4 +1,4 @@
-export default function atomize(cssText: string): {
+export default function atomize(cssText: string, hasPriority?: boolean): {
     className?: string | undefined;
     cssText: string;
     property: string;

package/types/processors/styled.d.ts

@@ -0,0 +1,9 @@
+import type { SourceLocation } from '@babel/types';
+import type { IInterpolation, Rules, ValueCache } from '@linaria/core/processors/types';
+import type { IProps } from '@linaria/react/processors/styled';
+import StyledProcessor from '@linaria/react/processors/styled';
+export default class AtomicStyledProcessor extends StyledProcessor {
+    extractRules(valueCache: ValueCache, cssText: string, loc?: SourceLocation | null): [Rules, string];
+    protected getProps(classes: string, uniqInterpolations: IInterpolation[]): IProps;
+    protected getVariableId(value: string): string;
+}

package/esm/atomize.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atomize.ts"],"names":["postcss","slugify","stylis","all","knownProperties","getPropertyPriority","knownPropertiesMap","reduce","acc","property","i","hashProperty","index","undefined","toString","atomize","cssText","set","prefix","keyframe","atomicRules","stylesheet","parse","walkAtRules","atRule","remove","push","name","walkDecls","decl","thisParent","parent","parents","atomicProperty","prop","hasAtRule","unshift","type","params","selector","root","container","forEach","newNode","clone","removeAll","append","css","propertySlug","join","valueSlug","value","className","propertyPriority","processedCss","repeat"],"mappings":"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","sourcesContent":["import postcss, { Document, AtRule, Container, Rule } from 'postcss';\nimport { slugify } from '@linaria/utils';\nimport stylis from 'stylis';\nimport { all as knownProperties } from 'known-css-properties';\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\nexport default function atomize(cssText: string) {\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 = postcss.parse(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) + (hasAtRule ? 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"],"file":"atomize.js"}

package/esm/propertyPriority.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/propertyPriority.ts"],"names":["shorthandProperties","animation","background","border","columns","flex","font","gap","grid","margin","mask","offset","outline","overflow","padding","transition","getPropertyPriority","property","longhands","Object","values","reduce","a","b","includes"],"mappings":"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","sourcesContent":["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  if (longhands.includes(property)) {\n    return 2;\n  } else {\n    return 1;\n  }\n}\n"],"file":"propertyPriority.js"}

package/lib/atomize.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/atomize.ts"],"names":["knownPropertiesMap","knownProperties","reduce","acc","property","i","hashProperty","index","undefined","toString","atomize","cssText","stylis","set","prefix","keyframe","atomicRules","stylesheet","postcss","parse","walkAtRules","atRule","remove","push","name","walkDecls","decl","thisParent","parent","parents","atomicProperty","prop","hasAtRule","unshift","type","params","selector","root","container","forEach","newNode","clone","removeAll","append","css","propertySlug","join","valueSlug","value","className","propertyPriority","processedCss","repeat"],"mappings":"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","sourcesContent":["import postcss, { Document, AtRule, Container, Rule } from 'postcss';\nimport { slugify } from '@linaria/utils';\nimport stylis from 'stylis';\nimport { all as knownProperties } from 'known-css-properties';\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\nexport default function atomize(cssText: string) {\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 = postcss.parse(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) + (hasAtRule ? 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"],"file":"atomize.js"}

package/lib/propertyPriority.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/propertyPriority.ts"],"names":["shorthandProperties","animation","background","border","columns","flex","font","gap","grid","margin","mask","offset","outline","overflow","padding","transition","getPropertyPriority","property","longhands","Object","values","reduce","a","b","includes"],"mappings":"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","sourcesContent":["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  if (longhands.includes(property)) {\n    return 2;\n  } else {\n    return 1;\n  }\n}\n"],"file":"propertyPriority.js"}