Merge pull request #94 from oddbird/modules

Modules

.github/workflows/test.yml

@@ -5,17 +5,13 @@ on:
 
 jobs:
   test:
-    name: Node ${{ matrix.node }}
+    name: Sass
     runs-on: ubuntu-latest
-    strategy:
-      fail-fast: false
-      matrix:
-        node: ['14']
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: ${{ matrix.node }}
+          node-version: 'lts/*'
           cache: yarn
       - run: yarn install --frozen-lockfile
       - run: yarn test
@@ -27,7 +23,7 @@ jobs:
       - uses: actions/checkout@v2
       - uses: actions/setup-node@v2
         with:
-          node-version: '14'
+          node-version: 'lts/*'
           cache: yarn
       - run: yarn install --frozen-lockfile
-      - run: yarn lint
+      - run: yarn lint:ci

.gitignore

@@ -1,5 +1,6 @@
 **/.DS_Store
+*.log
 .sass-cache
 .vscode
+docs
 node_modules
-.nvmrc

.nvmrc

@@ -0,0 +1 @@
+v16.13.0

.prettierignore

@@ -0,0 +1,7 @@
+!.*
+.git/
+.vscode/
+.yarn/
+.yarnrc
+docs/
+node_modules/

.prettierrc

@@ -0,0 +1,2 @@
+singleQuote: true
+trailingComma: all

.sassdocrc

@@ -1,72 +1,65 @@
 theme: herman
 dest: docs/
-src: sass/
 
 display:
   access:
     - public
 
 groups:
-  'Core (API)':
-    core: 'QuickStart: Core'
-    core-get: 'Token Maps'
-    core-vars: 'Tokens » CSS Variables'
-    core-ratio: 'Ratios & Modular Scales'
-    core-ratio-vars: 'Ratios » CSS Variables'
-  'Core (Utilities)':
-    core-register: 'Function Registration'
-    core-math: 'Math Functions'
-    core-lists: 'List Functions'
-    core-strings: 'String Functions'
-    core-inspect: 'Inspecting Tokens'
-  'Init (Normalization)':
-    init: 'QuickStart: Init'
-    init-root: 'General'
-    init-a11y: 'Accessibility'
-    init-forms: 'Forms'
-    init-media: 'Media'
-    init-type: 'Type'
-  'Plugin/Animate':
+  'Utilities':
+    utils: 'Sass Maps, Lists, & Strings'
+    vars: 'CSS Custom Properties'
+  'Tokens':
+    tokens: 'QuickStart: Tokens'
+    token-config: 'Tokens Configuration'
+    token-api: 'Accessing Tokens'
+    token-compile: 'Compiling Token Maps'
+    token-inspect: 'Inspecting Tokens'
+    token-register: 'Function Registration'
+    token-internal: 'Pre-Registered Functions'
+    token-vars: 'Tokens » Custom Properties'
+  'Ratios':
+    ratio-tokens: Ratio Tokens
+    ratios: Built-In Ratios
+    ratio-vars: Ratio Tokens » CSS Variables
+  'Animate':
     animate: 'QuickStart: Animate'
     animate-times: 'Timing Maps'
     animate-time-vars: 'Times » CSS Variables'
     animate-ease: 'Easing Maps'
     animate-ease-vars: 'Easing » CSS Variables'
     animate-change: 'Combined "Change" Maps'
     animate-change-vars: 'Changes » CSS Variables'
-  'Plugin/Color':
+  'Color':
     color: 'QuickStart: Color'
-    color-api: 'Color Maps'
-    color-vars: 'Colors » CSS Variables'
+    color-config: 'Color Configuration'
     color-contrast: 'Contrast & Accessibility'
     color-utils: 'Adjustments'
     color-themes: 'Themes'
-  'Plugin/Layout':
+    color-tokens: 'Color Tokens'
+    color-vars: 'Color Tokens » CSS Variables'
+  'Layout':
     layout: 'QuickStart: Layout'
     layout-queries: 'Media Breakpoint Maps'
     layout-query-vars: 'Breakpoints » CSS Variables'
-    layout-box: 'Box-Sizing'
-    layout-clearfix: 'Clearfix'
-    layout-position: 'Positioning'
-    layout-ratios: 'Fluid Ratios'
     layout-z-index: 'Z-Index'
-  'Plugin/Scale':
+  'Scale':
     scale: 'QuickStart: Scale'
     scale-sizes: 'Size Maps'
     scale-vars: 'Sizes » CSS Variables'
     scale-units: 'Unit Conversion'
