Merge pull request #25 from design-ops/shared-style-on-modifier

Shared style on modifier

README.md

@@ -24,4 +24,4 @@ This Sketch Assistant is to be used when designing theme files for the Natural D
 
 :point_right: or **copy & paste** the following link into a new browser:
 
-`sketch://add-assistant?url=https://github.com/design-ops/nds-sketch-theme-assistant/releases/download/v1.0.0/nds-sketch-theme-assistant-1.0.0.tgz`
+`sketch://add-assistant?url=https://github.com/design-ops/nds-sketch-theme-assistant/releases/download/v1.0.2/nds-sketch-theme-assistant-1.0.2.tgz`

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nds-sketch-theme-assistant",
   "homepage": "https://github.com/design-ops/nds-sketch-theme-assistant",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "main": "dist/index.js",
   "sketch": "dist/sketch.js",
   "license": "MIT",

src/__tests__/index.test.ts

@@ -70,8 +70,9 @@ test('Modifier structure', async () => {
     "nds-sketch-theme-assistant/modifier-structure"
   )
   expect(violations[0].message).toBe("'background --radius' modifier has too many (2) layers")
-  expect(violations[1].message).toBe("'header/background --radius' modifier requires a single layer")
-  expect(violations).toHaveLength(2)
+  expect(violations[1].message).toBe("'button/background --radius/background' layer is required to have a style attached to it")
+  expect(violations[2].message).toBe("'header/background --radius' modifier requires a single layer")
+  expect(violations).toHaveLength(3)
 })
 
 test('Sync layer styles', async () => {

src/rules/modifier-structure/README.md

@@ -4,6 +4,8 @@
 
 In the Natural Design System modifier symbols are used to apply styles that are not present in the style options. Any modifier used in the theme file is required to contain only one layer.
 
+Furthermore, that single layer is required to have a Shared Style attached to it, otherwise Sketch cannot override it.
+
 ## Configuration
 
 ```js

src/rules/modifier-structure/index.ts

@@ -14,11 +14,17 @@ export const modifierStructure: RuleDefinition = {
           context.utils.report('\'' + symbol.name + '\' modifier requires a single layer', symbol);
         }
 
+        if (numberOfLayers == 1 ) {
+          if (symbol.layers[0].sharedStyleID == null) {
+            context.utils.report('\'' + symbol.name + '/' + symbol.layers[0].name + '\' layer is required to have a style attached to it', symbol);
+          }
+        }
+
       }
     }
 
   },
   name: 'nds-sketch-theme-assistant/modifier-structure',
   title: 'Modifier Structure',
-  description: 'Reports if a modifier has more than one or less than one layer.',
+  description: 'Reports if a modifier has more than one or less than one layer. Also checks if the single layer has a Shared Style.',
 }