trmnl_preview 0.27.0 → 0.28.0

data/db/data/framework_prefixes.yml

@@ -1,5 +1,6 @@
-# Mirrored from each Framework release's plugins.css: the screen prefixes it defines for
-# value--, label--, title--, description--, text-- and content-- classes, and the classes each
+# Mirrored from each Framework release's plugins.css: the screen prefixes it defines for the
+# value, label, title, description and content elements and their value--, label--, title--,
+# description--, text-- and content-- classes, and the classes each
 # covers: every class in a family (`all`), all `except` some, or `only` some. A list holds
 # until the next release listed.
 # Refresh with `rake framework:classes` — do not edit manually.
@@ -14,6 +15,7 @@
   families:
     label:
       except:
+      - label
       - label--gray-out
       - label--underline-2
     text: all
@@ -23,6 +25,7 @@
   families:
     label:
       except:
+      - label
       - label--gray-out
       - label--underline-2
     text:
@@ -75,6 +78,7 @@
   families:
     label:
       except:
+      - label
       - label--gray
       - label--underline-2
     text:
@@ -95,6 +99,7 @@
   families:
     label:
       except:
+      - label
       - label--gray
       - label--underline-2
     text: all
@@ -105,29 +110,26 @@
   - 2bit
   - 4bit
   - landscape
-  - lg
-  - lg:landscape
-  - lg:portrait
-  - md
-  - md:landscape
-  - md:portrait
   - portrait
-  - sm
-  - sm:landscape
-  - sm:portrait
   families:
     content:
       except:
+      - content
       - content--center
       - content--left
       - content--right
-    description: all
+    description:
+      except:
+      - description
     label:
       except:
+      - label
       - label--gray-out
       - label--underline-2
     text: all
-    title: all
+    title:
+      except:
+      - title
     value: all
 - prefixes:
   - 3bit
@@ -175,19 +177,54 @@
   families:
     content:
       except:
+      - content
       - content--center
       - content--left
       - content--right
-    description: all
+    description:
+      except:
+      - description
     label:
       except:
+      - label
       - label--gray-out
       - label--underline-2
     text:
       except:
       - text--black
       - text--white
-    title: all
+    title:
+      except:
+      - title
+    value: all
+- prefixes:
+  - lg
+  - lg:landscape
+  - lg:portrait
+  - md
+  - md:landscape
+  - md:portrait
+  - sm
+  - sm:landscape
+  - sm:portrait
+  families:
+    content:
+      except:
+      - content--center
+      - content--left
+      - content--right
+    description:
+      except:
+      - description
+    label:
+      except:
+      - label
+      - label--gray-out
+      - label--underline-2
+    text: all
+    title:
+      except:
+      - title
     value: all
 3.0.0:
 - prefixes:
@@ -239,12 +276,16 @@
   families:
     content:
       except:
+      - content
       - content--center
       - content--left
       - content--right
-    description: all
+    description:
+      except:
+      - description
     label:
       except:
+      - label
       - label--gray-out
       - label--inverted
       - label--underline-2
@@ -254,7 +295,9 @@
       - text--justify
       - text--left
       - text--right
-    title: all
+    title:
+      except:
+      - title
     value: all
 - prefixes:
   - dark
@@ -329,13 +372,35 @@
       - text--right
 - prefixes:
   - landscape
+  - portrait
+  families:
+    content:
+      except:
+      - content
+      - content--center
+      - content--left
+      - content--right
+    description:
+      except:
+      - description
+    label:
+      except:
+      - label
+      - label--gray-out
+      - label--inverted
+      - label--underline-2
+    text: all
+    title:
+      except:
+      - title
+    value: all
+- prefixes:
   - lg
   - lg:landscape
   - lg:portrait
   - md
   - md:landscape
   - md:portrait
-  - portrait
   - sm
   - sm:landscape
   - sm:portrait
@@ -345,14 +410,19 @@
       - content--center
       - content--left
       - content--right
-    description: all
+    description:
+      except:
+      - description
     label:
       except:
+      - label
       - label--gray-out
       - label--inverted
       - label--underline-2
     text: all
-    title: all
+    title:
+      except:
+      - title
     value: all
 3.0.4:
 - prefixes:
