@linaria/atomic 3.0.0-airbnb.0

package/CHANGELOG.md

@@ -0,0 +1,24 @@
+# Change Log
+
+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.18](https://github.com/callstack/linaria/compare/v3.0.0-beta.17...v3.0.0-beta.18) (2022-04-01)
+
+
+### Features
+
+* **atomic:** add property priorities ([#950](https://github.com/callstack/linaria/issues/950)) ([c44becb](https://github.com/callstack/linaria/commit/c44becb11b2eec795b68c2b3d0715672ba4b3888))
+* **atomic:** add support for at-rules, keyframes and pseudo classes ([#913](https://github.com/callstack/linaria/issues/913)) ([dee7fa1](https://github.com/callstack/linaria/commit/dee7fa14ea912224cac9f0673be7464e93571a73))
+* **atomic:** string serialization of atoms ([#934](https://github.com/callstack/linaria/issues/934)) ([ef19ccb](https://github.com/callstack/linaria/commit/ef19ccb384cb7dbee561e789f637b0289d4d224c))
+
+
+
+
+
+# [3.0.0-beta.15](https://github.com/callstack/linaria/compare/v3.0.0-beta.14...v3.0.0-beta.15) (2021-11-29)
+
+
+### Features
+
+* **atomic:** create an atomic package for the css API ([#867](https://github.com/callstack/linaria/issues/867)) ([4773bcf](https://github.com/callstack/linaria/commit/4773bcf4b14f08cdc4d2b612654b962cdfc97eaa))

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Callstack
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,35 @@
+<p align="center">
+  <img alt="Linaria" src="https://raw.githubusercontent.com/callstack/linaria/HEAD/website/assets/linaria-logo@2x.png" width="496">
+</p>
+
+<p align="center">
+Zero-runtime CSS in JS library.
+</p>
+
+---
+
+### 📖 Please refer to the [GitHub](https://github.com/callstack/linaria#readme) for full documentation.
+
+## Features
+
+- Write CSS in JS, but with **zero runtime**, CSS is extracted to CSS files during build
+- Familiar **CSS syntax** with Sass like nesting
+- Use **dynamic prop based styles** with the React bindings, uses CSS variables behind the scenes
+- Easily find where the style was defined with **CSS sourcemaps**
+- **Lint your CSS** in JS with [stylelint](https://github.com/stylelint/stylelint)
+- Use **JavaScript for logic**, no CSS preprocessor needed
+- Optionally use any **CSS preprocessor** such as Sass or PostCSS
+
+**[Why use Linaria](../../docs/BENEFITS.md)**
+
+## Installation
+
+```sh
+npm install @linaria/core @linaria/react @linaria/babel-preset @linaria/shaker
+```
+
+or
+
+```sh
+yarn add @linaria/core @linaria/react @linaria/babel-preset @linaria/shaker
+```

package/esm/CSSProperties.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=CSSProperties.js.map

package/esm/CSSProperties.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"CSSProperties.js"}

package/esm/atomize.js

@@ -0,0 +1,88 @@
+import postcss from 'postcss';
+import { slugify } from '@linaria/utils';
+import stylis from 'stylis';
+import { all as knownProperties } from 'known-css-properties';
+import { getPropertyPriority } from './propertyPriority';
+const knownPropertiesMap = knownProperties.reduce((acc, property, i) => {
+  acc[property] = i;
+  return acc;
+}, {});
+
+function hashProperty(property) {
+  const index = knownPropertiesMap[property]; // If it's a known property, let's use the index to cut down the length of the hash.
+  // otherwise, slugify
+
+  if (index !== undefined) {
+    return index.toString(36); // base 36 so that we get a-z,0-9
+  }
+
+  return slugify(property);
+}
+
+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.
+  // This isn't scoped locally yet
+
+  stylesheet.walkAtRules('keyframes', atRule => {
+    atRule.remove();
+    atomicRules.push({
+      property: atRule.name,
+      cssText: atRule.toString()
+    });
+  });
+  stylesheet.walkDecls(decl => {
+    let thisParent = decl.parent;
+    const parents = [];
+    const atomicProperty = [decl.prop];
+    let hasAtRule = false; // Traverse the declarations parents, and collect them all.
+
+    while (thisParent && thisParent !== stylesheet) {
+      parents.unshift(thisParent);
+
+      if (thisParent.type === 'atrule') {
+        hasAtRule = true; // @media queries, @supports etc.
+
+        atomicProperty.push(thisParent.name, thisParent.params);
+      } else if (thisParent.type === 'rule') {
+        // pseudo classes etc.
+        atomicProperty.push(thisParent.selector);
+      }
+
+      thisParent = thisParent.parent;
+    } // Create a new stylesheet that contains *just* the extracted atomic rule and wrapping selectors, eg.
+    // `@media (max-width: 400px) { background: red; }`, or
+    // `&:hover { background: red; }`, or
+    // `background: red;`
+    // We do this so we can run it through stylis, to produce a full atom, eg.
+    // `@media (max-width: 400px) { .atm_foo { background: red; } }`
+
+
+    const root = postcss.root();
+    let container = root;
+    parents.forEach(parent => {
+      const newNode = parent.clone();
+      newNode.removeAll();
+      container.append(newNode);
+      container = newNode;
+    });
+    container.append(decl.clone());
+    const css = root.toString();
+    const propertySlug = hashProperty([...atomicProperty].join(';'));
+    const valueSlug = slugify(decl.value);
+    const className = `atm_${propertySlug}_${valueSlug}`;
+    const propertyPriority = getPropertyPriority(decl.prop) + (hasAtRule ? 1 : 0) + (hasPriority ? 1 : 0);
+    const processedCss = stylis(`.${className}`.repeat(propertyPriority), css);
+    atomicRules.push({
+      property: atomicProperty.join(' '),
+      className,
+      cssText: processedCss
+    });
+  });
+  return atomicRules;
+}
+//# sourceMappingURL=atomize.js.map

package/esm/atomize.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atomize.ts"],"names":["postcss","slugify","stylis","all","knownProperties","getPropertyPriority","knownPropertiesMap","reduce","acc","property","i","hashProperty","index","undefined","toString","atomize","cssText","hasPriority","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, 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 = 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) +\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"],"file":"atomize.js"}

package/esm/css.js

@@ -0,0 +1,5 @@
+export const css = () => {
+  throw new Error('Using the "css" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.');
+};
+export default css;
+//# sourceMappingURL=css.js.map

package/esm/css.js.map

@@ -0,0 +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"}

package/esm/index.js

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

package/esm/index.js.map

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

package/esm/propertyPriority.js

@@ -0,0 +1,72 @@
+const 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', 'animation-timing-function', 'animation-delay', 'animation-iteration-count', 'animation-direction', 'animation-fill-mode', 'animation-play-state'],
+  background: ['background-attachment', 'background-clip', 'background-color', 'background-image', 'background-origin', 'background-position', 'background-repeat', 'background-size'],
+  border: ['border-color', 'border-style', 'border-width'],
+  'border-block-end': ['border-block-end-color', 'border-block-end-style', 'border-block-end-width'],
+  'border-block-start': ['border-block-start-color', 'border-block-start-style', 'border-block-start-width'],
+  'border-bottom': ['border-bottom-color', 'border-bottom-style', 'border-bottom-width'],
+  'border-color': ['border-bottom-color', 'border-left-color', 'border-right-color', 'border-top-color'],
+  'border-image': ['border-image-outset', 'border-image-repeat', 'border-image-slice', 'border-image-source', 'border-image-width'],
+  'border-inline-end': ['border-inline-end-color', 'border-inline-end-style', 'border-inline-end-width'],
+  'border-inline-start': ['border-inline-start-color', 'border-inline-start-style', 'border-inline-start-width'],
+  'border-left': ['border-left-color', 'border-left-style', 'border-left-width'],
+  'border-radius': ['border-top-left-radius', 'border-top-right-radius', 'border-bottom-right-radius', 'border-bottom-left-radius'],
+  'border-right': ['border-right-color', 'border-right-style', 'border-right-width'],
+  'border-style': ['border-bottom-style', 'border-left-style', 'border-right-style', 'border-top-style'],
+  'border-top': ['border-top-color', 'border-top-style', 'border-top-width'],
+  'border-width': ['border-bottom-width', 'border-left-width', 'border-right-width', 'border-top-width'],
+  'column-rule': ['column-rule-width', 'column-rule-style', 'column-rule-color'],
+  columns: ['column-count', 'column-width'],
+  flex: ['flex-grow', 'flex-shrink', 'flex-basis'],
+  'flex-flow': ['flex-direction', 'flex-wrap'],
+  font: ['font-family', 'font-size', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'line-height'],
+  gap: ['row-gap', 'column-gap'],
+  grid: ['grid-auto-columns', 'grid-auto-flow', 'grid-auto-rows', 'grid-template-areas', 'grid-template-columns', 'grid-template-rows'],
+  'grid-area': ['grid-row-start', 'grid-column-start', 'grid-row-end', 'grid-column-end'],
+  'grid-column': ['grid-column-end', 'grid-column-start'],
+  'grid-row': ['grid-row-end', 'grid-row-start'],
+  'grid-template': ['grid-template-areas', 'grid-template-columns', 'grid-template-rows'],
+  'list-style': ['list-style-image', 'list-style-position', 'list-style-type'],
+  margin: ['margin-bottom', 'margin-left', 'margin-right', 'margin-top'],
+  mask: ['mask-clip', 'mask-composite', 'mask-image', 'mask-mode', 'mask-origin', 'mask-position', 'mask-repeat', 'mask-size'],
+  offset: ['offset-anchor', 'offset-distance', 'offset-path', 'offset-position', 'offset-rotate'],
+  outline: ['outline-color', 'outline-style', 'outline-width'],
+  overflow: ['overflow-x', 'overflow-y'],
+  padding: ['padding-bottom', 'padding-left', 'padding-right', 'padding-top'],
+  'place-content': ['align-content', 'justify-content'],
+  'place-items': ['align-items', 'justify-items'],
+  'place-self': ['align-self', 'justify-self'],
+  'scroll-margin': ['scroll-margin-bottom', 'scroll-margin-left', 'scroll-margin-right', 'scroll-margin-top'],
+  'scroll-padding': ['scroll-padding-bottom', 'scroll-padding-left', 'scroll-padding-right', 'scroll-padding-top'],
+  'text-decoration': ['text-decoration-color', 'text-decoration-line', 'text-decoration-style', 'text-decoration-thickness'],
+  'text-emphasis': ['text-emphasis-color', 'text-emphasis-style'],
+  transition: ['transition-delay', 'transition-duration', 'transition-property', 'transition-timing-function']
+}; // Get the property priority: the higher the priority, the higher the resulting
+// specificity of the atom. For example, if we had:
+//
+// import { css } from '@linaria/atomic';
+// css`
+//   background-color: blue;
+//   background: red;
+// `;
+//
+// we would produce:
+//
+// .atm_a.atm_a { background-color: blue }
+// .atm_b { background: red }
+//
+// and so the more specific selector (.atm_a.atm_a) would win
+
+export function getPropertyPriority(property) {
+  const longhands = Object.values(shorthandProperties).reduce((a, b) => [...a, ...b], []);
+
+  if (longhands.includes(property)) {
+    return 2;
+  } else {
+    return 1;
+  }
+}
+//# sourceMappingURL=propertyPriority.js.map

package/esm/propertyPriority.js.map

@@ -0,0 +1 @@
+{"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/CSSProperties.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=CSSProperties.js.map

package/lib/CSSProperties.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourcesContent":[],"file":"CSSProperties.js"}

package/lib/atomize.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = atomize;
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+var _utils = require("@linaria/utils");
+
+var _stylis = _interopRequireDefault(require("stylis"));
+
+var _knownCssProperties = require("known-css-properties");
+
+var _propertyPriority = require("./propertyPriority");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const knownPropertiesMap = _knownCssProperties.all.reduce((acc, property, i) => {
+  acc[property] = i;
+  return acc;
+}, {});
+
+function hashProperty(property) {
+  const index = knownPropertiesMap[property]; // If it's a known property, let's use the index to cut down the length of the hash.
+  // otherwise, slugify
+
+  if (index !== undefined) {
+    return index.toString(36); // base 36 so that we get a-z,0-9
+  }
+
+  return (0, _utils.slugify)(property);
+}
+
+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.
+  // This isn't scoped locally yet
+
+
+  stylesheet.walkAtRules('keyframes', atRule => {
+    atRule.remove();
+    atomicRules.push({
+      property: atRule.name,
+      cssText: atRule.toString()
+    });
+  });
+  stylesheet.walkDecls(decl => {
+    let thisParent = decl.parent;
+    const parents = [];
+    const atomicProperty = [decl.prop];
+    let hasAtRule = false; // Traverse the declarations parents, and collect them all.
+
+    while (thisParent && thisParent !== stylesheet) {
+      parents.unshift(thisParent);
+
+      if (thisParent.type === 'atrule') {
+        hasAtRule = true; // @media queries, @supports etc.
+
+        atomicProperty.push(thisParent.name, thisParent.params);
+      } else if (thisParent.type === 'rule') {
+        // pseudo classes etc.
+        atomicProperty.push(thisParent.selector);
+      }
+
+      thisParent = thisParent.parent;
+    } // Create a new stylesheet that contains *just* the extracted atomic rule and wrapping selectors, eg.
+    // `@media (max-width: 400px) { background: red; }`, or
+    // `&:hover { background: red; }`, or
+    // `background: red;`
+    // We do this so we can run it through stylis, to produce a full atom, eg.
+    // `@media (max-width: 400px) { .atm_foo { background: red; } }`
+
+
+    const root = _postcss.default.root();
+
+    let container = root;
+    parents.forEach(parent => {
+      const newNode = parent.clone();
+      newNode.removeAll();
+      container.append(newNode);
+      container = newNode;
+    });
+    container.append(decl.clone());
+    const css = root.toString();
+    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) + (hasPriority ? 1 : 0);
+    const processedCss = (0, _stylis.default)(`.${className}`.repeat(propertyPriority), css);
+    atomicRules.push({
+      property: atomicProperty.join(' '),
+      className,
+      cssText: processedCss
+    });
+  });
+  return atomicRules;
+}
+//# sourceMappingURL=atomize.js.map

package/lib/atomize.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atomize.ts"],"names":["knownPropertiesMap","knownProperties","reduce","acc","property","i","hashProperty","index","undefined","toString","atomize","cssText","hasPriority","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, 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 = 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) +\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"],"file":"atomize.js"}

package/lib/css.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.css = void 0;
+
+const css = () => {
+  throw new Error('Using the "css" tag in runtime is not supported. Make sure you have set up the Babel plugin correctly.');
+};
+
+exports.css = css;
+var _default = css;
+exports.default = _default;
+//# sourceMappingURL=css.js.map

package/lib/css.js.map

@@ -0,0 +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"}

package/lib/index.js

@@ -0,0 +1,40 @@
+"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, "styled", {
+  enumerable: true,
+  get: function () {
+    return _react.styled;
+  }
+});
+Object.defineProperty(exports, "cx", {
+  enumerable: true,
+  get: function () {
+    return _utils.cx;
+  }
+});
+
+var _css = _interopRequireDefault(require("./css"));
+
+var _atomize = _interopRequireDefault(require("./atomize"));
+
+var _react = require("@linaria/react");
+
+var _utils = require("@linaria/utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

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

package/lib/propertyPriority.js

@@ -0,0 +1,78 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getPropertyPriority = getPropertyPriority;
+const 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', 'animation-timing-function', 'animation-delay', 'animation-iteration-count', 'animation-direction', 'animation-fill-mode', 'animation-play-state'],
+  background: ['background-attachment', 'background-clip', 'background-color', 'background-image', 'background-origin', 'background-position', 'background-repeat', 'background-size'],
+  border: ['border-color', 'border-style', 'border-width'],
+  'border-block-end': ['border-block-end-color', 'border-block-end-style', 'border-block-end-width'],
+  'border-block-start': ['border-block-start-color', 'border-block-start-style', 'border-block-start-width'],
+  'border-bottom': ['border-bottom-color', 'border-bottom-style', 'border-bottom-width'],
+  'border-color': ['border-bottom-color', 'border-left-color', 'border-right-color', 'border-top-color'],
+  'border-image': ['border-image-outset', 'border-image-repeat', 'border-image-slice', 'border-image-source', 'border-image-width'],
+  'border-inline-end': ['border-inline-end-color', 'border-inline-end-style', 'border-inline-end-width'],
+  'border-inline-start': ['border-inline-start-color', 'border-inline-start-style', 'border-inline-start-width'],
+  'border-left': ['border-left-color', 'border-left-style', 'border-left-width'],
+  'border-radius': ['border-top-left-radius', 'border-top-right-radius', 'border-bottom-right-radius', 'border-bottom-left-radius'],
+  'border-right': ['border-right-color', 'border-right-style', 'border-right-width'],
+  'border-style': ['border-bottom-style', 'border-left-style', 'border-right-style', 'border-top-style'],
+  'border-top': ['border-top-color', 'border-top-style', 'border-top-width'],
+  'border-width': ['border-bottom-width', 'border-left-width', 'border-right-width', 'border-top-width'],
+  'column-rule': ['column-rule-width', 'column-rule-style', 'column-rule-color'],
+  columns: ['column-count', 'column-width'],
+  flex: ['flex-grow', 'flex-shrink', 'flex-basis'],
+  'flex-flow': ['flex-direction', 'flex-wrap'],
+  font: ['font-family', 'font-size', 'font-stretch', 'font-style', 'font-variant', 'font-weight', 'line-height'],
+  gap: ['row-gap', 'column-gap'],
+  grid: ['grid-auto-columns', 'grid-auto-flow', 'grid-auto-rows', 'grid-template-areas', 'grid-template-columns', 'grid-template-rows'],
+  'grid-area': ['grid-row-start', 'grid-column-start', 'grid-row-end', 'grid-column-end'],
+  'grid-column': ['grid-column-end', 'grid-column-start'],
+  'grid-row': ['grid-row-end', 'grid-row-start'],
+  'grid-template': ['grid-template-areas', 'grid-template-columns', 'grid-template-rows'],
+  'list-style': ['list-style-image', 'list-style-position', 'list-style-type'],
+  margin: ['margin-bottom', 'margin-left', 'margin-right', 'margin-top'],
+  mask: ['mask-clip', 'mask-composite', 'mask-image', 'mask-mode', 'mask-origin', 'mask-position', 'mask-repeat', 'mask-size'],
+  offset: ['offset-anchor', 'offset-distance', 'offset-path', 'offset-position', 'offset-rotate'],
+  outline: ['outline-color', 'outline-style', 'outline-width'],
+  overflow: ['overflow-x', 'overflow-y'],
+  padding: ['padding-bottom', 'padding-left', 'padding-right', 'padding-top'],
+  'place-content': ['align-content', 'justify-content'],
+  'place-items': ['align-items', 'justify-items'],
+  'place-self': ['align-self', 'justify-self'],
+  'scroll-margin': ['scroll-margin-bottom', 'scroll-margin-left', 'scroll-margin-right', 'scroll-margin-top'],
+  'scroll-padding': ['scroll-padding-bottom', 'scroll-padding-left', 'scroll-padding-right', 'scroll-padding-top'],
+  'text-decoration': ['text-decoration-color', 'text-decoration-line', 'text-decoration-style', 'text-decoration-thickness'],
+  'text-emphasis': ['text-emphasis-color', 'text-emphasis-style'],
+  transition: ['transition-delay', 'transition-duration', 'transition-property', 'transition-timing-function']
+}; // Get the property priority: the higher the priority, the higher the resulting
+// specificity of the atom. For example, if we had:
+//
+// import { css } from '@linaria/atomic';
+// css`
+//   background-color: blue;
+//   background: red;
+// `;
+//
+// we would produce:
+//
+// .atm_a.atm_a { background-color: blue }
+// .atm_b { background: red }
+//
+// and so the more specific selector (.atm_a.atm_a) would win
+
+function getPropertyPriority(property) {
+  const longhands = Object.values(shorthandProperties).reduce((a, b) => [...a, ...b], []);
+
+  if (longhands.includes(property)) {
+    return 2;
+  } else {
+    return 1;
+  }
+}
+//# sourceMappingURL=propertyPriority.js.map

package/lib/propertyPriority.js.map

@@ -0,0 +1 @@
+{"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/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@linaria/atomic",
+  "version": "3.0.0-airbnb.0",
+  "publishConfig": {
+    "access": "public"
+  },
+  "description": "Blazing fast zero-runtime CSS in JS library",
+  "sideEffects": false,
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "types": "types/index.d.ts",
+  "files": [
+    "types/",
+    "lib/",
+    "esm/"
+  ],
+  "license": "MIT",
+  "repository": "git@github.com:callstack/linaria.git",
+  "bugs": {
+    "url": "https://github.com/callstack/linaria/issues"
+  },
+  "homepage": "https://github.com/callstack/linaria#readme",
+  "keywords": [
+    "react",
+    "linaria",
+    "css",
+    "css-in-js",
+    "styled-components"
+  ],
+  "scripts": {
+    "build:lib": "cross-env NODE_ENV=legacy babel src --out-dir lib --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start",
+    "build:esm": "babel src --out-dir esm --extensions '.js,.jsx,.ts,.tsx' --source-maps --delete-dir-on-start",
+    "build": "yarn build:lib && yarn build:esm",
+    "build:declarations": "tsc --emitDeclarationOnly --outDir types",
+    "prepare": "yarn build && yarn build:declarations",
+    "typecheck": "tsc --noEmit --composite false",
+    "watch": "yarn build --watch"
+  },
+  "dependencies": {
+    "@linaria/react": "^3.0.0-airbnb.0",
+    "@linaria/utils": "^3.0.0-airbnb.0",
+    "known-css-properties": "^0.24.0",
+    "postcss": "^8.3.11",
+    "stylis": "^3.5.4"
+  },
+  "gitHead": "1c8bd4331b152498dd76e3f137940f43bd30e7b0"
+}

package/types/CSSProperties.d.ts

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

package/types/atomize.d.ts

@@ -0,0 +1,5 @@
+export default function atomize(cssText: string, hasPriority?: boolean): {
+    className?: string | undefined;
+    cssText: string;
+    property: string;
+}[];

package/types/css.d.ts

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

package/types/index.d.ts

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

package/types/propertyPriority.d.ts

@@ -0,0 +1 @@
+export declare function getPropertyPriority(property: string): 2 | 1;