Skip to content

Commit ea13a4f

Browse files
author
Richard Feldman
committed
Move media and mediaQuery into Css.Foreign
1 parent 523fd20 commit ea13a4f

File tree

2 files changed

+105
-97
lines changed

2 files changed

+105
-97
lines changed

src/Css/Foreign.elm

Lines changed: 100 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,8 @@ module Css.Foreign
4949
, li
5050
, line
5151
, main_
52+
, media
53+
, mediaQuery
5254
, menu
5355
, nav
5456
, ol
@@ -100,7 +102,7 @@ third-party DOM nodes!
100102
101103
# Statements
102104
103-
@docs class, id, selector, everything
105+
@docs class, id, selector, everything, media, mediaQuery
104106
105107
106108
# Combinators
@@ -150,7 +152,15 @@ third-party DOM nodes!
150152
-}
151153

152154
import Css.Helpers exposing (identifierToString, toCssIdentifier)
153-
import Css.Preprocess as Preprocess exposing (Snippet(Snippet), SnippetDeclaration(StyleBlockDeclaration), Style, StyleBlock(StyleBlock))
155+
import Css.Media exposing (MediaQuery)
156+
import Css.Preprocess as Preprocess
157+
exposing
158+
( Snippet(Snippet)
159+
, SnippetDeclaration(StyleBlockDeclaration)
160+
, Style
161+
, StyleBlock(StyleBlock)
162+
, unwrapSnippet
163+
)
154164
import Css.Preprocess.Resolve as Resolve
155165
import Css.Structure as Structure
156166
import Html.Styled
@@ -255,6 +265,94 @@ everything styles =
255265
|> makeSnippet styles
256266

257267

268+
{-| Combines media queries into a `@media` rule.
269+
270+
(stylesheet << namespace "homepage")
271+
[ media [ only screen [ Media.minWidth (px 300) ] ]
272+
[ footer [ Css.maxWidth (px 300) ] ]
273+
]
274+
275+
The above code translates into the following CSS.
276+
277+
```css
278+
@media screen and (min-width: 300px) {
279+
footer {
280+
max-width: 300px;
281+
}
282+
}
283+
```
284+
285+
-}
286+
media :
287+
List MediaQuery
288+
-> List Snippet
289+
-> Snippet
290+
media queries snippets =
291+
let
292+
snippetDeclarations : List Preprocess.SnippetDeclaration
293+
snippetDeclarations =
294+
List.concatMap unwrapSnippet snippets
295+
296+
extractStyleBlocks : List Preprocess.SnippetDeclaration -> List Preprocess.StyleBlock
297+
extractStyleBlocks declarations =
298+
case declarations of
299+
[] ->
300+
[]
301+
302+
(Preprocess.StyleBlockDeclaration styleBlock) :: rest ->
303+
styleBlock :: extractStyleBlocks rest
304+
305+
first :: rest ->
306+
extractStyleBlocks rest
307+
308+
mediaRuleFromStyleBlocks : Preprocess.SnippetDeclaration
309+
mediaRuleFromStyleBlocks =
310+
Preprocess.MediaRule queries
311+
(extractStyleBlocks snippetDeclarations)
312+
313+
nestedMediaRules : List Preprocess.SnippetDeclaration -> List Preprocess.SnippetDeclaration
314+
nestedMediaRules declarations =
315+
case declarations of
316+
[] ->
317+
[]
318+
319+
(Preprocess.StyleBlockDeclaration _) :: rest ->
320+
-- These will already have been handled previously, with appropriate
321+
-- bundling, so don't create duplicates here.
322+
nestedMediaRules rest
323+
324+
(Preprocess.MediaRule nestedMediaQueries styleBlocks) :: rest ->
325+
-- nest the media queries
326+
Preprocess.MediaRule (List.append queries nestedMediaQueries) styleBlocks
327+
:: nestedMediaRules rest
328+
329+
first :: rest ->
330+
first :: nestedMediaRules rest
331+
in
332+
Preprocess.Snippet (mediaRuleFromStyleBlocks :: nestedMediaRules snippetDeclarations)
333+
334+
335+
{-| Manually specify a `@media` rule using a List of strings.
336+
337+
mediaQuery [ "screen and (min-width: 320px)", "screen and (max-height: 400px)" ]
338+
[ body [ fontSize (px 14)] ]
339+
340+
The above code translates into the following CSS.
341+
342+
```css
343+
@media screen and (min-width: 320px), screen and (max-height: 400px) {
344+
body {
345+
font-size: 14px;
346+
}
347+
}
348+
```
349+
350+
-}
351+
mediaQuery : List String -> List Snippet -> Snippet
352+
mediaQuery stringQueries snippets =
353+
media (List.map Structure.CustomQuery stringQueries) snippets
354+
355+
258356
{-| -}
259357
children : List Snippet -> Style
260358
children =

src/Css/Media.elm