@@ -404,12 +474,16 @@
   families:
     content:
       except:
+      - content
       - content--center
       - content--left
       - content--right
-    description: all
+    description:
+      except:
+      - description
     label:
       except:
+      - label
       - label--gray-out
       - label--inverted
       - label--underline-2
@@ -429,7 +503,9 @@
       - text--xlarge
       - text--xxlarge
       - text--xxxlarge
-    title: all
+    title:
+      except:
+      - title
     value: all
 - prefixes:
   - dark
@@ -515,13 +591,35 @@
       - text--right
 - prefixes:
   - landscape
+  - portrait
+  families:
+    content:
+      except:
+      - content
+      - content--center
+      - content--left
+      - content--right
+    description:
+      except:
+      - description
+    label:
+      except:
+      - label
+      - label--gray-out
+      - label--inverted
+      - label--underline-2
+    text: all
+    title:
+      except:
+      - title
+    value: all
+- prefixes:
   - lg
   - lg:landscape
   - lg:portrait
   - md
   - md:landscape
   - md:portrait
-  - portrait
   - sm
   - sm:landscape
   - sm:portrait
@@ -531,14 +629,19 @@
       - content--center
       - content--left
       - content--right
-    description: all
+    description:
+      except:
+      - description
     label:
       except:
+      - label
       - label--gray-out
       - label--inverted
       - label--underline-2
     text: all
-    title: all
+    title:
+      except:
+      - title
     value: all
 3.0.5:
 - prefixes:
@@ -590,12 +693,16 @@
   families:
     content:
       except:
+      - content
       - content--center
       - content--left
       - content--right
-    description: all
+    description:
+      except:
+      - description
     label:
       except:
+      - label
       - label--gray-out
       - label--inverted
       - label--underline-2
@@ -604,7 +711,9 @@
       - text--default
       - text--inverse
       - text--muted
-    title: all
+    title:
+      except:
+      - title
     value: all
 - prefixes:
   - dark
@@ -699,13 +808,35 @@
       - text--xxxlarge
 - prefixes:
   - landscape
+  - portrait
+  families:
+    content:
+      except:
+      - content
+      - content--center
+      - content--left
+      - content--right
+    description:
+      except:
+      - description
+    label:
+      except:
+      - label
+      - label--gray-out
+      - label--inverted
+      - label--underline-2
+    text: all
+    title:
+      except:
+      - title
+    value: all
+- prefixes:
   - lg
   - lg:landscape
   - lg:portrait
   - md
   - md:landscape
   - md:portrait
-  - portrait
   - sm
   - sm:landscape
   - sm:portrait
@@ -715,14 +846,19 @@
       - content--center
       - content--left
       - content--right
-    description: all
+    description:
+      except:
+      - description
     label:
       except:
+      - label
       - label--gray-out
       - label--inverted
       - label--underline-2
     text: all
-    title: all
+    title:
+      except:
+      - title
     value: all
 - prefixes:
   - lg:3bit
@@ -798,12 +934,16 @@
   families:
     content:
       except:
+      - content
       - content--center
       - content--left
       - content--right
-    description: all
+    description:
+      except:
+      - description
     label:
       except:
+      - label
       - label--gray-out
       - label--inverted
       - label--underline-2
@@ -823,7 +963,9 @@
       - text--xlarge
       - text--xxlarge
       - text--xxxlarge
-    title: all
+    title:
+      except:
+      - title
     value: all
 - prefixes:
   - dark
@@ -909,13 +1051,35 @@
       - text--right
 - prefixes:
   - landscape
+  - portrait
+  families:
+    content:
+      except:
+      - content
+      - content--center
+      - content--left
+      - content--right
+    description:
+      except:
+      - description
+    label:
+      except:
+      - label
+      - label--gray-out
+      - label--inverted
+      - label--underline-2
+    text: all
+    title:
+      except:
+      - title
+    value: all
+- prefixes:
   - lg
   - lg:landscape
   - lg:portrait
   - md
   - md:landscape
   - md:portrait
-  - portrait
   - sm
   - sm:landscape
   - sm:portrait
@@ -925,14 +1089,19 @@
       - content--center
       - content--left
       - content--right
-    description: all
+    description:
+      except:
+      - description
     label:
       except:
