Fable.ShadowStyles 1.0.0-beta-002

This is a prerelease version of Fable.ShadowStyles.
Install-Package Fable.ShadowStyles -Version 1.0.0-beta-002
dotnet add package Fable.ShadowStyles --version 1.0.0-beta-002
<PackageReference Include="Fable.ShadowStyles" Version="1.0.0-beta-002" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add Fable.ShadowStyles --version 1.0.0-beta-002
The NuGet Team does not provide support for this client. Please contact its maintainers for support.
#r "nuget: Fable.ShadowStyles, 1.0.0-beta-002"
#r directive can be used in F# Interactive, C# scripting and .NET Interactive. Copy this into the interactive tool or source code of the script to reference the package.
// Install Fable.ShadowStyles as a Cake Addin
#addin nuget:?package=Fable.ShadowStyles&version=1.0.0-beta-002&prerelease

// Install Fable.ShadowStyles as a Cake Tool
#tool nuget:?package=Fable.ShadowStyles&version=1.0.0-beta-002&prerelease
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

ShadowStyles

Powered by Feliz.Engine

Shadow Styles is a constructable stylesheets F# wrapper that enables you to add styles to your Fable apps that generate Custom Elements or even Web components like lit-html + Fable.Haunted and in the future Sutil + Fable.Haunted.

CSS in F#

constructable stylesheets (along with css module imports spec) try to solve the css in js dilema, while shadow DOM solves encapsulation, it makes it hard to share styles hence why we'd like to use something like constructable stylesheets

Usage Example

Here we'll use Fable.Haunted and lit-html to define a web component (i.e a custom element with a shadow root) we'll add a stylesheet to the current document and a local stylesheet to the flit-app web component

NOTE: For Safari and Firefox a polyfill is required

<script src="https://unpkg.com/construct-style-sheets-polyfill"></script>
module Main

open Browser.Dom
open Lit
open Haunted
open Fable.Core.JsInterop

open ShadowStyles
open ShadowStyles.Types
open ShadowStyles.Operators

// note we use SCss to prevent colisions with things like Fable.Lit Css

let globalStyles =
  [ "html, body"
    => [ SCss.padding 0
         SCss.margin 0
         SCss.fontFamily
           "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif" ]
    "body" => [ SCss.color "blue" ] ]

/// the `=>` operator is a proxy for: `CSSRule(selector, cssPropertySequence)`

// these get applied to the whole document (false means we're not using shadowDOM)
ShadowStyles.adoptStyleSheet (document, globalStyles, false)

let myComponent () =
  // with Haunted, the functions are binded to the HTML element they are assigned
  let host = jsThis
  // which helps us get a reference to the element's shadow root

  let localStyles =
    // while classes are not required because inside
    // shadow DOM element styles are isolated
    // we'll use it for ilustration purposes
    [ ".my-rule"
      => [ SCss.displayFlex
           SCss.alignContentCenter
           SCss.color "red" ] ]

  // the following function call applies multiple (and local) styles to the host even in shadowDOM
  // let existingGlobalStyles = document?adoptedStyleSheets
  // ShadowStyles.adoptStyleSheets (host, existingGlobalStyles, localStyles)

  // this applies a single style to the host in shadowDOM
  ShadowStyles.adoptStyleSheet (host, localStyles)

  html
    $"""
    <div class="my-rule">
      <h1>Hello, World!</h1>
    </div>
  """

defineComponent
  "flit-app"
  (Haunted.Component(myComponent, {| useShadowDOM = true |}))
<!DOCTYPE html>
<html>
  <head>
    <title>Lit + Fable Template</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link rel="shortcut icon" href="fable.ico" />
    
    <script src="https://unpkg.com/construct-style-sheets-polyfill"></script>
  </head>
  <body>
    <div>outside flit-app!</div>
    <flit-app></flit-app>
    <script type="module" src="/dist/Main.fs.js"></script>
  </body>
</html>

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

Version Downloads Last updated
1.0.0-beta-002 50 9/1/2021
1.0.0-beta-001 29 8/30/2021