Skip to content

Commit 41e919d

Browse files
frankpaganfrankpagan
committed
feat: enhance media query parsing to support height-based breakpoints and improve condition handling
1 parent 17bf842 commit 41e919d

File tree

2 files changed

+418
-59
lines changed

2 files changed

+418
-59
lines changed

‎demo/index.html‎

Lines changed: 293 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,5 +16,298 @@
1616
<body>
1717
<!--<script src="https://cdn.cocreate.app/css-parser/latest/CoCreate-css-parser.min.js"></script>-->
1818
<script src="https://CoCreate.app/dist/CoCreate.js"></script>
19+
20+
<main class="padding:20px">
21+
<h1>CoCreate CSS Parser Demo</h1>
22+
23+
<section>
24+
<h2>Usage and Configuration</h2>
25+
<p>
26+
To use the CoCreate CSS Parser, include the CoCreate.js
27+
script in your HTML file. You can configure its behavior by
28+
adding attributes to the script tag.
29+
</p>
30+
<pre><code>&lt;script src="https://CoCreate.app/dist/CoCreate.js"&gt;&lt;/script&gt;</code></pre>
31+
32+
<h3>Configuration Attributes</h3>
33+
<ul>
34+
<li>
35+
<b>parse="false"</b>: By default (or with
36+
<code>parse="true"</code>), the CSS parser
37+
automatically scans the DOM on load and generates CSS.
38+
Set this to <code>false</code> to prevent the initial
39+
automatic parsing.
40+
</li>
41+
<li>
42+
<b>save="false"</b>: By default, any CSS generated by
43+
the parser is saved using CoCreate's CRUD functionality.
44+
This persists the styles in your database so they are
45+
available on subsequent page loads. Setting this to
46+
<code>false</code> will prevent the generated CSS from
47+
being saved, making the styles temporary for the
48+
session.
49+
</li>
50+
</ul>
51+
<p>
52+
To enable saving, you must add a <code>&lt;link&gt;</code>
53+
tag to your document. The parser will generate the CSS, and
54+
CoCreate's backend will save it as a file. There are two
55+
ways to configure this:
56+
</p>
57+
58+
<h4>1. Using the `name` attribute:</h4>
59+
<p>
60+
The simplest method is to add a <code>&lt;link&gt;</code>
61+
tag with a <code>name</code> attribute. The value of the
62+
name attribute will be used as the filename for the saved
63+
CSS.
64+
</p>
65+
<pre><code>&lt;link name="styles.css" rel="stylesheet" type="text/css"&gt;</code></pre>
66+
67+
<h4>2. Using CoCreate CRUD attributes:</h4>
68+
<p>
69+
Alternatively, you can use CoCreate's standard storage
70+
attributes to specify where to save the CSS content within
71+
your database.
72+
</p>
73+
<pre><code>&lt;link array="files" object_id="some_unique_id" key="css" rel="stylesheet" type="text/css"&gt;</code></pre>
74+
75+
<p class="margin-top:10px">
76+
Example of disabling automatic parsing and saving on the
77+
script tag:
78+
</p>
79+
<pre><code>&lt;script src="https://CoCreate.app/dist/CoCreate.js" parse="false" save="false"&gt;&lt;/script&gt;</code></pre>
80+
</section>
81+
82+
<section>
83+
<h2>1. Basic Styling</h2>
84+
<p>
85+
You can apply any CSS declaration directly within the class
86+
attribute. The syntax is a simple `property:value` format.
87+
This allows you to "freehand" your styles without writing
88+
separate CSS files.
89+
</p>
90+
<p>
91+
If a CSS value contains spaces, simply replace each space
92+
with an underscore (`_`). For example, to apply
93+
`border: 1px solid black`, you would write the class
94+
`border:1px_solid_black`.
95+
</p>
96+
<div class="color:blue font-size:20px">
97+
This text is blue and 20px.
98+
</div>
99+
<div
100+
class="margin-top:10px border:1px_solid_black padding:10px font-family:Times_New_Roman">
101+
This div has a border, padding, and a specific font family
102+
using underscores for spaces in values.
103+
</div>
104+
</section>
105+
106+
<section class="margin-top:20px">
107+
<h2>2. Breakpoint-based Styling</h2>
108+
<p>
109+
Use predefined breakpoints (xs, sm, md, lg, xl) to apply
110+
styles at different screen sizes. Resize your browser to see
111+
the effect.
112+
</p>
113+
<div
114+
class="background-color:lightgray@xs background-color:lightblue@sm background-color:lightgreen@md background-color:lightyellow@lg background-color:lightpink@xl padding:10px">
115+
My background color changes based on screen width.
116+
</div>
117+
</section>
118+
119+
<section class="margin-top:20px">
120+
<h2>3. Height-based Styling</h2>
121+
<p>
122+
Apply styles based on the viewport height using height-based
123+
breakpoints (e.g., `h-xs`, `h-sm`, `h-md`). This is useful
124+
for adjusting layouts when vertical space is limited.
125+
</p>
126+
<div class="background-color:khaki@h-sm padding:10px">
127+
This has a khaki background when the viewport height is
128+
within the "sm" range (576px-768px).
129+
</div>
130+
</section>
131+
132+
<section class="margin-top:20px">
133+
<h2>4. Orientation-based Styling</h2>
134+
<p>
135+
Apply styles based on the device orientation (portrait or
136+
landscape).
137+
</p>
138+
<div class="display:none@portrait font-weight:bold@landscape color:green@landscape">
139+
This text is only visible and green in landscape mode.
140+
</div>
141+
<div class="display:none@landscape font-weight:bold@portrait color:purple@portrait">
142+
This text is only visible and purple in portrait mode.
143+
</div>
144+
</section>
145+
146+
<section class="margin-top:20px">
147+
<h2>5. Color Scheme Preference (Dark/Light Mode)</h2>
148+
<p>
149+
Use `dark` or `light` to style elements based on the user's
150+
system preference.
151+
</p>
152+
<div class="color:black@light color:white@dark background-color:whitesmoke@light background-color:black@dark padding:10px">
153+
My colors adapt to your system's light or dark mode.
154+
</div>
155+
</section>
156+
157+
<section class="margin-top:20px">
158+
<h2>6. Print and Screen Media Types</h2>
159+
<p>
160+
Apply styles specifically for printing or for screen
161+
display.
162+
</p>
163+
<div class="display:none@print">
164+
This text will not appear when you print the page.
165+
</div>
166+
<div class="display:none@screen">
167+
This text is only visible on the printed page.
168+
</div>
169+
</section>
170+
171+
<section class="margin-top:20px">
172+
<h2>7. Custom Media Queries</h2>
173+
<p>
174+
You can write your own media query conditions directly in
175+
the class.
176+
</p>
177+
<div class="color:red@(min-width:800px)">
178+
This text turns red when the viewport is wider than 800px.
179+
</div>
180+
<div class="font-style:italic@max-width:600px">
181+
This text is italic when the viewport is narrower than 600px.
182+
</div>
183+
</section>
184+
185+
<section class="margin-top:20px">
186+
<h2>8. Combining Media Queries</h2>
187+
<p>
188+
Combine multiple conditions using `&`. This allows for
189+
highly specific styling rules.
190+
</p>
191+
<div class="background-color:teal@sm&dark color:white@sm&dark padding:10px">
192+
This style applies only on small screens (sm) AND in dark
193+
mode.
194+
</div>
195+
<div class="border:2px_solid_red@md&landscape">
196+
This element gets a red border on medium-sized screens (md)
197+
AND in landscape orientation.
198+
</div>
199+
</section>
200+
201+
<section class="margin-top:20px">
202+
<h2>9. Using `OR` and `NOT` in Media Queries</h2>
203+
<p>
204+
The parser supports `OR` (using a comma `,`) and `NOT`
205+
(using a `not_` prefix) logic in media queries.
206+
</p>
207+
<div class="color:purple@xs,xl padding:10px">
208+
This text is purple on extra-small (xs) OR extra-large (xl)
209+
screens.
210+
</div>
211+
<div class="display:none@not_print margin-top:10px">
212+
This text is hidden for all media types EXCEPT print. You
213+
won't see it on the screen.
214+
</div>
215+
<div class="display:none@screen">
216+
This text is only visible on the printed page, proving the
217+
`not_print` rule works.
218+
</div>
219+
</section>
220+
221+
<section class="margin-top:20px">
222+
<h2>10. Using <code>className</code> for Reusable Styles</h2>
223+
<p>
224+
Group multiple atomic styles under a single reusable class
225+
name using the `className` attribute.
226+
</p>
227+
<div className="my-button" class="background-color:blue color:white padding:10px_20px border-radius:5px">
228+
I'm a button.
229+
</div>
230+
<div className="my-button" class="background-color:green@dark">
231+
I'm the same button, but I turn green in dark mode.
232+
</div>
233+
</section>
234+
<section class="margin-top:20px">
235+
<h2>11. Using `!important`</h2>
236+
<p>
237+
You can make a style declaration `!important` to override
238+
other conflicting styles. Just append `!important` to the
239+
class definition. According to CSS rules, `!important` gives
240+
a style the highest priority, overriding other styles
241+
regardless of specificity or source order.
242+
</p>
243+
<div class="color:blue color:red!important">
244+
This text will be red because the `!important` rule has
245+
higher priority.
246+
</div>
247+
<div class="color:green@md color:purple!important@md margin-top:10px">
248+
On medium screens, this text will be purple because the
249+
`!important` rule overrides the other media-queried style.
250+
</div>
251+
</section>
252+
253+
<section class="margin-top:20px">
254+
<h2>12. Styling Pseudo-classes (e.g., :hover)</h2>
255+
<p>
256+
To style pseudo-classes like `:hover`, `:focus`, or
257+
`:active`, define a style rule by attaching the
258+
pseudo-class to the `className` attribute. This creates a
259+
more specific CSS selector that applies during the specified
260+
state (e.g., when hovering). You can also make these styles
261+
`!important` to ensure they override any other conflicting
262+
hover styles.
263+
</p>
264+
<div
265+
className="my-interactive-box"
266+
class="background-color:lightgray padding:20px transition:all_0.3s_ease">
267+
Hover over me.
268+
</div>
269+
<!-- This element defines the hover style for the one above -->
270+
<div
271+
className="my-interactive-box:hover"
272+
class="background-color:coral!important color:white"></div>
273+
</section>
274+
275+
<section class="margin-top:20px">
276+
<h2>13. Complex Combined Queries</h2>
277+
<p>
278+
You can chain multiple media features together to create
279+
very specific styling conditions. This example applies a
280+
style only on medium-sized screens, in landscape mode, AND
281+
when the user has a dark color scheme preference.
282+
</p>
283+
<div
284+
class="padding:10px background-color:indigo@md&landscape&dark color:white@md&landscape&dark">
285+
This style is visible only on medium screens in landscape
286+
and dark mode.
287+
</div>
288+
</section>
289+
290+
<section class="margin-top:20px">
291+
<h2>14. Advanced: Combining Pseudo-classes, Media Queries, and `!important`</h2>
292+
<p>
293+
You can combine pseudo-classes, media queries, and the
294+
`!important` flag for highly specific and prioritized
295+
styles. The parser handles the complexity of generating the
296+
correct CSS rule, and the browser applies them based on
297+
standard CSS precedence: `!important` wins first, then
298+
selector specificity (a `:hover` selector is more specific),
299+
then source order.
300+
</p>
301+
<div
302+
className="advanced-box"
303+
class="background-color:lightyellow padding:15px transition:all_0.3s_ease">
304+
Hover over me on a large screen.
305+
</div>
306+
<!-- This defines a hover style that only applies on large screens (lg) and is marked as !important -->
307+
<div
308+
className="advanced-box:hover"
309+
class="background-color:darkviolet!important@lg color:white@lg"></div>
310+
</section>
311+
</main>
19312
</body>
20313
</html>

0 commit comments

Comments
 (0)