Lines changed: 5 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,6 @@ module Css.Media
5151
, maxMonochrome
5252
, maxResolution
5353
, maxWidth
54-
, media
55-
, mediaQuery
5654
, minAspectRatio
5755
, minColor
5856
, minColorIndex
@@ -100,7 +98,7 @@ module Css.Media
10098
10199
# `@media` rule constructors
102100
103-
@docs media, withMedia, mediaQuery, withMediaQuery
101+
@docs withMedia, withMediaQuery
104102
105103
106104
# Query constructors
@@ -147,8 +145,8 @@ module Css.Media
147145
148146
-}
149147

150-
import Css
151-
import Css.Preprocess as Preprocess exposing (Style, unwrapSnippet)
148+
import Css exposing (Style)
149+
import Css.Preprocess as Preprocess exposing (unwrapSnippet)
152150
import Css.Structure as Structure exposing (..)
153151

154152

@@ -209,94 +207,6 @@ type alias Value compatible =
209207
{--Rule constructors--}
210208

211209

212-
{-| Combines media queries into a `@media` rule.
213-
214-
(stylesheet << namespace "homepage")
215-
[ media [ only screen [ Media.minWidth (px 300) ] ]
216-
[ footer [ Css.maxWidth (px 300) ] ]
217-
]
218-
219-
The above code translates into the following CSS.
220-
221-
```css
222-
@media screen and (min-width: 300px) {
223-
footer {
224-
max-width: 300px;
225-
}
226-
}
227-
```
228-
229-
-}
230-
media :
231-
List MediaQuery
232-
-> List Css.Snippet
233-
-> Css.Snippet
234-
media queries snippets =
235-
let
236-
snippetDeclarations : List Preprocess.SnippetDeclaration
237-
snippetDeclarations =
238-
List.concatMap unwrapSnippet snippets
239-
240-
extractStyleBlocks : List Preprocess.SnippetDeclaration -> List Preprocess.StyleBlock
241-
extractStyleBlocks declarations =
242-
case declarations of
243-
[] ->
244-
[]
245-
246-
(Preprocess.StyleBlockDeclaration styleBlock) :: rest ->
247-
styleBlock :: extractStyleBlocks rest
248-
249-
first :: rest ->
250-
extractStyleBlocks rest
251-
252-
mediaRuleFromStyleBlocks : Preprocess.SnippetDeclaration
253-
mediaRuleFromStyleBlocks =
254-
Preprocess.MediaRule queries
255-
(extractStyleBlocks snippetDeclarations)
256-
257-
nestedMediaRules : List Preprocess.SnippetDeclaration -> List Preprocess.SnippetDeclaration
258-
nestedMediaRules declarations =
259-
case declarations of
260-
[] ->
261-
[]
262-
263-
(Preprocess.StyleBlockDeclaration _) :: rest ->
264-
-- These will already have been handled previously, with appropriate
265-
-- bundling, so don't create duplicates here.
266-
nestedMediaRules rest
267-
268-
(Preprocess.MediaRule nestedMediaQueries styleBlocks) :: rest ->
269-
-- nest the media queries
270-
Preprocess.MediaRule (List.append queries nestedMediaQueries) styleBlocks
271-
:: nestedMediaRules rest
272-
273-
first :: rest ->
274-
first :: nestedMediaRules rest
275-
in
276-
Preprocess.Snippet (mediaRuleFromStyleBlocks :: nestedMediaRules snippetDeclarations)
277-
278-
279-
{-| Manually specify a `@media` rule using a List of strings.
280-
281-
mediaQuery [ "screen and (min-width: 320px)", "screen and (max-height: 400px)" ]
282-
[ body [ fontSize (px 14)] ]
283-
284-
The above code translates into the following CSS.
285-
286-
```css
287-
@media screen and (min-width: 320px), screen and (max-height: 400px) {
288-
body {
289-
font-size: 14px;
290-
}
291-
}
292-
```
293-
294-
-}
295-
mediaQuery : List String -> List Css.Snippet -> Css.Snippet
296-
mediaQuery stringQueries snippets =
297-
media (List.map Structure.CustomQuery stringQueries) snippets
298-
299-
300210
{-| Combines media queries that are nested under selectors into a `@media` rule.
301211
302212
(stylesheet << namespace "homepage")
@@ -316,7 +226,7 @@ The above code translates into the following CSS.
316226
```
317227
318228
-}
319-
withMedia : List MediaQuery -> List Css.Style -> Css.Style
229+
withMedia : List MediaQuery -> List Style -> Style
320230
withMedia queries =
321231
Preprocess.WithMedia queries
322232

@@ -340,7 +250,7 @@ The above code translates into the following CSS.
340250
```
341251
342252
-}
343-
withMediaQuery : List String -> List Css.Style -> Css.Style
253+
withMediaQuery : List String -> List Style -> Style
344254
withMediaQuery queries =
345255
queries
346256
|> List.map Structure.CustomQuery

0 commit comments

Comments
 (0)