@anydigital/breakout-css 1.0.0-alpha → 1.0.0-alpha.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +3 -15
  2. package/dist/breakout.css +2 -4
  3. package/package.json +5 -5
  4. package/src/breakout.css +19 -3
package/README.md CHANGED
@@ -10,25 +10,13 @@ Modern CSS utilities to easily break-out / hang / pop-out images, iframes, or ot
10
10
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@anydigital/breakout-css@1/dist/breakout.min.css">
11
11
  ```
12
12
 
13
- ### Precompiled CSS
14
-
15
- ```bash
16
- npm install @anydigital/breakout-css
17
- ```
18
-
19
- Import the compiled CSS file directly into your project:
13
+ ### From Source
20
14
 
21
15
  ```css
22
- @import '@anydigital/breakout-css/dist/breakout.css';
16
+ @import '@anydigital/breakout-css';
23
17
  ```
24
18
 
25
- ### With Tailwind v4
26
-
27
- Tailwind v4 supports native CSS nesting, so you can import the source file directly:
28
-
29
- ```css
30
- @import '@anydigital/breakout-css/src/breakout.css';
31
- ```
19
+ ^ This is supported by Tailwind v4!
32
20
 
33
21
  ## Usage
34
22
 
package/dist/breakout.css CHANGED
@@ -8,9 +8,7 @@
8
8
 
9
9
  }
10
10
 
11
- /* All the supported "figure" elements and custom utility class for other tags that need to be broken out */
12
-
13
- .breakout > img:not(does-not-exist):not(.does-not-exist),.breakout > figure:not(does-not-exist):not(.does-not-exist),.breakout > picture:not(does-not-exist):not(.does-not-exist),.breakout > video:not(does-not-exist):not(.does-not-exist),.breakout > audio:not(does-not-exist):not(.does-not-exist),.breakout > iframe:not(does-not-exist):not(.does-not-exist),.breakout > object:not(does-not-exist):not(.does-not-exist),.breakout > embed:not(does-not-exist):not(.does-not-exist),.breakout > canvas:not(does-not-exist):not(.does-not-exist),.breakout > .breakout-figure:not(does-not-exist),.breakout > p > img:not(.does-not-exist),.breakout > p > figure:not(.does-not-exist),.breakout > p > picture:not(.does-not-exist),.breakout > p > video:not(.does-not-exist),.breakout > p > audio:not(.does-not-exist),.breakout > p > iframe:not(.does-not-exist),.breakout > p > object:not(.does-not-exist),.breakout > p > embed:not(.does-not-exist),.breakout > p > canvas:not(.does-not-exist),.breakout > p > .breakout-figure {
11
+ .breakout > img:not(does-not-exist):not(.does-not-exist),.breakout > figure:not(does-not-exist):not(.does-not-exist),.breakout > picture:not(does-not-exist):not(.does-not-exist),.breakout > video:not(does-not-exist):not(.does-not-exist),.breakout > audio:not(does-not-exist):not(.does-not-exist),.breakout > iframe:not(does-not-exist):not(.does-not-exist),.breakout > object:not(does-not-exist):not(.does-not-exist),.breakout > embed:not(does-not-exist):not(.does-not-exist),.breakout > canvas:not(does-not-exist):not(.does-not-exist),.breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > .breakout-figure:not(does-not-exist),.breakout > p > img:not(.does-not-exist),.breakout > p > figure:not(.does-not-exist),.breakout > p > picture:not(.does-not-exist),.breakout > p > video:not(.does-not-exist),.breakout > p > audio:not(.does-not-exist),.breakout > p > iframe:not(.does-not-exist),.breakout > p > object:not(.does-not-exist),.breakout > p > embed:not(.does-not-exist),.breakout > p > canvas:not(.does-not-exist),.breakout > p > table:not(.does-not-exist),.breakout > p > .breakout-figure {
14
12
  width: auto; /* Support small images */
15
13
  max-width: 125%;
16
14
  transform: translateX(-50%);
@@ -18,7 +16,7 @@
18
16
 
19
17
  }
20
18
 
21
- .breakout > .breakout-figure:not(does-not-exist),.breakout > p > .breakout-figure {
19
+ .breakout > table:not(does-not-exist):not(.does-not-exist),.breakout > .breakout-figure:not(does-not-exist),.breakout > p > table:not(.does-not-exist),.breakout > p > .breakout-figure {
22
20
  width: 125% !important;
23
21
  }
24
22
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@anydigital/breakout-css",
3
- "version": "1.0.0-alpha",
3
+ "version": "1.0.0-alpha.2",
4
4
  "description": "Modern CSS utilities to easily break-out / hang / pop-out images, iframes, or other figures from their parent container",
5
5
  "keywords": [
6
6
  "css",
@@ -11,16 +11,16 @@
11
11
  "tailwind-plugin",
12
12
  "utilities"
13
13
  ],
14
- "main": "dist/breakout.css",
15
14
  "style": "dist/breakout.css",
16
15
  "files": [
17
16
  "dist",
18
17
  "src"
19
18
  ],
20
19
  "exports": {
21
- ".": "./dist/breakout.css",
22
- "./css": "./dist/breakout.css",
23
- "./src": "./src/breakout.css"
20
+ ".": {
21
+ "style": "./dist/breakout.css",
22
+ "import": "./src/breakout.css"
23
+ }
24
24
  },
25
25
  "scripts": {
26
26
  "build": "node scripts/build.js",
package/src/breakout.css CHANGED
@@ -7,15 +7,31 @@
7
7
  /* Direct children, potentially wrapped in <p> for Markdown support */
8
8
  & > *,
9
9
  & > p > * {
10
- /* All the supported "figure" elements and custom utility class for other tags that need to be broken out */
11
- &:is(img, figure, picture, video, audio, iframe, object, embed, canvas, .breakout-figure) {
10
+ &:is(
11
+ /* All the supported "figure" elements */
12
+ img,
13
+ figure,
14
+ picture,
15
+ video,
16
+ audio,
17
+ iframe,
18
+ object,
19
+ embed,
20
+ canvas,
21
+ table,
22
+ /* Custom utility class for other tags that need to be broken out */
23
+ .breakout-figure
24
+ ) {
12
25
  width: auto; /* Support small images */
13
26
  max-width: 125%;
14
27
  transform: translateX(-50%);
15
28
  margin-left: 50%;
16
29
 
17
30
  }
18
- &:is(.breakout-figure) {
31
+ &:is(
32
+ table,
33
+ .breakout-figure
34
+ ) {
19
35
  width: 125% !important;
20
36
  }
21
37
  }