+      - label
       - label--gray-out
       - label--inverted
       - label--underline-2
     text: all
-    title: all
+    title:
+      except:
+      - title
     value: all
 3.1.1:
 - prefixes:
@@ -984,12 +1153,16 @@
   families:
     content:
       except:
+      - content
       - content--center
       - content--left
       - content--right
-    description: all
+    description:
+      except:
+      - description
     label:
       except:
+      - label
       - label--gray-out
       - label--inverted
       - label--underline-2
@@ -998,7 +1171,9 @@
       - text--default
       - text--inverse
       - text--muted
-    title: all
+    title:
+      except:
+      - title
     value: all
 - prefixes:
   - dark
@@ -1093,13 +1268,35 @@
       - text--xxxlarge
 - prefixes:
   - landscape
+  - portrait
+  families:
+    content:
+      except:
+      - content
+      - content--center
+      - content--left
+      - content--right
+    description:
+      except:
+      - description
+    label:
+      except:
+      - label
+      - label--gray-out
+      - label--inverted
+      - label--underline-2
+    text: all
+    title:
+      except:
+      - title
+    value: all
+- prefixes:
   - lg
   - lg:landscape
   - lg:portrait
   - md
   - md:landscape
   - md:portrait
-  - portrait
   - sm
   - sm:landscape
   - sm:portrait
@@ -1109,14 +1306,19 @@
       - content--center
       - content--left
       - content--right
-    description: all
+    description:
+      except:
+      - description
     label:
       except:
+      - label
       - label--gray-out
       - label--inverted
       - label--underline-2
     text: all
-    title: all
+    title:
+      except:
+      - title
     value: all
 - prefixes:
   - lg:3bit
@@ -1194,13 +1396,20 @@
   families:
     content:
       except:
+      - content
       - content--center
       - content--left
       - content--right
-    description: all
-    label: all
+    description:
+      except:
+      - description
+    label:
+      except:
+      - label
     text: all
-    title: all
+    title:
+      except:
+      - title
     value: all
 - prefixes:
   - dark

data/lib/trmnlp/browser_pool.rb

@@ -9,8 +9,6 @@ module TRMNLP
       @available = Queue.new
       @mutex = Mutex.new
       @shutdown = false
-
-      at_exit { shutdown }
     end
 
     def with_driver

data/lib/trmnlp/firefox_driver.rb

@@ -10,10 +10,18 @@ module TRMNLP
 
     def build
       Selenium::WebDriver.for(:firefox, options:).tap do |driver|
+        # Exit hooks run newest first, so this quits Firefox before Selenium's hook stops geckodriver and orphans it.
+        at_exit { quit(driver) }
         driver.manage.window.maximize
       end
     end
 
+    def quit(driver)
+      driver.quit
+    rescue StandardError
+      nil
+    end
+
     def options
       Selenium::WebDriver::Firefox::Options.new(web_socket_url: true).tap do |opts|
         opts.add_argument('--headless')

data/lib/trmnlp/lint/checks/arbitrary_values_in_range.rb

@@ -7,7 +7,8 @@ module TRMNLP
     module Checks
       # Reports bracketed Framework classes the Framework never generates, one
       # finding per class. They match no rule, so they do nothing, and nothing
-      # says so: `lg:w--[192px]` leaves the element at its smaller width.
+      # says so: `lg:w--[192px]` leaves the element at its smaller width, and
+      # `mt--[2px]` or `w--[40%]` leave it where it was.
       #
       # The ranges mirror the loops in the Framework's utilities/_size.scss,
       # _gap.scss and _rounded.scss, and hold for every 3.x release's
@@ -24,6 +25,11 @@ module TRMNLP
           [family, { 'px' => 128, (family.start_with?('w') ? 'cqw' : 'cqh') => 100 }]
         end.merge('gap--' => { 'px' => 50 }, 'rounded--' => { 'px' => 50 }).freeze
 
+        # Margin and padding come only in spacing steps (`mt--1` is 4px), never
+        # in brackets, in every 3.x release.
+        SPACING_FAMILIES = %w[m mt mr mb ml mx my p pt pr pb pl px py].map { "#{it}--" }.freeze
+        SPACING_LEARN_MORE = 'https://trmnl.com/framework/docs/spacing'
+
         # `gap--[Npx]` and `rounded--[Npx]` exist only without a screen prefix.
         PREFIXABLE = SIZE_FAMILIES
 
@@ -33,8 +39,8 @@ module TRMNLP
         PATTERN = /
           (?<![\w:-])
           (?<prefix>(?:[a-z0-9-]+:)*)
-          (?<family>w--min-|w--max-|h--min-|h--max-|w--|h--|gap--|rounded--)
-          \[(?<value>[\d.]+)(?<unit>[a-z]+)\]
+          (?<family>w--min-|w--max-|h--min-|h--max-|w--|h--|gap--|rounded--|[mp][trblxy]?--)
+          \[(?<value>[\d.]+)(?<unit>[a-z%]+)\]
         /x
 
         def issues
@@ -42,6 +48,8 @@ module TRMNLP
 
           source.all_markup.scan(PATTERN).uniq.filter_map do |prefix, family, value, unit|
             css_class = "#{prefix}#{family}[#{value}#{unit}]"
+            next spacing_issue(css_class, family) if SPACING_FAMILIES.include?(family)
+
             reason = problem(prefix, family, value, unit)
             { message: "'#{css_class}' has no effect: #{reason}." } if reason
           end
@@ -51,6 +59,12 @@ module TRMNLP
 
         def version = @version ||= Gem::Version.new(source.framework_version.number)
 
+        def spacing_issue(css_class, family)
+          { message: "'#{css_class}' has no effect: the Framework has no bracket values for '#{family}', " \
+                     "only spacing steps such as '#{family}1' for 4px.",
+            learn_more: SPACING_LEARN_MORE }
+        end
+
         def problem(prefix, family, value, unit)
           max = RANGES.dig(family, unit)
           return "the Framework has no '#{unit}' values for '#{family}'" unless max

data/lib/trmnlp/lint/checks/framework_prefixes_exist.rb

@@ -9,10 +9,11 @@ module TRMNLP
   module Lint
     module Checks
       # Reports a Framework class behind screen prefixes that the plugin's release does not
-      # define for it, such as `xl:value--large` or `dark:value--large`. The class matches no
-      # rule, so it does nothing. Classes the release lacks entirely are left to FrameworkClassesExist.
+      # define for it, such as `xl:value--large`, `dark:value--large` or `lg:title`. The class
+      # matches no rule, so it does nothing. Classes the release lacks entirely are left to
+      # FrameworkClassesExist.
       class FrameworkPrefixesExist < Check
-        PREFIXED_PATTERN = /\A(?<prefix>.+):(?<name>(?:value|label|title|description|text|content)--.+)\z/
+        PREFIXED_PATTERN = /\A(?<prefix>.+):(?<name>(?:value|label|title|description|text|content)(?:--.+)?)\z/
         DATA_PATH = File.expand_path('../../../../db/data/framework_prefixes.yml', __dir__)
         LEARN_MORE = 'https://trmnl.com/framework/docs/responsive'
 
@@ -42,7 +43,9 @@ module TRMNLP
 
         def reason(prefix, name)
           version = "Framework v#{source.framework_version}"
-          return "#{name} has no '#{prefix}:' variant in #{version}." if families_by_prefix.key?(prefix)
+          if families_by_prefix.key?(prefix)
+            return "#{name} has no '#{prefix}:' variant in #{version}.#{base_size_hint(prefix, name)}"
+          end
 
           reordered = families_by_prefix.keys.find do |known|
             known.split(':').sort == prefix.split(':').sort && covers?(known, name)
@@ -52,6 +55,13 @@ module TRMNLP
           "#{version} has no '#{prefix}:' prefix."
         end
 
+        # A bare element such as `title` can lack a prefix that its sizes have: `lg:title--base`
+        # is the base size on large screens.
+        def base_size_hint(prefix, name)
+          base = "#{name}--base"
+          " Use '#{prefix}:#{base}' for its base size." if !name.include?('--') && covers?(prefix, base)
+        end
+
         # A family is covered as `all` its classes, all `except` some, or `only` some.
         def covers?(prefix, name)
           coverage = families_by_prefix.dig(prefix, name.split('--').first)