Add support for @layer

Author: pvcresin

packages/jss/src/plugins/index.js

@@ -2,6 +2,7 @@ import pluginStyleRule, {StyleRule} from './styleRule'
 import pluginConditionalRule, {ConditionalRule} from './conditionalRule'
 import pluginKeyframesRule, {KeyframesRule} from './keyframesRule'
 import pluginKeyframeRule, {KeyframeRule} from './keyframeRule'
+import pluginLayerRule, {LayerRule} from './layerRule'
 import pluginFontFaceRule, {FontFaceRule} from './fontFaceRule'
 import pluginViewportRule, {ViewportRule} from './viewportRule'
 import pluginSimpleRule, {SimpleRule} from './simpleRule'
@@ -11,6 +12,7 @@ export const plugins = [
   pluginConditionalRule,
   pluginKeyframesRule,
   pluginKeyframeRule,
+  pluginLayerRule,
   pluginFontFaceRule,
   pluginViewportRule,
   pluginSimpleRule
@@ -21,6 +23,7 @@ export {
   ConditionalRule,
   KeyframesRule,
   KeyframeRule,
+  LayerRule,
   FontFaceRule,
   ViewportRule,
   SimpleRule

packages/jss/src/plugins/layerRule.js

@@ -0,0 +1,89 @@
+import RuleList from '../RuleList'
+import getWhitespaceSymbols from '../utils/getWhitespaceSymbols'
+
+const defaultToStringOptions = {
+  indent: 1,
+  children: true
+}
+
+const atRegExp = /@([\w-]+)/
+
+/**
+ * Rule for @layer
+ */
+export class LayerRule {
+  type = 'layer'
+
+  isProcessed = false
+
+  constructor(key, styles, options) {
+    this.key = key
+    const atMatch = key.match(atRegExp)
+    this.at = atMatch ? atMatch[1] : 'unknown'
+    // Key might contain a unique suffix in case the `name` passed by user was duplicate.
+    this.query = options.name || `@${this.at}`
+    this.options = options
+    this.rules = new RuleList({...options, parent: this})
+
+    for (const name in styles) {
+      this.rules.add(name, styles[name])
+    }
+
+    this.rules.process()
+  }
+
+  /**
+   * Get a rule.
+   */
+  getRule(name) {
+    return this.rules.get(name)
+  }
+
+  /**
+   * Get index of a rule.
+   */
+  indexOf(rule) {
+    return this.rules.indexOf(rule)
+  }
+
+  /**
+   * Create and register rule, run plugins.
+   */
+  addRule(name, style, options) {
+    const rule = this.rules.add(name, style, options)
+    if (!rule) return null
+    this.options.jss.plugins.onProcessRule(rule)
+    return rule
+  }
+
+  /**
+   * Replace rule, run plugins.
+   */
+  replaceRule(name, style, options) {
+    const newRule = this.rules.replace(name, style, options)
+    if (newRule) this.options.jss.plugins.onProcessRule(newRule)
+    return newRule
+  }
+
+  /**
+   * Generates a CSS string.
+   */
+  toString(options = defaultToStringOptions) {
+    const {linebreak} = getWhitespaceSymbols(options)
+    if (options.indent == null) options.indent = defaultToStringOptions.indent
+    if (options.children == null) options.children = defaultToStringOptions.children
+    if (options.children === false) {
+      return `${this.query} {}`
+    }
+    const children = this.rules.toString(options)
+    return children ? `${this.query} {${linebreak}${children}${linebreak}}` : ''
+  }
+}
+
+const keyRegExp = /@layer\s+/
+
+export default {
+  onCreateRule(key, styles, options) {
+    return keyRegExp.test(key) ? new LayerRule(key, styles, options) : null
+  }
+}

packages/jss/src/plugins/layerRule.js.flow

@@ -0,0 +1,33 @@
+// @flow
+import RuleList from '../RuleList'
+import type {
+  CSSMediaRule,
+  Rule,
+  RuleOptions,
+  ToCssOptions,
+  JssStyle,
+  // eslint doesn't understand usage with types
+  // eslint-disable-next-line no-unused-vars
+  ContainerRule
+} from '../flow-types'
+
+declare export class LayerRule implements ContainerRule {
+  type: string;
+  at: string;
+  key: string;
+  query: string;
+  rules: RuleList;
+  options: RuleOptions;
+  isProcessed: boolean;
+  renderable: ?CSSMediaRule;
+  constructor(key: string, styles: Object, options: RuleOptions): this;
+  getRule(name: string): Rule;
+  indexOf(rule: Rule): number;
+  addRule(name: string, style: JssStyle, options?: RuleOptions): Rule | null;
+  replaceRule(name: string, style: JssStyle, options?: RuleOptions): Rule | null;
+  toString(options?: ToCssOptions): string;
+}
+
+declare export default {
+  onCreateRule(key: string, styles: JssStyle, options: RuleOptions): LayerRule | null
+}

packages/jss/tests/integration/rules.js

@@ -206,6 +206,34 @@ describe('Integration: rules', () => {
       `)
     })
 
+    describe('@layer rule', () => {
+      it('should return CSS', () => {
+        const rule = jss.createRule('@layer test', {
+          button: {
+            color: 'red'
+          }
+        })
+        expect(rule.type).to.be('layer')
+        expect(rule.key).to.be('@layer test')
+        expect(rule.toString()).to.be(stripIndent`
+          @layer test {
+            .button-id {
+              color: red;
+            }
+          }
+        `)
+      })
+
+      it('should return CSS without empty rule', () => {
+        const rule = jss.createRule('@layer test', {
+          button: {}
+        })
+        expect(rule.type).to.be('layer')
+        expect(rule.key).to.be('@layer test')
+        expect(rule.toString()).to.be('')
+      })
+    })
+
     describe('@media rule', () => {
       it('should return CSS', () => {
         const rule = jss.createRule('@media print', {a: {display: 'none'}})