-  'Plugin/Type':
+  'Type':
     type: 'QuickStart: Type'
     type-fonts: 'Font Maps'
     type-font-vars: 'Fonts » CSS Variables'
     type-a11y: 'Accessibility'
     type-pseudo: 'Pseudo Elements'
-
+    type-helpers: 'Type Helpers'
 
 herman:
   sass:
     includePaths: ['sass']
-    includes: ['tools']
+    use: ['tools', 'sass:meta']
   extraDocs:
     - name: 'Changelog'
       path: CHANGELOG.md

.stylelintignore

@@ -0,0 +1,7 @@
+!.*
+.git/
+.vscode/
+.yarn/
+.yarnrc
+docs/
+node_modules/

.stylelintrc.yml

@@ -1,69 +1,40 @@
 # See https://stylelint.io/user-guide/rules/list
 # Also https://github.com/kristerkari/stylelint-scss#list-of-rules
-# -------------------------------------------------------------------------------
 
-extends: stylelint-config-recommended-scss
+extends:
+  - stylelint-config-standard-scss
+  - stylelint-prettier/recommended
+plugins:
+  - stylelint-prettier
 
 rules:
+  # Default rules:
+  #   - https://github.com/stylelint-scss/stylelint-config-standard-scss/blob/main/index.js
+  #   - https://github.com/stylelint-scss/stylelint-config-recommended-scss/blob/master/index.js
+  #   - https://github.com/stylelint/stylelint-config-standard/blob/main/index.js
+  #   - https://github.com/stylelint/stylelint-config-recommended/blob/main/index.js
+  #   - https://github.com/prettier/stylelint-config-prettier/blob/master/src/index.js
+
   # possible errors (these are all on by default)
   no-descending-specificity: null
 
   # limit language features
-  at-rule-no-vendor-prefix: true
+  color-function-notation: null
   color-named: always-where-possible
-  declaration-block-no-redundant-longhand-properties:
-    - true
-    - ignoreShorthands:
-        - grid-template
-  declaration-block-single-line-max-declarations: 1
+  custom-property-pattern: null
   declaration-no-important: true
   function-url-no-scheme-relative: true
-  media-feature-name-no-vendor-prefix: true
-  property-no-vendor-prefix: true
-  selector-max-empty-lines: 0
-  selector-no-vendor-prefix: true
-  shorthand-property-no-redundant-values: true
-  value-no-vendor-prefix: true
+  number-max-precision: null
+  selector-class-pattern: null
 
-  # stylistic issues
-  at-rule-name-case: lower
-  at-rule-name-space-after: always
-  at-rule-semicolon-space-before: never
-  color-hex-case: lower
-  color-hex-length: short
-  comment-whitespace-inside: always
-  declaration-bang-space-after: never
-  declaration-bang-space-before: always
-  font-family-name-quotes: always-unless-keyword
-  font-weight-notation: named-where-possible
-  function-max-empty-lines: 1
-  function-name-case: lower
-  function-url-quotes: always
-  indentation: null
-  length-zero-no-unit: true
-  max-empty-lines: 2
-  media-feature-colon-space-after: always
-  media-feature-colon-space-before: never
-  media-feature-name-case: lower
-  media-feature-parentheses-space-inside: never
-  media-query-list-comma-space-after: always
-  media-query-list-comma-space-before: never
-  no-eol-whitespace: true
-  no-missing-end-of-source-newline: true
-  number-leading-zero: always
-  number-no-trailing-zeros: true
-  property-case: lower
-  selector-attribute-brackets-space-inside: never
-  selector-attribute-quotes: always
-  selector-combinator-space-after: always
-  selector-combinator-space-before: always
-  selector-descendant-combinator-no-non-space: true
-  selector-list-comma-newline-after: always
-  selector-pseudo-class-case: lower
-  selector-pseudo-class-parentheses-space-inside: never
-  selector-pseudo-element-case: lower
-  selector-pseudo-element-colon-notation: double
-  selector-type-case: lower
-  unit-case: lower
-  value-keyword-case: lower
-  value-list-max-empty-lines: 1
+  # Sass
+  scss/at-function-pattern:
+    - '^([_|-]*[a-z][a-z0-9]*)(-[a-z0-9]+)*-*$'
+    - message: 'Expected function to be kebab-case'
+  scss/at-mixin-pattern:
+    - '^([_|-]*[a-z][a-z0-9]*)(-[a-z0-9]+)*-*$'
+    - message: 'Expected mixin to be kebab-case'
+  scss/at-rule-conditional-no-parentheses: null
+  scss/dollar-variable-pattern:
+    - '^([_|-]*[a-z][a-z0-9]*)(-[a-z0-9]+)*-*$'
+    - message: 'Expected variable to be kebab-case'