@stitches/core - npm Package Compare versions

Comparing version 0.0.1 to 0.0.2-canary.0

package.json

 {
   "name": "@stitches/core",
-  "version": "0.0.1",
+  "version": "0.0.2-canary.0",
   "description": "The modern CSS-in-JS library",
+  "main": "dist/core.cjs.js",
+  "module": "dist/core.esm.js",
   "contributors": [
     "Christian Alfoni <[e-mail]>",
     "Pedro Duarte <[e-mail]>",
-    "Abdul Hallak <[e-mail]>"
+    "Abdulhadi Alhallak <[e-mail]>"
   ],
   "license": "MIT",
   "repository": "git+https://github.com/modulz/stitches.git",
-  "main": "lib/index.js",
-  "module": "es/index.js",
   "publishConfig": {
     "access": "public"
   },
+  "preconstruct": {
+    "source": "src/index.ts"
+  },
+  "lint-staged": {
+    "./**/*.{js,jsx,ts,tsx}": [
+      "tslint --fix",
+      "prettier --write",
+      "git add"
+    ],
+    "./**/*.{css,md,json}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
   "scripts": {
-    "build": "npm run build:lib & npm run build:es",
-    "build:lib": "tsc -p tsconfig.build.json --outDir lib --module commonjs",
-    "build:es": "tsc -p tsconfig.build.json --outDir es --module es2015",
     "clean": "rimraf dist es lib coverage",
@@ -27,4 +38,2 @@ "typecheck": "tsc --noEmit",
     "test:watch": "node ../../node_modules/jest/bin/jest.js --env=jsdom --watch --updateSnapshot",
-    "prebuild": "npm run clean",
-    "postbuild": "rimraf {lib,es}/**/__tests__ {lib,es}/**/*.{spec,test}.{js,d.ts,js.map}",
     "posttest": "npm run typecheck && npm run lint",
@@ -41,4 +50,3 @@ "preversion": "npm test",
   "files": [
-    "lib",
-    "es"
+    "dist"
   ],
@@ -49,3 +57,3 @@ "dependencies": {
   },
-  "gitHead": "c3509acc346ab0f9820b61ffb26307ec280ccebf"
+  "gitHead": "fcf069d00544c1438a4d2c55669bca2abc338b8b"
 }

README.md

 ## Why
 
-- **Atomic mindset**: Each CSS property is a an atomic part of your complete CSS
+- **Atomic mindset**: Each CSS property is an atomic part of your complete CSS
 - **Reusability**: Each CSS property, given the same screen, pseudo and value is considered the same, giving high degree of reusability
@@ -10,3 +10,3 @@ - **Optimal injection**: You can compose your styles outside of your UI, but no injection happens until it is actually used
 - **Typed**: Fully typed API, even though you are not using Typescript
-- **Specificity solved**: No more specificity issues as an atomic mindset opens up a more efficient and straight forward way to solve it
+- **Specificity solved**: No more specificity issues, as an atomic mindset opens up a more efficient and straight forward way to solve it
 - **Token based theming**: Tokens are CSS variables. Create themes overriding the tokens and expose themes to any parts of your app
@@ -21,15 +21,15 @@
 ```ts
-import { css } from "@stitches/core";
+import { css } from '@stitches/core';
 
 const button = css({
-  color: "gray",
-  "&:hover": {
-    color: "black",
+  color: 'gray',
+  '&:hover': {
+    color: 'black',
   },
-  borderColor: "black",
-  padding: "1rem",
+  borderColor: 'black',
+  padding: '1rem',
 });
 
 const alertButton = css(button, {
-  borderColor: "red",
+  borderColor: 'red',
 });
@@ -49,14 +49,14 @@
 ```ts
-import { createCss } from "@stitches/core";
+import { createCss } from '@stitches/core';
 
 export const css = createCss({
   // Optinally add a prefix to all classnames to avoid crashes
-  prefix: "my-lib",
+  prefix: 'my-lib',
   // Maps tokens to properties. Follows the system-ui theme specification: https://system-ui.com/theme
   tokens: {
     colors: {
-      RED: "tomato",
+      RED: 'tomato',
     },
     space: {
-      0: "1rem",
+      0: '1rem',
     },
@@ -92,10 +92,10 @@ fontSizes: {},
 css({
-  color: "RED", // Creates "tomato"
+  color: 'RED', // Creates "tomato"
   tablet: {
-    color: "blue", // Color is "blue" when media query is active
+    color: 'blue', // Color is "blue" when media query is active
   },
   marginX: 0, // Creates "1rem", as it composes margin, using "space" from tokens
-  border: "1px solid RED", // creates a "tomato" border
-  border: ["1px", "solid", "RED"], // You can also use array syntax to get typing
-  boxShadow: ["1px", "1px", "1px", "RED"], // You can also use array syntax with shadow
+  border: '1px solid RED', // creates a "tomato" border
+  border: ['1px', 'solid', 'RED'], // You can also use array syntax to get typing
+  boxShadow: ['1px', '1px', '1px', 'RED'], // You can also use array syntax with shadow
 });
@@ -109,3 +109,3 @@ ```
 ```ts
-import { createCss } from "@stitches/core";
+import { createCss } from '@stitches/core';
 
@@ -117,3 +117,3 @@ export const css = createCss({
       ...(color ? { color } : {}),
-      ...(size ? { fontSize: size + "rem" } : {}),
+      ...(size ? { fontSize: size + 'rem' } : {}),
     }),
@@ -125,8 +125,8 @@ },
   text: {
-    color: "red",
+    color: 'red',
     size: 2,
   },
-  ":hover": {
+  ':hover': {
     text: {
-      color: "blue",
+      color: 'blue',
     },
@@ -137,3 +137,3 @@ },
   override: {
-    padding: "2rem",
+    padding: '2rem',
   },
@@ -148,3 +148,3 @@ });
 ```ts
-import { createCss } from "@stitches/core";
+import { createCss } from '@stitches/core';
 
@@ -154,3 +154,3 @@ export const css = createCss({
     colors: {
-      primary: "tomato",
+      primary: 'tomato',
     },
@@ -162,3 +162,3 @@ },
   colors: {
-    primary: "pink",
+    primary: 'pink',
   },
@@ -175,3 +175,3 @@ });
 ```ts
-import { createCss } from "@stitches/core";
+import { createCss } from '@stitches/core';
 
@@ -186,4 +186,4 @@ const css = createCss({});
 css({
-  WebkitFontSmoothing: "antialiased",
-  MozOsxFontSmoothing: "grayscale",
+  WebkitFontSmoothing: 'antialiased',
+  MozOsxFontSmoothing: 'grayscale',
 });
@@ -195,5 +195,5 @@ ```
 ```ts
-import { createCss } from "@stitches/core";
-import postcss from "postcss";
-import autoprefixer from "autoprefixer";
+import { createCss } from '@stitches/core';
+import postcss from 'postcss';
+import autoprefixer from 'autoprefixer';
 
@@ -204,7 +204,3 @@ const css = createCss({});
 Promise.all(
-  styles.map((style) =>
-    postcss([autoprefixer({ browsers: ["> 1%", "last 2 versions"] })]).process(
-      style
-    )
-  )
+  styles.map((style) => postcss([autoprefixer({ browsers: ['> 1%', 'last 2 versions'] })]).process(style))
 ).then((styles) => {
@@ -211,0 +207,0 @@ // styles with vendor prefixes

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

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

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Total package byte prevSize

554875

decreased by-69.63%

Number of package files

16

decreased by-68.63%

Lines of code

10642

decreased by-38.05%

Number of lines in readme file

195

decreased by-2.01%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes