@linaria/atomic 3.0.0-beta.15

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# 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.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,37 @@
+import postcss from 'postcss';
+import { slugify } from '@linaria/utils';
+export default function atomize(cssText) {
+  const atomicRules = [];
+  const stylesheet = postcss.parse(cssText);
+  stylesheet.walkDecls(decl => {
+    const parent = decl.parent;
+
+    if (parent === stylesheet) {
+      const line = `${decl.prop}: ${decl.value};`;
+      const className = `atm_${slugify(line)}`;
+      atomicRules.push({
+        property: decl.prop,
+        className,
+        cssText: line
+      });
+    }
+  }); // Things like @media rules
+
+  stylesheet.walkAtRules(atRule => {
+    atRule.walkDecls(decl => {
+      const slug = slugify([atRule.name, atRule.params, decl.prop, decl.value].join(';'));
+      const className = `atm_${slug}`;
+      atomicRules.push({
+        // For @ rules we want the unique property we do merging on to contain
+        // the atrule params, eg. `media only screen and (max-width: 600px)`
+        // But not the value. That way, our hashes will match when the media rule +
+        // the declaration property match, and we can merge atomic media rules
+        property: [atRule.name, atRule.params, decl.prop].join(' '),
+        className,
+        cssText: `@${atRule.name} ${atRule.params} { .${className} { ${decl.prop}: ${decl.value}; } }`
+      });
+    });
+  });
+  return atomicRules;
+}
+//# sourceMappingURL=atomize.js.map

