@magic/css 0.7.52 → 0.7.53

package/README.md

@@ -25,11 +25,11 @@ parse/stringify/write css in js
 [snyk-url]: https://snyk.io/test/github/magic/css
 
 ##### installation:
+
 ```javascript
   npm install --save-exact @magic/css
 ```
 
-
 #### usage:
 
 ##### cli:
@@ -68,12 +68,13 @@ mcss full --in ./styles --out ./css
 #### library:
 
 ##### init
+
 ```javascript
 import css from '@magic/css'
 ```
 
-
 ##### all in one
+
 ```javascript
 import css from '@magic/css'
 
@@ -113,6 +114,7 @@ Object {
 ```
 
 ##### styles
+
 ```javascript
 const style = {
   '.className': {
@@ -125,6 +127,7 @@ await css.stringify(style)
 ```
 
 ##### hover/active etc
+
 ```javascript
 const style = {
   div: {
@@ -142,7 +145,9 @@ await css.stringify(style)
 ```
 
 ##### nesting / suffix
+
 to suffix some of the selectors, add a & to any of them except the first one
+
 ```javascript
 const style = {
   div: {
@@ -159,6 +164,7 @@ await css.stringify(style)
 
 if you add the & at the start of the string,
 all of the selectors will have it applied
+
 ```javascript
 const style = {
   div: {
@@ -177,6 +183,7 @@ await css.stringify(style)
 
 to prefix the parent of the selector using the child selectors,
 add a & at the end of any selectors but the last one.
+
 ```javascript
 const style = {
   '.class': {
@@ -191,8 +198,8 @@ await css.stringify(style)
 // p.class, .class:hover { color: orange; }
 ```
 
-
 ##### prefix all without space
+
 if the & is at the end of a selector,
 the & will be applied to each of them.
 
@@ -211,6 +218,7 @@ await css.stringify(style)
 ```
 
 ##### prefix with space
+
 to prefix the parent with a space, use a double && instead of a single &
 
 ```javascript
@@ -228,6 +236,7 @@ await css.stringify(style)
 ```
 
 ##### prefix all with space
+
 if the && is at the end of a selector,
 the && will be applied to each of them.
 
@@ -245,8 +254,8 @@ await css.stringify(style)
 // div .class, p .class { color: orange; }
 ```
 
-
 ##### parse
+
 ```javascript
 const style = {
   '.className': {
@@ -262,6 +271,7 @@ css.parse(style)
 ```
 
 ##### stringify
+
 ```javascript
 const style = {
   '.className': {
@@ -271,13 +281,14 @@ const style = {
   },
 }
 
-await css.stringify(style)
-
-// minified string
+await css.stringify(
+  style,
+) // minified string
 `.className #id{color:white;}`
 ```
 
 ##### write to filesystem
+
 ```javascript
 const style = {
   '.className': {
@@ -287,7 +298,6 @@ const style = {
   },
 }
 
-
 // writes styles to ./out.css
 await css.write(style)
 
@@ -296,18 +306,32 @@ await css.write(style, { OUTFILE: './outfile.css' })
 ```
 
 ##### media queries
+
+Mediaqueries can use the vars.widths object to determine appropriate breakpoint sizes.
+
+Default widths:
+
+```javascript
+opts.widths = {
+  tablet: '500px',
+  laptop: '900px',
+  desktop: '1200px',
+  agency: '1600px',
+}
+```
+
 ```javascript
 const style = {
-  '@media screen and (min-width: 500px)': {
+  [`@media screen and (min-width: ${vars.widths?.tablet || '500px'})`]: {
     '#id': {
       color: opts.textColor,
     },
   },
 }
 
-await css.stringify(style)
-
-// css string
+await css.stringify(
+  style,
+) // css string
 `
 @media screen and (min-width: 500px) {
   #id {
@@ -318,6 +342,7 @@ await css.stringify(style)
 ```
 
 ##### webfonts
+
 ```javascript
 const style = {
   '@font-face': {
@@ -328,9 +353,9 @@ const style = {
   },
 }
 
-await css.stringify(style)
-
-// css string
+await css.stringify(
+  style,
+) // css string
 `
 @font-face {
   font-family: "font-name";
@@ -345,228 +370,309 @@ await css.stringify(style)
 }
 `
 // ... repeated for all styles and weights that were defined
-
 ```
 
 ### CHANGELOG:
+
 #### 0.1.0
+
 return classes and ids as well
 
 #### 0.2.0:
+
 Added media queries
 
 #### 0.3.0:
-* returns a promise! no longer sync.
-* autoprefixer and postcss added
+
+- returns a promise! no longer sync.
+- autoprefixer and postcss added
 
 ### 0.4.0:
+
 supports @font-face declarations
 
 #### 0.4.1
+
 added fontDir option to font-face declarations
 
 #### 0.4.2
+
 update deps to fix security issues
 
 #### 0.4.3
+
 added @keyframes for animations
 
 #### 0.4.4
+
 css.parse now converts deep arrays into one object before parsing
 
 #### 0.4.5
-* css.stringify now makes a bit nicer mediaquery and keyframe lines.
-* css.parse should now order media queries to the end of the css
+
+- css.stringify now makes a bit nicer mediaquery and keyframe lines.
+- css.parse should now order media queries to the end of the css
 
 #### 0.4.6
+
 css.parse does a better job of keeping order of incoming objects intact
 
 #### 0.4.7
-* FIX: multiple parent selectors 'h1,h2,h3' that should get appended
+
+- FIX: multiple parent selectors 'h1,h2,h3' that should get appended
   with a &:hover etc now correctly append the suffix to every parent
-* FEATURE: & can be at the end of a selector,
+- FEATURE: & can be at the end of a selector,
   in which case the selector gets prepended to it's parent.
 
 #### 0.5.0
+
 FIX: css gets returned in almost the same order it got passed in.
 turns out that javascript objects do not make this as easy as hoped.
 
 #### 0.6.0
+
 use esmodules
 
 #### 0.7.0
+
 update @magic/types to not break if es modules get passed into the styles
 
 #### 0.7.1
-* update @magic/deep to use ecmascript module version
-* update postcss, autoprefixer
+
+- update @magic/deep to use ecmascript module version
+- update postcss, autoprefixer
 
 #### 0.7.2
+
 update dependencies
 
 #### 0.7.3
+
 update dependencies
 
 #### 0.7.4
+
 add @magic/log to dependencies
 
 #### 0.7.5
+
 update autoprefixer
 
 #### 0.7.6
+
 update postcss
 
 #### 0.7.7
+
 update postcss
 
 #### 0.7.8
+
 update @magic/deep
 
 #### 0.7.9
+
 require node >= 13.5.0
 
 #### 0.7.10
+
 update postcss
 
 ##### 0.7.11
+
 update autoprefixer
 
 ##### 0.7.12
+
 update postcss
 
 ##### 0.7.13
-* bump required node version to 14.2.0
-* write is async now
+
+- bump required node version to 14.2.0
+- write is async now
 
 ##### 0.7.14
-* update autoprefixer, dependencies
+
+- update autoprefixer, dependencies
 
 ##### 0.7.15
-* update dependencies
+
+- update dependencies
 
 ##### 0.7.16
+
 update autoprefixer
 
 ##### 0.7.17
+
 update autoprefixer
 
 ##### 0.7.18
-* move no-spy to devdeps
-* update dependencies
+
+- move no-spy to devdeps
+- update dependencies
 
 ##### 0.7.19
+
 update autoprefixer
 
 ##### 0.7.20
+
 update dependencies
 
 ##### 0.7.21
+
 update dependencies
 
 ##### 0.7.22
+
 update dependencies
 
 ##### 0.7.23
+
 update dependencies
 
 ##### 0.7.24
+
 update dependencies
 
 ##### 0.7.25
+
 update dependencies
 
 ##### 0.7.26
+
 update dependencies
 
 ##### 0.7.27
+
 update dependencies
 simplify font-face handling
 
 ##### 0.7.28
-* bump required node version to 14.15.4
-* update dependencies
+
+- bump required node version to 14.15.4
+- update dependencies
 
 ##### 0.7.29
-* font-face handles non-array weights, types and styles
-* font-face uses woff and woff2 as default font types
-* font-face uses weight 400 and styles 'normal' as defaults
+
+- font-face handles non-array weights, types and styles
+- font-face uses woff and woff2 as default font types
+- font-face uses weight 400 and styles 'normal' as defaults
 
 ##### 0.7.30
+
 update dependencies
 
 ##### 0.7.31
+
 update dependencies (@magic/fs)
 
 ##### 0.7.32
-* update dependencies
-* css.selectors returns arrays instead of strings
+
+- update dependencies
+- css.selectors returns arrays instead of strings
 
 ##### 0.7.33
+
 update dependencies
 
 ##### 0.7.34
+
 update dependency autoprefixer
 
 ##### 0.7.35
+
 update dependency @magic/fs
 
 ##### 0.7.36
+
 remove local implementation of camel2kebab, use @magic/cases instead
 
 #### 0.7.37
+
 update dependencies
 
 #### 0.7.38
+
 **FIX**: update @magic/cases, which fixes overflow-x and other css props that end with an uppercase character
 overflowX is output as overflowx in earlier versions, the regex expected lowercase characters after the uppercase char
 
 #### 0.7.39
+
 update dependencies
 
 #### 0.7.40
+
 update dependencies
 
 #### 0.7.41
+
 update dependencies
 
 #### 0.7.42
+
 update dependencies
 
 #### 0.7.43
-* update dependencies
-* added font v2 to allow handling of local() fonts (see https://magic.github.io/css/#styles-webfonts)
-* woff2 files are placed before woff files
-* use single quotes in output css
-* add cli
+
+- update dependencies
+- added font v2 to allow handling of local() fonts (see https://magic.github.io/css/#styles-webfonts)
+- woff2 files are placed before woff files
+- use single quotes in output css
+- add cli
 
 #### 0.7.44
-* css props can be arrays to provide css overloads `{ color: ['green', 'red'] }` turns into `color: green; color: red;`
-* update dependencies
+
+- css props can be arrays to provide css overloads `{ color: ['green', 'red'] }` turns into `color: green; color: red;`
+- update dependencies
 
 #### 0.7.45
+
 update dependencies
 
 #### 0.7.46
+
 update dependencies
 
 #### 0.7.47
+
 update dependencies
 
 #### 0.7.48
+
 update dependencies
 
 #### 0.7.49
+
 update dependencies
 
 #### 0.7.50
+
 update dependencies
 
 #### 0.7.51
+
 update dependencies
 
 #### 0.7.52
+
 update dependencies
 
-#### 0.7.53 - unreleased
-...
+#### 0.7.53
+
+- update dependencies
+- update docs to reflect usage of vars.widths.{tablet|laptop|desktop}
+- add defaults for opts.widths, to make sure we can use media queries at all times.
 
+```javascript
+opts.widths = {
+  tablet: '500px',
+  laptop: '900px',
+  desktop: '1200px',
+  agency: '1600px',
+}
+```
+
+#### 0.7.54 - unreleased
+
+...

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magic/css",
-  "version": "0.7.52",
+  "version": "0.7.53",
   "author": "Wizards & Witches",
   "description": "css in js",
   "license": "AGPL-3.0",
@@ -42,8 +42,8 @@
     "@magic/fs": "0.0.27",
     "@magic/log": "0.1.17",
     "@magic/types": "0.1.22",
-    "autoprefixer": "10.4.7",
-    "postcss": "8.4.13"
+    "autoprefixer": "10.4.13",
+    "postcss": "8.4.20"
   },
   "devDependencies": {
     "@magic-modules/git-badges": "0.0.12",
@@ -51,9 +51,9 @@
     "@magic-modules/no-spy": "0.0.7",
     "@magic-modules/pre": "0.0.11",
     "@magic-themes/docs": "0.0.14",
-    "@magic/core": "0.0.142",
-    "@magic/format": "0.0.41",
-    "@magic/test": "0.2.12"
+    "@magic/core": "0.0.144",
+    "@magic/format": "0.0.48",
+    "@magic/test": "0.2.14"
   },
   "keywords": [
     "css-in-js",

package/src/parse/index.mjs

@@ -99,6 +99,18 @@ const flat = a => {
  * parse the styles css object into an array of key-value pairs.
  */
 const parse = (styles, opts = {}) => {
+  const defaultWidths = {
+    tablet: '500px',
+    laptop: '900px',
+    desktop: '1200px',
+    agency: '1600px',
+  }
+
+  opts.widths = {
+    ...defaultWidths,
+    ...opts.widths,
+  }
+
   // first check if the user sent us a function that resolves to a css object
   if (is.function(styles)) {
     styles = styles(opts)