diff --git a/src/Css.elm b/src/Css.elm index 1ff3b886..2caf5fee 100644 --- a/src/Css.elm +++ b/src/Css.elm @@ -1,4 +1,4 @@ -module Css (compile, Stylesheet, Snippet, Mixin, Color, stylesheet, each, media, withMedia, withClass, children, descendants, adjacentSiblings, generalSiblings, mixin, all, property, selector, important, (#), (.), (|*|), (|+|), (|-|), (|/|), transformStyle, eachLine, transformBox, transform, transforms, currentColor, underline, overline, lineThrough, textDecoration, textDecoration2, textDecoration3, textDecorations, textDecorations2, textDecorations3, textDecorationLine, textDecorationLines, textDecorationStyle, capitalize, uppercase, lowercase, fullWidth, hanging, textIndent, textIndent2, textIndent3, ellipsis, clip, textOverflow, optimizeSpeed, optimizeLegibility, geometricPrecision, textRendering, textTransform, textShadow, textShadow2, textShadow3, textShadow4, textAlign, textAlignLast, left, right, center, textJustify, justifyAll, start, end, matchParent, true, verticalAlign, display, opacity, minContent, maxContent, fitContent, fillAvailable, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, padding2, padding3, padding4, paddingTop, paddingBottom, paddingRight, paddingLeft, paddingBlockStart, paddingBlockEnd, paddingInlineStart, paddingInlineEnd, margin, margin2, margin3, margin4, marginTop, marginBottom, marginRight, marginLeft, marginBlockStart, marginBlockEnd, marginInlineStart, marginInlineEnd, boxSizing, overflow, overflowX, overflowY, whiteSpace, backgroundColor, color, solid, transparent, rgb, rgba, hsl, hsla, hex, zero, pct, px, em, pt, ex, ch, rem, vh, vw, vmin, vmax, mm, cm, inches, pc, int, float, borderColor, borderColor2, borderColor3, borderColor4, borderBottomLeftRadius, borderBottomLeftRadius2, borderBottomRightRadius, borderBottomRightRadius2, borderTopLeftRadius, borderTopLeftRadius2, borderTopRightRadius, borderTopRightRadius2, borderRadius, borderRadius2, borderRadius3, borderRadius4, borderBottomWidth, borderInlineEndWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderBlockEndStyle, borderBlockStartStyle, borderInlineEndStyle, borderBottomStyle, borderInlineStartStyle, borderLeftStyle, borderRightStyle, borderTopStyle, borderStyle, borderBlockStartColor, borderBlockEndColor, borderBottomColor, borderInlineStartColor, borderInlineEndColor, borderLeftColor, borderRightColor, borderTopColor, borderBox, contentBox, border, border2, border3, borderTop, borderTop2, borderTop3, borderBottom, borderBottom2, borderBottom3, borderLeft, borderLeft2, borderLeft3, borderRight, borderRight2, borderRight3, borderBlockEnd, borderBlockEnd2, borderBlockEnd3, borderBlockStart, borderBlockStart2, borderBlockStart3, borderInlineEnd, borderInlineEnd2, borderInlineEnd3, borderInlineStart, borderInlineStart2, borderInlineStart3, borderImageOutset, borderImageOutset2, borderImageOutset3, borderImageOutset4, borderImageWidth, borderImageWidth2, borderImageWidth3, borderImageWidth4, scroll, visible, block, inlineBlock, inline, none, auto, inherit, initial, unset, noWrap, static, fixed, sticky, relative, absolute, position, top, bottom, middle, baseline, sub, super, textTop, textBottom, after, before, firstLetter, firstLine, selection, active, any, checked, dir, disabled, empty, enabled, first, firstChild, firstOfType, fullscreen, focus, hover, indeterminate, invalid, lang, lastChild, lastOfType, link, nthChild, nthLastChild, nthLastOfType, nthOfType, onlyChild, onlyOfType, optional, outOfRange, readWrite, required, root, scope, target, valid, hidden, wavy, dotted, dashed, double, groove, ridge, inset, outset, blink, thin, medium, thick, matrix, matrix3d, perspective, rotate3d, rotateX, rotateY, rotateZ, scale, scale2, scale3d, scaleX, scaleY, skew, skew2, skewX, skewY, translate, translate2, translate3d, translateX, translateY, translateZ, rotate, fillBox, viewBox, flat, preserve3d, deg, rad, grad, turn, flex, flex2, flex3, flexBasis, flexDirection, flexFlow1, flexFlow2, flexGrow, flexShrink, flexWrap, order, alignItems, alignSelf, content, wrapReverse, wrap, flexStart, flexEnd, stretch, row, rowReverse, column, columnReverse, lineHeight, fontFace, fontFamily, fontSize, fontStyle, fontWeight, fontVariant, fontVariant2, fontVariant3, fontVariantLigatures, fontVariantCaps, fontVariantNumeric, fontVariantNumeric2, fontVariantNumeric3, serif, sansSerif, monospace, cursive, fantasy, xxSmall, xSmall, small, large, xLarge, xxLarge, smaller, larger, normal, italic, oblique, bold, lighter, bolder, smallCaps, allSmallCaps, petiteCaps, allPetiteCaps, unicase, titlingCaps, commonLigatures, noCommonLigatures, discretionaryLigatures, noDiscretionaryLigatures, historicalLigatures, noHistoricalLigatures, contextual, noContextual, liningNums, oldstyleNums, proportionalNums, tabularNums, diagonalFractions, stackedFractions, ordinal, slashedZero, screen, print, projection, tv, src, qt, fontFamilies, fontVariantNumerics) where +module Css (compile, Stylesheet, Snippet, Mixin, Color, stylesheet, each, media, withMedia, withClass, children, descendants, adjacentSiblings, generalSiblings, mixin, all, property, selector, important, (#), (.), (|*|), (|+|), (|-|), (|/|), transformStyle, eachLine, transformBox, transform, transforms, currentColor, underline, overline, lineThrough, textDecoration, textDecoration2, textDecoration3, textDecorations, textDecorations2, textDecorations3, textDecorationLine, textDecorationLines, textDecorationStyle, capitalize, uppercase, lowercase, fullWidth, hanging, textIndent, textIndent2, textIndent3, ellipsis, clip, textOverflow, optimizeSpeed, optimizeLegibility, geometricPrecision, textRendering, textTransform, textShadow, textShadow2, textShadow3, textShadow4, textAlign, textAlignLast, left, right, center, textJustify, justifyAll, start, end, matchParent, true, verticalAlign, display, opacity, minContent, maxContent, fitContent, fillAvailable, width, minWidth, maxWidth, height, minHeight, maxHeight, padding, padding2, padding3, padding4, paddingTop, paddingBottom, paddingRight, paddingLeft, paddingBlockStart, paddingBlockEnd, paddingInlineStart, paddingInlineEnd, margin, margin2, margin3, margin4, marginTop, marginBottom, marginRight, marginLeft, marginBlockStart, marginBlockEnd, marginInlineStart, marginInlineEnd, boxSizing, overflow, overflowX, overflowY, whiteSpace, backgroundColor, color, solid, transparent, rgb, rgba, hsl, hsla, hex, zero, pct, px, em, pt, ex, ch, rem, vh, vw, vmin, vmax, mm, cm, inches, pc, int, float, borderColor, borderColor2, borderColor3, borderColor4, borderBottomLeftRadius, borderBottomLeftRadius2, borderBottomRightRadius, borderBottomRightRadius2, borderTopLeftRadius, borderTopLeftRadius2, borderTopRightRadius, borderTopRightRadius2, borderRadius, borderRadius2, borderRadius3, borderRadius4, borderBottomWidth, borderInlineEndWidth, borderLeftWidth, borderRightWidth, borderTopWidth, borderBlockEndStyle, borderBlockStartStyle, borderInlineEndStyle, borderBottomStyle, borderInlineStartStyle, borderLeftStyle, borderRightStyle, borderTopStyle, borderStyle, borderBlockStartColor, borderBlockEndColor, borderBottomColor, borderInlineStartColor, borderInlineEndColor, borderLeftColor, borderRightColor, borderTopColor, borderBox, contentBox, border, border2, border3, borderTop, borderTop2, borderTop3, borderBottom, borderBottom2, borderBottom3, borderLeft, borderLeft2, borderLeft3, borderRight, borderRight2, borderRight3, borderBlockEnd, borderBlockEnd2, borderBlockEnd3, borderBlockStart, borderBlockStart2, borderBlockStart3, borderInlineEnd, borderInlineEnd2, borderInlineEnd3, borderInlineStart, borderInlineStart2, borderInlineStart3, borderImageOutset, borderImageOutset2, borderImageOutset3, borderImageOutset4, borderImageWidth, borderImageWidth2, borderImageWidth3, borderImageWidth4, scroll, visible, block, inlineBlock, inline, none, auto, inherit, initial, unset, noWrap, static, fixed, sticky, relative, absolute, position, top, bottom, middle, baseline, sub, super, textTop, textBottom, after, before, firstLetter, firstLine, selection, active, any, checked, dir, disabled, empty, enabled, first, firstChild, firstOfType, fullscreen, focus, hover, indeterminate, invalid, lang, lastChild, lastOfType, link, nthChild, nthLastChild, nthLastOfType, nthOfType, onlyChild, onlyOfType, optional, outOfRange, readWrite, required, root, scope, target, valid, hidden, wavy, dotted, dashed, double, groove, ridge, inset, outset, blink, thin, medium, thick, matrix, matrix3d, perspective, rotate3d, rotateX, rotateY, rotateZ, scale, scale2, scale3d, scaleX, scaleY, skew, skew2, skewX, skewY, translate, translate2, translate3d, translateX, translateY, translateZ, rotate, fillBox, viewBox, flat, preserve3d, deg, rad, grad, turn, flex, flex2, flex3, flexBasis, flexDirection, flexFlow1, flexFlow2, flexGrow, flexShrink, flexWrap, order, alignItems, alignSelf, content, wrapReverse, wrap, flexStart, flexEnd, stretch, row, rowReverse, column, columnReverse, lineHeight, fontFace, fontFamily, fontSize, fontStyle, fontWeight, fontVariant, fontVariant2, fontVariant3, fontVariantLigatures, fontVariantCaps, fontVariantNumeric, fontVariantNumeric2, fontVariantNumeric3, serif, sansSerif, monospace, cursive, fantasy, xxSmall, xSmall, small, large, xLarge, xxLarge, smaller, larger, normal, italic, oblique, bold, lighter, bolder, smallCaps, allSmallCaps, petiteCaps, allPetiteCaps, unicase, titlingCaps, commonLigatures, noCommonLigatures, discretionaryLigatures, noDiscretionaryLigatures, historicalLigatures, noHistoricalLigatures, contextual, noContextual, liningNums, oldstyleNums, proportionalNums, tabularNums, diagonalFractions, stackedFractions, ordinal, slashedZero, screen, print, projection, tv, src, qt, fontFamilies, fontVariantNumerics, name, url) where {-| Functions for building stylesheets. @@ -39,8 +39,8 @@ module Css (compile, Stylesheet, Snippet, Mixin, Color, stylesheet, each, media, # Media Queries @docs screen, print, tv, projection -# Source -@docs src +# Sources +@docs src, name, url # Quoting @docs qt @@ -57,7 +57,7 @@ deprecated or discouraged. import Css.Helpers exposing (toCssIdentifier, identifierToString) import Css.Preprocess.Resolve as Resolve import Css.Preprocess as Preprocess exposing (Mixin, unwrapSnippet) -import Css.Structure as Structure exposing (MediaQuery(MediaQuery)) +import Css.Structure as Structure exposing (MediaQuery(MediaQuery), NameOrUrl) import String @@ -88,6 +88,26 @@ type PseudoElement = PseudoElement String (List Mixin) +{-| Named location or uri. +-} + + + +-- type NameOrUrl +-- = Name Structure.Name +-- | Url Structure.Url + + +name : String -> NameOrUrl +name nm = + Structure.Name nm + + +url : String -> NameOrUrl +url url = + Structure.Url url + + {-| -} screen : MediaQuery screen = diff --git a/src/Css/Preprocess.elm b/src/Css/Preprocess.elm index 82dd50d5..81a34307 100644 --- a/src/Css/Preprocess.elm +++ b/src/Css/Preprocess.elm @@ -4,7 +4,7 @@ module Css.Preprocess (..) where the data structures found in this module. -} -import Css.Structure as Structure exposing (mapLast, concatMapLast) +import Css.Structure as Structure exposing (mapLast, concatMapLast, NameOrUrl) stylesheet : List Snippet -> Stylesheet @@ -26,7 +26,7 @@ type alias Property = type alias Stylesheet = { charset : Maybe String - , imports : List ( String, List Structure.MediaQuery ) + , imports : List ( NameOrUrl, List Structure.MediaQuery ) , namespaces : List ( String, String ) , snippets : List Snippet } diff --git a/src/Css/Structure.elm b/src/Css/Structure.elm index d8d50ad0..eef1fb18 100644 --- a/src/Css/Structure.elm +++ b/src/Css/Structure.elm @@ -25,7 +25,7 @@ are specified once rather than intermingled with normal declarations: -} type alias Stylesheet = { charset : Maybe String - , imports : List ( String, List MediaQuery ) + , imports : List ( NameOrUrl, List MediaQuery ) , namespaces : List ( String, String ) , declarations : List Declaration } @@ -65,6 +65,13 @@ type StyleBlock = StyleBlock Selector (List Selector) (List Property) +{-| Named location or uri. +-} +type NameOrUrl + = Name String + | Url String + + {-| A media query. -} type MediaQuery diff --git a/src/Css/Structure/Output.elm b/src/Css/Structure/Output.elm index d146f650..388f3308 100644 --- a/src/Css/Structure/Output.elm +++ b/src/Css/Structure/Output.elm @@ -22,10 +22,25 @@ charsetToString charset = |> Maybe.withDefault "" -importToString : ( String, List MediaQuery ) -> String +importToString : ( NameOrUrl, List MediaQuery ) -> String importToString ( name, mediaQueries ) = - -- TODO - "@import \"" ++ name ++ toString mediaQueries ++ "\"" + let + toMq query = + String.join ", " + <| List.map + (\q -> + case q of + MediaQuery mq -> + mq + ) + query + in + case name of + Name nm -> + "@import \"" ++ nm ++ "\" " ++ toMq mediaQueries + + Url url -> + "@import url(\"" ++ url ++ "\") " ++ toMq mediaQueries namespaceToString : ( String, String ) -> String diff --git a/test/Fixtures.elm b/test/Fixtures.elm index 64a9b535..1081887f 100644 --- a/test/Fixtures.elm +++ b/test/Fixtures.elm @@ -305,3 +305,20 @@ fontWeightWarning : Stylesheet fontWeightWarning = (stylesheet << namespace "fontWeightWarning") [ body [ fontWeight (int 22) ] ] + + +importStylesheet : Stylesheet +importStylesheet = + let + style = + (stylesheet << namespace "importStylesheet") + [] + in + { style + | imports = + [ ( url + "https://fonts.googleapis.com/css?family=Open+Sans" + , [ screen, print ] + ) + ] + } diff --git a/test/Tests.elm b/test/Tests.elm index c9df5108..f701f726 100644 --- a/test/Tests.elm +++ b/test/Tests.elm @@ -28,6 +28,7 @@ all = , transformsStyle , fonts , weightWarning + , imports , Properties.all ] @@ -455,7 +456,25 @@ weightWarning = fontWeight 22 is invalid. Valid weights are: 100, 200, 300, 400, 500, 600, 700, 800, 900. Please see https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Values""" in suite - "fontWeightWarning" + "Invalid font weight warning" + [ test "pretty prints the expected output" + <| assertEqual (outdented output) (outdented (prettyPrint input)) + ] + + +imports : Test +imports = + let + input = + Fixtures.importStylesheet + + output = + """ + @import url("https://fonts.googleapis.com/css?family=Open+Sans") screen, print + """ + in + suite + "import stylesheet" [ test "pretty prints the expected output" <| assertEqual (outdented output) (outdented (prettyPrint input)) ]