package/esm/atomize.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atomize.ts"],"names":["postcss","slugify","atomize","cssText","atomicRules","stylesheet","parse","walkDecls","decl","parent","line","prop","value","className","push","property","walkAtRules","atRule","slug","name","params","join"],"mappings":"AAAA,OAAOA,OAAP,MAAoB,SAApB;AACA,SAASC,OAAT,QAAwB,gBAAxB;AAEA,eAAe,SAASC,OAAT,CAAiBC,OAAjB,EAAkC;AAC/C,QAAMC,WAIH,GAAG,EAJN;AAMA,QAAMC,UAAU,GAAGL,OAAO,CAACM,KAAR,CAAcH,OAAd,CAAnB;AAEAE,EAAAA,UAAU,CAACE,SAAX,CAAsBC,IAAD,IAAU;AAC7B,UAAMC,MAAM,GAAGD,IAAI,CAACC,MAApB;;AACA,QAAIA,MAAM,KAAKJ,UAAf,EAA2B;AACzB,YAAMK,IAAI,GAAI,GAAEF,IAAI,CAACG,IAAK,KAAIH,IAAI,CAACI,KAAM,GAAzC;AACA,YAAMC,SAAS,GAAI,OAAMZ,OAAO,CAACS,IAAD,CAAO,EAAvC;AACAN,MAAAA,WAAW,CAACU,IAAZ,CAAiB;AACfC,QAAAA,QAAQ,EAAEP,IAAI,CAACG,IADA;AAEfE,QAAAA,SAFe;AAGfV,QAAAA,OAAO,EAAEO;AAHM,OAAjB;AAKD;AACF,GAXD,EAT+C,CAqB/C;;AACAL,EAAAA,UAAU,CAACW,WAAX,CAAwBC,MAAD,IAAY;AACjCA,IAAAA,MAAM,CAACV,SAAP,CAAkBC,IAAD,IAAU;AACzB,YAAMU,IAAI,GAAGjB,OAAO,CAClB,CAACgB,MAAM,CAACE,IAAR,EAAcF,MAAM,CAACG,MAArB,EAA6BZ,IAAI,CAACG,IAAlC,EAAwCH,IAAI,CAACI,KAA7C,EAAoDS,IAApD,CAAyD,GAAzD,CADkB,CAApB;AAGA,YAAMR,SAAS,GAAI,OAAMK,IAAK,EAA9B;AACAd,MAAAA,WAAW,CAACU,IAAZ,CAAiB;AACf;AACA;AACA;AACA;AACAC,QAAAA,QAAQ,EAAE,CAACE,MAAM,CAACE,IAAR,EAAcF,MAAM,CAACG,MAArB,EAA6BZ,IAAI,CAACG,IAAlC,EAAwCU,IAAxC,CAA6C,GAA7C,CALK;AAMfR,QAAAA,SANe;AAOfV,QAAAA,OAAO,EAAG,IAAGc,MAAM,CAACE,IAAK,IAAGF,MAAM,CAACG,MAAO,OAAMP,SAAU,MAAKL,IAAI,CAACG,IAAK,KAAIH,IAAI,CAACI,KAAM;AAPzE,OAAjB;AASD,KAdD;AAeD,GAhBD;AAkBA,SAAOR,WAAP;AACD","sourcesContent":["import postcss from 'postcss';\nimport { slugify } from '@linaria/utils';\n\nexport default function atomize(cssText: string) {\n  const atomicRules: {\n    className: string;\n    cssText: string;\n    property: string;\n  }[] = [];\n\n  const stylesheet = postcss.parse(cssText);\n\n  stylesheet.walkDecls((decl) => {\n    const parent = decl.parent;\n    if (parent === stylesheet) {\n      const line = `${decl.prop}: ${decl.value};`;\n      const className = `atm_${slugify(line)}`;\n      atomicRules.push({\n        property: decl.prop,\n        className,\n        cssText: line,\n      });\n    }\n  });\n  // Things like @media rules\n  stylesheet.walkAtRules((atRule) => {\n    atRule.walkDecls((decl) => {\n      const slug = slugify(\n        [atRule.name, atRule.params, decl.prop, decl.value].join(';')\n      );\n      const className = `atm_${slug}`;\n      atomicRules.push({\n        // For @ rules we want the unique property we do merging on to contain\n        // the atrule params, eg. `media only screen and (max-width: 600px)`\n        // But not the value. That way, our hashes will match when the media rule +\n        // the declaration property match, and we can merge atomic media rules\n        property: [atRule.name, atRule.params, decl.prop].join(' '),\n        className,\n        cssText: `@${atRule.name} ${atRule.params} { .${className} { ${decl.prop}: ${decl.value}; } }`,\n      });\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":"AAWA,OAAO,MAAMA,GAAQ,GAAG,MAAM;AAC5B,QAAM,IAAIC,KAAJ,CACJ,wGADI,CAAN;AAGD,CAJM;AAMP,eAAeD,GAAf","sourcesContent":["import type { CSSProperties } from './CSSProperties';\n\nexport interface StyleCollectionObject {\n  [key: string]: string;\n}\n\ntype CSS = (\n  strings: TemplateStringsArray,\n  ...exprs: Array<string | number | CSSProperties>\n) => StyleCollectionObject;\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,4 @@
+export { default as css } from './css';
+export { default as atomize } from './atomize';
+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","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';\nexport type { StyleCollectionObject } from './css';\n"],"file":"index.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,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = atomize;
+
+var _postcss = _interopRequireDefault(require("postcss"));
+
+var _utils = require("@linaria/utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function atomize(cssText) {
+  const atomicRules = [];
+
+  const stylesheet = _postcss.default.parse(cssText);
+
+  stylesheet.walkDecls(decl => {
+    const parent = decl.parent;
+
+    if (parent === stylesheet) {
+      const line = `${decl.prop}: ${decl.value};`;
+      const className = `atm_${(0, _utils.slugify)(line)}`;
+      atomicRules.push({
+        property: decl.prop,
+        className,
+        cssText: line
+      });
+    }
+  }); // Things like @media rules
+
+  stylesheet.walkAtRules(atRule => {
+    atRule.walkDecls(decl => {
+      const slug = (0, _utils.slugify)([atRule.name, atRule.params, decl.prop, decl.value].join(';'));
+      const className = `atm_${slug}`;
+      atomicRules.push({
+        // For @ rules we want the unique property we do merging on to contain
+        // the atrule params, eg. `media only screen and (max-width: 600px)`
+        // But not the value. That way, our hashes will match when the media rule +
+        // the declaration property match, and we can merge atomic media rules
+        property: [atRule.name, atRule.params, decl.prop].join(' '),
+        className,
+        cssText: `@${atRule.name} ${atRule.params} { .${className} { ${decl.prop}: ${decl.value}; } }`
+      });
+    });
+  });
+  return atomicRules;
+}
+//# sourceMappingURL=atomize.js.map

package/lib/atomize.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/atomize.ts"],"names":["atomize","cssText","atomicRules","stylesheet","postcss","parse","walkDecls","decl","parent","line","prop","value","className","push","property","walkAtRules","atRule","slug","name","params","join"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEe,SAASA,OAAT,CAAiBC,OAAjB,EAAkC;AAC/C,QAAMC,WAIH,GAAG,EAJN;;AAMA,QAAMC,UAAU,GAAGC,iBAAQC,KAAR,CAAcJ,OAAd,CAAnB;;AAEAE,EAAAA,UAAU,CAACG,SAAX,CAAsBC,IAAD,IAAU;AAC7B,UAAMC,MAAM,GAAGD,IAAI,CAACC,MAApB;;AACA,QAAIA,MAAM,KAAKL,UAAf,EAA2B;AACzB,YAAMM,IAAI,GAAI,GAAEF,IAAI,CAACG,IAAK,KAAIH,IAAI,CAACI,KAAM,GAAzC;AACA,YAAMC,SAAS,GAAI,OAAM,oBAAQH,IAAR,CAAc,EAAvC;AACAP,MAAAA,WAAW,CAACW,IAAZ,CAAiB;AACfC,QAAAA,QAAQ,EAAEP,IAAI,CAACG,IADA;AAEfE,QAAAA,SAFe;AAGfX,QAAAA,OAAO,EAAEQ;AAHM,OAAjB;AAKD;AACF,GAXD,EAT+C,CAqB/C;;AACAN,EAAAA,UAAU,CAACY,WAAX,CAAwBC,MAAD,IAAY;AACjCA,IAAAA,MAAM,CAACV,SAAP,CAAkBC,IAAD,IAAU;AACzB,YAAMU,IAAI,GAAG,oBACX,CAACD,MAAM,CAACE,IAAR,EAAcF,MAAM,CAACG,MAArB,EAA6BZ,IAAI,CAACG,IAAlC,EAAwCH,IAAI,CAACI,KAA7C,EAAoDS,IAApD,CAAyD,GAAzD,CADW,CAAb;AAGA,YAAMR,SAAS,GAAI,OAAMK,IAAK,EAA9B;AACAf,MAAAA,WAAW,CAACW,IAAZ,CAAiB;AACf;AACA;AACA;AACA;AACAC,QAAAA,QAAQ,EAAE,CAACE,MAAM,CAACE,IAAR,EAAcF,MAAM,CAACG,MAArB,EAA6BZ,IAAI,CAACG,IAAlC,EAAwCU,IAAxC,CAA6C,GAA7C,CALK;AAMfR,QAAAA,SANe;AAOfX,QAAAA,OAAO,EAAG,IAAGe,MAAM,CAACE,IAAK,IAAGF,MAAM,CAACG,MAAO,OAAMP,SAAU,MAAKL,IAAI,CAACG,IAAK,KAAIH,IAAI,CAACI,KAAM;AAPzE,OAAjB;AASD,KAdD;AAeD,GAhBD;AAkBA,SAAOT,WAAP;AACD","sourcesContent":["import postcss from 'postcss';\nimport { slugify } from '@linaria/utils';\n\nexport default function atomize(cssText: string) {\n  const atomicRules: {\n    className: string;\n    cssText: string;\n    property: string;\n  }[] = [];\n\n  const stylesheet = postcss.parse(cssText);\n\n  stylesheet.walkDecls((decl) => {\n    const parent = decl.parent;\n    if (parent === stylesheet) {\n      const line = `${decl.prop}: ${decl.value};`;\n      const className = `atm_${slugify(line)}`;\n      atomicRules.push({\n        property: decl.prop,\n        className,\n        cssText: line,\n      });\n    }\n  });\n  // Things like @media rules\n  stylesheet.walkAtRules((atRule) => {\n    atRule.walkDecls((decl) => {\n      const slug = slugify(\n        [atRule.name, atRule.params, decl.prop, decl.value].join(';')\n      );\n      const className = `atm_${slug}`;\n      atomicRules.push({\n        // For @ rules we want the unique property we do merging on to contain\n        // the atrule params, eg. `media only screen and (max-width: 600px)`\n        // But not the value. That way, our hashes will match when the media rule +\n        // the declaration property match, and we can merge atomic media rules\n        property: [atRule.name, atRule.params, decl.prop].join(' '),\n        className,\n        cssText: `@${atRule.name} ${atRule.params} { .${className} { ${decl.prop}: ${decl.value}; } }`,\n      });\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":";;;;;;;AAWO,MAAMA,GAAQ,GAAG,MAAM;AAC5B,QAAM,IAAIC,KAAJ,CACJ,wGADI,CAAN;AAGD,CAJM;;;eAMQD,G","sourcesContent":["import type { CSSProperties } from './CSSProperties';\n\nexport interface StyleCollectionObject {\n  [key: string]: string;\n}\n\ntype CSS = (\n  strings: TemplateStringsArray,\n  ...exprs: Array<string | number | CSSProperties>\n) => StyleCollectionObject;\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,32 @@
+"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;
+  }
+});
+
+var _css = _interopRequireDefault(require("./css"));
+
+var _atomize = _interopRequireDefault(require("./atomize"));
+
+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","sourcesContent":["export { default as css } from './css';\nexport { default as atomize } from './atomize';\nexport { cx } from '@linaria/utils';\n\nexport type { CSSProperties } from './CSSProperties';\nexport type { StyleCollectionObject } from './css';\n"],"file":"index.js"}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@linaria/atomic",
+  "version": "3.0.0-beta.15",
+  "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/utils": "^3.0.0-beta.15",
+    "postcss": "^8.3.11"
+  },
+  "gitHead": "a8ada3794c6e13231f70711d92b516d57677a5b1"
+}

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): {
+    className: string;
+    cssText: string;
+    property: string;
+}[];

package/types/css.d.ts

@@ -0,0 +1,7 @@
+import type { CSSProperties } from './CSSProperties';
+export interface StyleCollectionObject {
+    [key: string]: string;
+}
+declare type CSS = (strings: TemplateStringsArray, ...exprs: Array<string | number | CSSProperties>) => StyleCollectionObject;
+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 { cx } from '@linaria/utils';
+export type { CSSProperties } from './CSSProperties';
+export type { StyleCollectionObject } from './css';