Skip to content

CssSyntaxError thrown when using @keyframes with mixin #122

@glutentag

Description

@glutentag
  • Node Version: 8.9.1
  • NPM Version: 6.4.1
  • postcss Version: 7.0.5
  • postcss-less Version: 3.0.2

LESS

.mixin(@rules) {
    @keyframes loading-spin {
        @rules();
    }
}

.mixin({
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
});

Errors

CssSyntaxError {
  name: 'CssSyntaxError',
  reason: 'Unknown word',
  source: '.mixin(@rules) {\n    @keyframes loading-spin {\n        @rules();\n    }\n}\n\n.mixin({\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n});',
  line: 14,
  column: 2,
  message: '<css input>:14:2: Unknown word',
  input: 
   { line: 14,
     column: 2,
     source: '.mixin(@rules) {\n    @keyframes loading-spin {\n        @rules();\n    }\n}\n\n.mixin({\n    0% {\n        transform: rotate(0deg);\n    }\n    100% {\n        transform: rotate(360deg);\n    }\n});' } }

Expected Behavior

No failure.

Actual Behavior

Error thrown.

How can we reproduce the behavior?

Try to process a Less file containing keyframes structure as mixin parameter.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions