Match apply rules against a lookup table instead of searching

__tests__/applyAtRule.test.js

@@ -80,6 +80,22 @@ test('it fails if the class does not exist', () => {
  })
 })
 
+test('applying classes that are defined in a media query is not supported', () => {
+ const input = `
+ @media (min-width: 300px) {
+ .a { color: blue; }
+ }
+
+ .b {
+ @apply .a;
+ }
+ `
+ expect.assertions(1)
+ return run(input).catch(e => {
+ expect(e).toMatchObject({ name: 'CssSyntaxError' })
+ })
+})
+
 test('applying classes that are ever used in a media query is not supported', () => {
  const input = `
  .a {

src/lib/substituteClassApplyAtRules.js

@@ -2,24 +2,26 @@ import _ from 'lodash'
 import postcss from 'postcss'
 import escapeClassName from '../util/escapeClassName'
 
-function normalizeClassName(className) {
- return `.${escapeClassName(_.trimStart(className, '.'))}`
-}
-
-function findMixin(css, mixin, onError) {
- const matches = []
+function buildClassTable(css) {
+ const classTable = {}
 
  css.walkRules(rule => {
- if (rule.selectors.includes(mixin)) {
- if (rule.parent.type !== 'root') {
- // prettier-ignore
- onError(`\`@apply\` cannot be used with ${mixin} because ${mixin} is nested inside of an at-rule (@${rule.parent.name}).`)
- }
-
- matches.push(rule)
+ if (!_.has(classTable, rule.selector)) {
+ classTable[rule.selector] = []
  }
+ classTable[rule.selector].push(rule)
  })
 
+ return classTable
+}
+
+function normalizeClassName(className) {
+ return `.${escapeClassName(_.trimStart(className, '.'))}`
+}
+
+function findMixin(classTable, mixin, onError) {
+ const matches = _.get(classTable, mixin, [])
+
  if (_.isEmpty(matches)) {
  // prettier-ignore
  onError(`\`@apply\` cannot be used with \`${mixin}\` because \`${mixin}\` either cannot be found, or it's actual definition includes a pseudo-selector like :hover, :active, etc. If you're sure that \`${mixin}\` exists, make sure that any \`@import\` statements are being properly processed *before* Tailwind CSS sees your CSS, as \`@apply\` can only be used for classes in the same CSS tree.`)
@@ -30,11 +32,20 @@ function findMixin(css, mixin, onError) {
  onError(`\`@apply\` cannot be used with ${mixin} because ${mixin} is included in multiple rulesets.`)
  }
 
- return _.flatten(matches.map(match => match.clone().nodes))
+ const [match] = matches
+
+ if (match.parent.type !== 'root') {
+ // prettier-ignore
+ onError(`\`@apply\` cannot be used with ${mixin} because ${mixin} is nested inside of an at-rule (@${match.parent.name}).`)
+ }
+
+ return match.clone().nodes
 }
 
 export default function() {
  return function(css) {
+ const classLookup = buildClassTable(css)
+
  css.walkRules(rule => {
  rule.walkAtRules('apply', atRule => {
  const mixins = postcss.list.space(atRule.params)
@@ -53,7 +64,7 @@ export default function() {
  const decls = _(classes)
  .reject(mixin => mixin === '!important')
  .flatMap(mixin => {
- return findMixin(css, normalizeClassName(mixin), message => {
+ return findMixin(classLookup, normalizeClassName(mixin), message => {
  throw atRule.error(message)
  })
  })